렌더링이란?
HTML, CSS, Javascript 등의 문서를 브라우저에 출력하는 과정렌더링 엔진
렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시한다.파싱이란?
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.동작 과정
-
렌더링 엔진의 기본적인 동작 과정
-
웹킷 동작 과정
1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성
서버로부터 받은 HTML, CSS를 다운로드 받아 HTML은 DOM Tree, CSS는 CSSOM 으로 만듦.
DOM Tree와 CSSOM Tree은 서로 독립적인 데이터 구조이므로 둘을 연결하는 렌더링 트리 생성 과정이 필요하다.
2. 렌더링 트리(Render Tree) 생성
- DOM과 CSSOM 트리는 결합되어 렌더링 트리를 형성
- 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함됨
EX)
display: none은 공간을 차지하지 않으므로 렌더링 트리에 포함되지 않음.visibility: hidden은 레이아웃에서 공간을 차지하지만 보이지만 않게 해놓은 것이므로 렌더링 트리에 포함됨.
3. 레이아웃(Layout)
레이아웃 단계는 viewport 내에서 각 요소의 정확한 위치와 크기를 캡쳐하는 '상자 모델(box model)'이 출력된다. 렌더 트리 노드들이 가지고 있는 스타일과 속성에 따라 브라우저 화면의 어느 위치에 어느 크기로 출력될지 계산하는 단계. 모든 상대적인 측정값은 화면에서 절대적인 pixel 단위로 변환된다.
4. Paint(그리기)
레이아웃 단계의 계산이 완료되면, 브라우저는 렌더링 트리의 각 노드를 화면의 실제 pixel로 변환하는 'Paint Setup' 및 'Paint' 이벤트를 발생시킨다.
그러면 다음과 같이 뷰포트에 페이지가 표시된다.
