성능 최적화 방법
웹팩 사용/ html 작성할 때 불필요한 div 사용x / css 최적화 (리플로우 / 리페인트) / 이미지 최적화 (지연로딩-picture, img / 스프라이트 이미지 사용) / 검색엔진최적화 / CDN / 파일 수 줄이기 / 라이브러리 의존도 낮추기 /css는 상단, js는 하단에 배치 등 엄청 많은 방법이 있는데
로딩 최적화 , 렌더링 최적화로 나눠보자면 (어디에 초점을 맞추냐에 따라 달리지겠지만 ㅎ,,ㅎ)
렌더링 최적화
목표
최대한 적게 리플로우를 발생시키면서 빠르게 화면을 그리는 것
css최적화
- 리페인트와 리플로우를 고려
브라우저에 js -> style -> lauout -> paint -> composite 순으로 그려짐
-
리플로우 : 레이아웃의 넓이, 높이, 위치 등에 영향을 주는 css 속성을 변경할 경우 layout부터 다시 그려짐
-
리페인트 : 레이아웃에 영향을 주지 않는 속성을 변경하면 레이아웃을 건너뛰고 paint부터 시작
=> 리플로우가 발생하면 브라우저는 전체 픽셀을 다시 계산해야 하므로 리페인트 속성으로 스타일 작성하는 것이 성능에 좋음 -
리플로우 속성
position / width / height / margin / padding / display / top / left / right / bottom / box-sizing / border-color / text-align / border / border-width /
font-family / float / font-size / font-weight / line-height / vertical-align /
white-space / word-wrap / text-overflow / text-shadow ... -
리페인트 속성
color / border-style / visibility / background / background-color /
background-image / background-position / background-repeat / background-size /
text-decoration / outline / outline-style / outline-color / outline-width /
border-radius / box-shadow ...
- 사용하지 않는 css 제거
개발자 도구 - Lighthouse에서 사용하지 않는 css를 확인할 수 있음
(Performance, Mobile 체크 -> Generate report => 해당 페이지 성능 측정)
