이미지 모달 분석

• 1장에서처럼 병목 코드를 찾기 위해 Performance 패널을 이용할 것임

• 무작정 Performance 패널로 검사하기보다는, 서비스 이용 과정에서 느리거나 문제가 있다고 판단되는 부분을 찾아 검사해 볼 것임

• 이미지 갤러리 서비스에서는 크게 3가지 지점을 확인할 수 있음

  1. 페이지가 최초로 로드될 때
  2. 카테고리를 변경했을 때
  3. 이미지 모달을 띄웠을 때

• 직접 이미지 갤러리를 탐색해 보면 페이지 로딩 과정과 카테고리 변경 과정에서는 별로 느린 느낌이 없음. 하지만 이미지를 클릭해서 이미지 모달을 띄웠을 때는 이미지도 늦게 뜨고 배경 색도 늦게 변하는 것을 볼 수 있음

• 이미지가 늦게 뜨는 것은 이미지의 사이즈 때문에 어쩔 수 없겠지만, 배경 색이 늦게 뜨는 원인은 살펴볼 필요가 있음

• 모달이 뜨는 과정에서 메인 스레드의 작업을 확인하려면, 화면이 완전히 로드된 상태로 Performance 패널의 새로고침 버튼이 아닌 기록 버튼을 클릭함. 그리고 이미지를 클릭하여 모달을 띄운 뒤 기록 버튼을 다시 누르면 기록이 종료됨. 필요에 따라 네트워크 및 CPU에 throttling 옵션을 설정해도 됨

  

• 1번에서는 이미지 클릭으로 인해 이미지 모달이 뜸. 이미지 모달이 뜨면 모달 안의 이미지를 로드해야 하기 때문에 Network 섹션에서 이미지가 다운로드되는 것을 볼 수 있음

• 이미지가 모두 다운로드되면 2번으로 넘어감. 식별할 수 있는 작업 이름이 딱히 없어서 헷갈릴 수 있지만, 이미 모달이 뜨고 이미지가 로드된 다음에 실행되는 작업이 딱 하나 있음을 알고있음. 바로 getAverageColorOfImage 함수임. 작업의 제일 마지막을 보면 Image Decode라는 작업이 보임. 이 작업에서 이미지에 관한 처리 작업을 하고 있음을 알 수 있음. 실제로 이 Image Decode 작업은 drawImage 함수의 하위 작업임

• 마지막으로 3번과 같이 새롭게 렌더링되면서 변경된 배경화면이 화면에 보임

getAverageColorOfImage 함수 분석

• 위의 사진을 보면 getAverageColorOfImage 함수가 굉장히 느리다는 것을 명확히 알 수 있음
• 이 함수는 이미지의 평균 픽셀 값을 계산하는 함수로 캔버스에 이미지를 올리고 픽셀 정보를 불러온 뒤 하나씩 더해서 평균을 내고 있음
• 즉, 큰 이미지를 통째로 캔버스에 올린다는 점과 반복문을 통해 가져온 픽셀 정보를 하나하나 더하고 있다는 점에서 느림
• 이 코드를 두 가지 방법으로 최적화해 볼 것임
  1. 함수에 메모이제이션 이라는 기법을 적용하는 방법
  2. 함수 자체의 로직을 개선하는 방법

메모이제이션으로 코드 최적화하기

• 메모이제이션이란 한 번 실행된 함수에 대해 해당 반환값을 기억해 두고 있다가 똑같은 조건으로 실행되었을 때 함수의 코드를 모두 실행하지 않고 바로 전에 기억해 둔 값을 반환하는 기술임

• 여기서 조건이란 함수에서 인자 값을 의미함. 동일한 인자가 들어오면 결국 반환 값도 같을 테니 가능한 방법임

  

• 예를 들어 인자를 제곱하는 함수에 메모이제이션을 적용해 보면 아래와 같음

  const cahe = {}; // 함수의 반환 값을 저장하기 위한 변수
  
  function square(n) {
  	if(cache[n]) { // 이미 저장된 값이라면 기존 값을 그대로 반환
  		return cache[n];
  	}
  	
  	const result = n * n;
  	cache[n] = result; // 다음에 저장된 값을 사용할 수 있도록 지정
  	return result;
  }