FE - 성능 개선

웹의 성능 혹은 최적화 관련 메모

페이지 첫 렌더링 시간 개선

1. 이미지 최신 포맷 사용 (WebP 등)
2. 폰트 WOFF2 사용하기

3. 도메인 분할

   • http/1.1의 경우 보통 도메인 당 6개만 동시에 가능
   • http/2,3는 해당 사항과 무관
4. Image Sprite 이용 - 이미지들을 한 파일로 다운로드
5. prefetch, preconnect 등 link 태그 속성 이용
6. 랜더링 블락 요소 주의
7. lazy-loading 이용
   • HTML5부터는 loading 속성 사용 가능
8. 캐쉬, CDN 등을 이용

스크립트 계산 시간 개선

1. worker를 이용한 멀티쓰레드 이용
2. 메모이제이션 활용
3. lazy-evaluation 사용

반응시간 개선

1. 애니메이션 성능 기준 60FPS
2. GPU 가속이 되는 CSS 속성을 위주로 애니메이션
3. DOM 변경은 최소화 - DocumentFragment 활용