2023. 3. 3. 00:15ㆍ카테고리 없음
DOM, CSSOM 생성 → Render Tree생성 → Layout 단계 → Paint 단계
브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진을 사용하는데, 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP 라는 프로세스를 사용하며 다음 단계들로 이루어진다.
1. 서버로부터 받은 HTML, CSS를 다운받은 후 단순한 텍스트인 HTML, CSS파일을 Object Model로 만든다. HTML과 CSS를 파싱 후 DOM 트리, CSSOM트리를구축함
2. Javascript를 실행
*HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됨
-> DOM 생성을 임시 중단하고, 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 되는데, 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성한다.
3. DOM과 CSSOM을 조합하여 렌더트리를 구축한다. 렌더트리에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다.
* `display: none` 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
4. Layout 단계: 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다. %, vh, vw와 같이 상대적인 위치, 크기 속성은 픽셀 단위로 변환된다.
5. Paint 단계: 계산한 위치/크기를 기반으로 화면에 그린다. 처리해야하는 스타일이 복잡할수록 paint 단계에 소요되는 시간이 길다. (ex. 그라데이션, 그림자 효과 > 단색 배경)