JavaScript 에센셜 | 위니북스

시간 최적화

1. 시간 최적화

시간 최적화는 크게 세 가지 측면에서 살펴볼 수 있습니다.

초기 구동 시간: 애플리케이션이 처음 로드되는 데 걸리는 시간
계산 시간: 계산을 수행하는데 걸리는 시간
반응 시간: 사용자의 행동에 반응하는 시간

1.1. 초기 구동 시간

웹 페이지의 로딩 시간은 사용자 경험에 큰 영향을 미칩니다. 로딩이 빠른 페이지와 그렇지 않은 페이지의 사용자 경험은 현저한 차이를 보입니다.

연구에 따르면 사이트를 로드하는데 1초가 추가될 때마다 사용자의 10%가 사이트를 떠난다고 합니다. 이러한 이유로 초기 구동 시간을 최적화하는 것은 매우 중요합니다.

사용자 유지가 중요한 성능

초기 구동 시간을 최적화하기 위해 다음과 같은 방법을 사용할 수 있습니다.

다운로드 파일 개수와 용량을 최소화

이미지 스프라이트 기법을 적극적으로 사용합니다.
가능한 최신 포맷의 이미지를 사용합니다. 이미지 용량 최적화 툴 (ex. kraken)을 활용합니다.
최적화된 폰트를 사용합니다. 가능한 woff와 같은 최신 포맷의 폰트를 사용하고, 폰트 용량을 체크합니다.
폰트의 사용 빈도가 제한적이라면 이미지를 사용합니다.

@font-face {
  font-family: 'Nanum Gothic';
  src: url(NanumGothic.woff) format('woff');
  src: url(NanumGothic.woff2) format('woff2');
}
/* format('')을 명시적으로 작성하면 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있습니다. */

@font-face {
  font-family: 'Nanum Gothic';
  src: url(NanumGothic.woff) format('woff');
  src: url(NanumGothic.woff2) format('woff2');
}
/* format('')을 명시적으로 작성하면 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있습니다. */

최소화한 (minify) CSS, JS 파일 사용하여 파일의 용량을 줄입니다.
- vscode의 JS & CSS Minifier 확장 프로그램을 사용하여 파일을 최소화합니다.
필요한 라이브러리와 프레임워크만 사용합니다.

중요도가 낮은 콘텐츠는 지연 로딩(lazy loading) 을 고려합니다.

lazy loading | MDN

<img src="image.jpg" alt="..." loading="lazy" />
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

<img src="image.jpg" alt="..." loading="lazy" />
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

구동 시간을 지속적으로 측정 하고 모니터링합니다.
- 크롬 네트워크 탭, PageSpeed Insights 등을 활용하여 페이지의 구동 시간을 측정합니다.

1.2. 계산 시간

계산 시간은 프로그램이 특정 작업을 수행하는 데 걸리는 시간을 의미합니다. 이는 주로 알고리즘의 효율성과 관련이 있습니다. 효율적이고 빠른 알고리즘을 사용하여 계산 시간을 최적화할 수 있습니다.

1.3. 반응 시간

반응 시간은 사용자의 행동에 얼마나 빠르게 반응하는지를 나타냅니다. 이를 최적화하기 위해서는 브라우저의 렌더링 방식을 이해하고 이에 맞춰 코드를 작성해야 합니다.

브라우저 렌더링 과정 | Youtube

반응 시간을 최적화하기 위한 몇 가지 방법을 살펴보겠습니다.

JS 보다는 CSS 애니메이션 을 활용합니다.
- JS로 스타일을 수정해도 결국 CSS 속성으로 업데이트 됩니다.
Transform 속성 을 사용합니다.
Repaint와 Reflow 를 유발하는 속성은 가능한 사용하지 않습니다.
- CSS Triggers에서 각 브라우저 엔진 별로 reflow와 repaint 되는 CSS 속성을 확인할 수 있습니다.
브라우저 렌더링 엔진

크롬 블링크 (Blink)

파이어폭스 게코 (Gecko)

사파리 웹킷 (Webkit)

엣지 엣지HTML (EdgeHTML) -> 블링크

IE 트라이던트 (Trident)

브라우저별 엔진과 렌더링 과정
requestAnimationFrame 을 사용합니다.
- 브라우저가 애니메이션을 최적화하도록하고, 비활성 탭에서는 애니메이션이 동작하지 않도록 합니다.
실습
div 태그로 상자를 하나 만들고 키보드의 화살표 키를 눌러 왼쪽, 오른쪽으로 이동하도록 만들어 보세요.

브라우저	렌더링 엔진
크롬	블링크 (Blink)
파이어폭스	게코 (Gecko)
사파리	웹킷 (Webkit)
엣지	엣지HTML (EdgeHTML) -> 블링크
IE	트라이던트 (Trident)

DOM 접근과 업데이트 는 가능한 적게 합니다.

DOM 접근은 가능한 좁은 범위에서 적게 사용합니다.

실습
아래와 같은 HTML 구조상에서 JS를 이용해 이미지와 텍스트를 변경해보세요.

<article class="parent">
  <figure>
    <img
      class="figImg"
      src="https://miro.medium.com/v2/resize:fit:640/format:webp/1*FvUDSeJMpEJ_Lihbtuu-aw.png"
      alt=""
    />
    <figcaption class="figCap">개리는 아무 생각이 없습니다.</figcaption>
  </figure>
</article>
 
<!--
1. 이미지는 https://miro.medium.com/v2/resize:fit:720/format:webp/1*nZaiJiMSPGsLGp9oiUoWsA.png 로 변경합니다.
2. figcaption 안의 텍스트는 '개리는 무엇을 먹을지 고민합니다.' 로 변경합니다.
-->

<article class="parent">
  <figure>
    <img
      class="figImg"
      src="https://miro.medium.com/v2/resize:fit:640/format:webp/1*FvUDSeJMpEJ_Lihbtuu-aw.png"
      alt=""
    />
    <figcaption class="figCap">개리는 아무 생각이 없습니다.</figcaption>
  </figure>
</article>
 
<!--
1. 이미지는 https://miro.medium.com/v2/resize:fit:720/format:webp/1*nZaiJiMSPGsLGp9oiUoWsA.png 로 변경합니다.
2. figcaption 안의 텍스트는 '개리는 무엇을 먹을지 고민합니다.' 로 변경합니다.
-->

메모리 상에서만 존재하는 경량화된 DOM 트리인 DocumentFragment를 사용해서 한 번에 DOM을 업데이트합니다.

실습
아래와 같은 HTML 구조를 JS를 이용해 10개를 만들어 브라우저에 렌더링 해봅니다.

<article class="parent">
  <figure>
    <img
      class="figImg"
      src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*nZaiJiMSPGsLGp9oiUoWsA.png"
      alt=""
    />
    <figcaption class="figCap">개리는 무엇을 먹을지 고민합니다.</figcaption>
  </figure>
</article>

<article class="parent">
  <figure>
    <img
      class="figImg"
      src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*nZaiJiMSPGsLGp9oiUoWsA.png"
      alt=""
    />
    <figcaption class="figCap">개리는 무엇을 먹을지 고민합니다.</figcaption>
  </figure>
</article>