렌더링 엔진

• HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시
• 브라우저마다 사용하는 렌더링 엔진이 각각 다르기 때문에, 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않고 엔진마다 읽을 수 있는 코드 버전도 다르다 → 크로스 브라우징 이슈
• 렌더링 엔진은 모든 HTML을 받을 때까지 기다리지 않고 배치와 그리기 과정을 시작한다
  • 브라우저는 HTML 파일을 네트워크에서 스트리밍 방식으로 다운로드한다

렌더링 엔진 동작 과정

1. DOM & CSSOM

• 렌더링 엔진의 HTML Parser가 HTML을 파싱하여 DOM 노드를 만든다. DOM 노드들을 병합하여 DOM 트리를 만든다
• 렌더링 엔진의 CSS Parser가 CSS를 파싱하여 CSSOM 트리를 만든다

2. 렌더 트리 구축(Attachment)

• CSSOM 트리와 DOM 트리를 결합하여 렌더 트리를 형성한다. 이 과정을 Attachment라고 한다
• 렌더링 트리는 페이지에 표시되는 모든 DOM 컨텐츠와 각 노드에 대한 모든 스타일 정보를 가지고 있다
• 렌더 트리는 화면에 표시되는 각 노드의 위치를 계산하는 레이아웃에 사용되고 픽셀을 화면에 그리는 페인트 과정에도 사용된다

3. 렌더 트리 배치(Layout or Reflow)

• 렌더 트리가 생성되고, 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산한다. 이때 모든 상대적인 값이 픽셀값(절대값)으로 변환된다.(%, rem, vh → px)