질문

웹 브라우저의 렌더링 과정을 설명하고, 렌더링 성능을 저하시킬 수 있는 요소들은 어떤 것이 있나요? 그리고 레이아웃 시프트(Layout Shift)와 페인트(Paint) 과정에서 발생하는 문제를 해결하기 위해 사용할 수 있는 최적화 기법들을 설명해주세요.

1. 브라우저 렌더링

: 브라우저는 DOM 생성, CSSOM 생성, 렌더트리 생성, 레이아웃, 페인트, 컴포지트 단계로 렌더링됩니다.

1. DOM 생성은 HTML을 파싱하여 DOM 트리(DOM Tree)를 구성합니다
2. CSSOM 생성은 CSS 파일을 파싱하여 CSSOM 트리(CSS Object Model Tree)를 생성합니다
3. 렌더트리는 DOM과 CSSOM을 합쳐서 생성하며 display: none이 적용된 노드는 포함이 되지 않습니다. 반면, visibility: hidden이 적용된 노드는 포함됩니다.
4. 레이아웃은 각 노드들에 대한 뷰포트 내의 위치와 크기를 계산합니다.
5. 페인트는 각 픽셀을 채우는 과정으로, 텍스트, 색, 이미지, 보더, 그림자 등 모든 시각적 요소를 그립니다
6. 컴포지트는 레이어를 순서대로 합성하여 최종적으로 화면에 표시합니다

2. 렌더링 성능 저하 요소

: 리플로우와 리페인트를 일으키는 것들

1. 리플로우를 일으키는 요소 : DOM 삭제/추가, 요소의 위치/크기가 변경, 스크롤
2. 리페인트를 일으키는 요소 : 스타일(배경색,폰트색상,테두리색상,박스쉐도우) 변경

3. 레이아웃 시프트

1. 의미 : 웹페이지가 로딩되는 동안 또는 로딩되는 후에 페이지의 시각적인 요소들이 갑자기 움직이는 현상 (예: 이미지나 광고가 늦게 로드되면서 다른 콘텐츠들을 밀어내는 경우, 웹폰트가 로드되면서 텍스트 크기가 변하는 경우)
2. 케이스
   1. 사이즈가 정해져 있지 않은 이미지, 동영상, 광고
   2. 동적인 컨텐츠
   3. 웹폰트