Web 성능최적화 - FE
로딩 최적화
- 브라우저 기준 최적화의 문제점
- 사용자 기준 최적화
- 프리 렌더러
- PWA 사례
브라우저 로딩 과정
parse -> style -> layout(글자하나하나 위치 지정하고 구조를 짜야해서 비용이크다) -> composite & render -> paint
HTML 파싱 =>DOM 트리
CSS 파싱 => CSSOM 트리
두개를 합쳐서 => Render 트리
css , js는 블록 리소스
블록리소스 최적화
자바스크립트 로드 시점 최적화
</body>태그 하단에 위치시켜라<head>태그에 뒤되async나defer를 사용하라async나defer를 쓰면 블록을 만들지 않고(끊기지않고) 렌더링을 계속 한다.
css 최적화
- 외부스타일 => 인라인 스타일 (wating time을 줄일 수 있다.)
사용자 기준 최적화가 중요하다.
- 사용자 입장에서 중요한 컨텐츠를 먼저 보여줘야한다.
First Meaningful Paint
SPA -> SSR
서버 사이드 렌더링
- 생성시점 : 런타임
프리렌더러
-
서버 사이드 렌더링 종류 중 하나
-
생성시점 : 빌드타임
로딩 성능 최적화 : PWA
- PWA = Web + App
렌더링 최적화
- 레이아웃 스래싱
레이아웃 성능이 떨어졌다면, 강제 동기 레이아웃이 발생했는지 확인해보기
강제 동기 레이아웃
javascript에서 DOM변경, CSS변경은 필연적으로 일어난다.
이때, 브라우저 로딩 과정이 그래도 반복된다.
레이아웃 스래싱
강제 동기 레이아웃 개선
=> 캐싱하기
- 가상돔
가상돔은 불필요한 돔 변경을 피할 수 있다.
VIEW의 snabbdom => h 함수 => 불필요한 업데이트를 줄일 수 있다.
- 웹워커
60 FPS = 16ms/fr => 10ms/fr
1초에 60 Frame = 60 FPS => 가장 적합한 프레임 속도
무거운 작업 / 오래 걸리는 프레임
=> 웹워커에 작업을 넘겨라
웹팩 설정
로딩 최적화 : 브라우저 기준(DomContentLoaded, load)
로딩 최적화 : 사용자 기준(Critical Rendering Path,FMP,SSR)
로딩 최적화 : Progressive Web App 사례
렌더링 최적화 : 레이아웃 스래싱
렌더링 최적화 : 가상돔
렌더링 최적화 : 웹 워커
Leave a comment