프론트엔드 성능 = 로딩 + 렌더링
로딩
프론트 단에서 중요한건 Load, Proccesing Event 최적화
HTML -> CSS -> Javascript 순으로 parsing
(Dom Tree + CSSOM Tree) + Render Tree
브라우저 기준 최적화
방법 1
스크립트 head태그 -> body태그 or async+head태그
방법 2
css 외부 스타일 -> inline 스타일
사용자 기준 최적화
방법 1
SSR 고려
방법 2
PWA 고려
렌더링
방법 1
강제 동기 레이아웃
(레이아웃 과정이 끝나기 전에 자바크스립트 파일에서 DOM 요소의 위치나 크기값을 변경 후 바로 가져오려 하면 강제로 레이아웃을 발생시킴)
강제동기 레이아웃 유발 코드는 한번만 사용 후 캐싱
방법 2
Dom 변경을 최소화(virtual Dom 사용)
방법 3
worker-loader 사용 (wep pack)
