22-10-26-JavaScript(13) 최적화

최적화 (Optimization)

1) 작동하게 만들기
2) 올바르게 작동하도록 만들기
3) 빠르게 만들기

시간

• 초기 구동시간 : 초기에 애플리케이션이 로드 되는 시간
• 계산시간 : 동일한 계산을 얼마나 빠르게 수행하는지
• 반응 시간 : 사용자 행동에 얼마나 빠르게 반응하는지

초기 구동시간

1. 다운로드 해야 하는 파일 갯수, 용량 줄이기
   • 이미지 스프라이트 기법
   • 최신 포맷의 이미지 사용
   • 이미지 용량 최적화하기
   • 최적화된 폰트 사용
     - 사용 빈도가 적다면 이미지 폰트로 사용
2. 최소화한 CSS, JS 파일 사용하기 (.min)
3. 필요한 라이브러리, 프레임워크 사용
4. 중요하지 않은 컨텐츠의 페이지 렌더링 고려
   • <img> <iframe> 에서 loading='lazy으로 페이지 렌더링 고려
5. 지속적인 구동시간 측정

계산시간

알고리즘 영역

반응시간

1. JS 보다는 CSS 애니메이션 활용

2. Transform 속성 사용

3. repaint, reflow 유발하는 속성 사용 줄이기

4. requestAnimationFrame 사용하기

5. DOM 접근, 업데이트 가능한 좁은 범위에서 적게 사용하기

   • Document fragment를 사용하여 한번에 DOM 업데이트 (메모리상에서만 존재)

   const frag = document.createDocumentFragment();
   let parentEl = document.querySelector('main');
   // 반복문
   frag.appendChild(article);
   // frag에 article를 붙이고
   parentEl.appendChild(frag);
   // parentEl에 붙이면 frag는 없어지고 밑에 article 요소들이 붙는다.
   
   // 반복문으로 붙일때마다 dom 화면이 계속된 업데이트를 방지하기 위해 createDocumentFragment()로 한번에 붙이기