on
Optimization - 1
Optimization - 1
1) 브라우저의 로딩과정
1. 파싱
브라우저에서 웹페이지를 로드하면 가장 먼저 HTML 파일을 다운로드 한다. 파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성하는 단계이다.
파싱 중 , , 태그를 발견하면 각 리소스를 요청하고 다운로드 한다.
HTML 또는 리소스에 CSS가 포함된 경우에는 CSSOM 트리 구성 작업도 함께 진행한다.
DOM 트리 및 CSSOM 트리가 구성되는 방법은 아래와 같다.
Critical Path Hello web performance students!
상단의 HTML 코드는 트리 데이터 구조로 연결해 부모-자식 관계를 갖도록 한다.
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko
위의 코드에서 style.css 처럼 외부 스타일시트 파일이나 내부 스타일시트가 포함되어 있을 경우, CSS를 해석해 CSSOM 트리를 구성한다.
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko
2. 스타일
스타일 단계에서는 파싱 단계에서 생성된 DOM, CSSOM 트리를 가지고 스타일을 매칭시켜주는 과정을 거쳐 렌더 트리를 구성한다. 아래 이미지는 파싱 단계에서 설명한 DOM 트리와 CSSOM 트리를 조합해 렌더트리가 구성되는 과정을 보여준다,
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko
3. 레이아웃
레이아웃 단계에서는 노드의 정확한 위치와 크기를 계산한다. 노드의 정확한 크기와 위치를 파악하기 위해 루트부터 노드를 순회하면서 계산하고, 레이아웃 결과로 각 노드의 정확한 위치와 크기를 픽셀값으로 렌더트리에 반영한다.
만약 CSS에서 크기 값을 %로 지정하였다면, 레이아웃 단계를 거친 후 %값은 계산되고, 측정가능한 픽셀 단위로 변환된다.
레이아웃 전
https://ui.toast.com/fe-guide/ko_PERFORMANCE
레이아웃 후
https://ui.toast.com/fe-guide/ko_PERFORMANCE
4. 페인트
이전 레이아웃 단계에서 계산된 값을 이용해 렌더트리의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 위치와 관계없는 CSS 속성(색상, 투명도 등)을 적용한다. 그리고 픽셀로 변환된 결과는 포토샵의 레이어처럼 생성되어 개별 레이어로 관리된다. 단 각각의 엘리먼트가 모두 레이어가 되는 것은 아니다. transform 속성 등을 사용하면 엘리먼트가 레이어화 되는데 이 과정을 페인트라고 한다.
5. 합성 & 렌더
페인트 단계에서 생성된 레이어를 합성하여 스크린을 업데이트 한다. 합성과 렌더 단계가 끝나면 화면에서 웹 페이지를 볼 수 있다.
2) 레이아웃과 리페인트
브라우저 로딩 과정 중 스타일 이후의 과정을 렌더링이라고 하는데, 이 렌더링 과정은 상황에 따라 반복하여 발생할 수 있다. 스타일 단계에서 구성되는 렌더 트리는 자바스크립트에 의해 DOM트리 CSSOM트리가 변경될 때 다시 재구성된다.
DOM이 추가/삭제되거나 요소에 기하적인 영향(높이, 넓이, 위치)을 주는 CSS 속성값을 변경하는 경우 렌더 트리가 다시 재구성된다. 즉, 레이아웃부터 이후 과정을 다시 수행한다.
레이아웃은 요소에 기하적인 영향을 주는 CSS 속성값을 변경할 때 발생한다고 했는데, 반대로 영향을 주지 않는 CSS 속성값을 변경하면 레이아웃 과정을 건너뛴다! 페인트부터 수행하며 이를 리페인트라고 한다.
레이아웃이 일어나면 전체 픽셀을 다시 계산해야 하므로 부하가 크다. 반면 리페인트는 이미 계산된 픽셀값을 이용해 화면을 그리기 때문에 레이아웃에 비해 부하가 적다.
Sample
요소에 기하적인 영향을 주는 CSS 속성값 변경
: height, width, left, top, font-size, line-height 등
요소에 기하적인 영향을 주지 않는 CSS 속성값 변경
: background-color, color, visibility, text-decoration 등
* 참고자료
https://docs.google.com/spreadsheets/u/0/d/1Hvi0nu2wG3oQ51XRHtMv-A_ZlidnwUYwgQsPQUg1R2s/pub?single=true&gid;=0&output;=html
https://ui.toast.com/fe-guide/ko_PERFORMANCE
from http://developerkhc.tistory.com/72 by ccl(A) rewrite - 2021-12-13 20:26:52