웹워커1 프런트엔드 성능 최적화 - 렌더링 최적화 2. 렌더링 최적화 1. 레이아웃 스래싱 2. 가상돔 3. 웹 워커 1. 레이아웃 스래싱 HTML과 CSS를 파싱해서 렌더 트리를 만들어 레이아웃을 그린다. 레이아웃을 그리는 작업은 요소 하나 하나 크기와 위치를 측정하기 때문에 오래 걸리고 비용이 큰 과정이다. 페인트를 하고 화면을 뿌린다. HTML-DOM > CSS-CSSOM > Redner Tree > Layout > Paint > 화면 뿌리기 이 과정이 DOM 변경으로 인해 반복된다. 강제 동기 레이아웃은 DOM 조작이 없는데도 불구하고 이 과정을 강제로 진행해서 강제 동기 레이아웃이라고 한다. 이런 강제 동기 레이아웃을 유발할 수 있는 코드는 한번만 쓰고 캐싱한다. 2. 가상돔 가상돔은 DOM변경을 최소화하는데 의의가 있다. Proxy와 가상돔을.. 2021. 1. 13. 이전 1 다음
