렌더링 엔진

렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시한다.

동작 과정

렌더링 엔진은 통신으로 부터 문서의 내용을 얻는 걸로 시작하는데 문서의 내용은 보통 8KB 단위로 전송된다.

렌더링 엔진은 HTML 문서를 파싱하고 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환한다.

그 다음 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.

스타일 정보와 HTML 표시 규칙은 렌더 트리에 생성된다.

렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.

렌더 트리 생성이 끝나면 배치가 시작되는데 각 노드가 화면에 정확한 위치에 표시되는 것을 의미한다.

다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이다.

이런 과정들을 점진적으로 진행한다.

렌더링 엔진은 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.

파싱과 DOM 트리 구축

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.

파싱 결과물은 문서 구조를 나타내는 노드 트리인데 파싱 트리 또는 문법 트리라고 한다.

문법

파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다.

이것을 문맥자유문법이라고 한다.

파서-어휘 분석기 조합

파싱은 어휘 분석과 구문 분석 두 가지로 구분한다.

어휘 분석은 자료를 토큰으로 분해하는 과정이다.

구문 분석은 언어의 구문 규칙을 적용하는 과정이다.

파서는 보통 2가지 일을 한다. 자료를 유효한 토큰으로 분해하는 어휘 분석기가 있고 언어 구문 규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성하는 파서가 있다.

변환

소스 코드를 기계 코드로 만드는 컴파일러는 파싱 트리 생성 후 이를 기계 코드 문서로 변환한다.

HTML 파서

HTML 파서는 HTML 마크업을 파싱 트리로 변환한다.

HTML 문법 정의

HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있다.

문맥 자유 문법이 아님

HTML 정의를 위한 공식적인 형식으로 DTD가 있지만 이것은 문맥 자유 문법이 아니다.

HTML은 유연한 문법이다.

HTML DTD

HTML의 정의는 DTD 형식 안에 있다. 이 형식은 허용되는 모든 요소와 그들의 속성 그리고 중첩 구조에 대한 정의를 포함한다.

DOM

파싱 트리는 DOM 요소와 속성 노드의 트리로써 출력 트리가 된다.

DOM은 문서 객체 모델의 준말이다.

이것은 HTML 문서의 객체 표현이고 HTML 요소의 연결 지점이다.

파싱이 끝난 이후의 동작

문서 파싱 이후에 실행되어야 하는 지연 모드 스크립트를 파싱하기 시작한다.

문서 상태는 완료가 되고 로드 이벤트가 발생한다.

CSS 파싱

CSS는 문맥 자유 문법이다.

웹킷 CSS 파서

각 CSS 파일은 스타일 시트 객체로 파싱되고 각 객체는 CSS 규칙을 포한한다.

CSS 규칙 객체는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다.

스크립트와 스타일 시트의 진행 순서

스크립트

웹은 파싱과 실행이 동시에 수행되는 동기화 모델이다.

파서가 script 태그를 만나면 즉시 파싱하고 실행한다.

스크립트가 실행되는 동안 문서의 파싱이 중단된다.

스크립트에 외부에 있는 경우 자원을 받을떄까지 파싱은 중단된다.

defer로 표시하면 문서 파싱은 중단하지 않고 문서 파싱이 완료된 이후에 스크립트가 실행된다.

스타일 시트

스타일 시트는 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단하지 않는다.

그러나 스크립트가 스타일 정보를 요청하는 경우라면 문제가 된다.

스타일이 파싱되지 않은 상태라면 스크립트는 잘못된 결과를 내놓기 때문이다.

파이어폭스는 아직 로드 중이거나 파싱 중인 스타일시트가 있으면 모든 스크립트 실행을 중단한다.

웹킷은 로드되지 않은 스타일 시트 가운데 문제가 될 속성이 있을때만 스크립트를 중단한다.

렌더 트리 구축

DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다.

표시해야 할 순서와 문서의 시각적인 구성요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 목적이 있다.

렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있다.

각 렌더러는 CSS2 명서에 따라 노드의 CSS 박스에 부합하는 사각형을 표시한다.

렌더러는 너비,높이, 위치와 같은 기하학적 정보를 포함한다.

박스 유형은 노드와 관련된 display 속성의 영향을 받는다.

DOM 트리와 렌더 트리의 관계

렌더러는 DOM 요소에 부합하지만 1대1로 대응하는 관계는 아니다.

head 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않는다.

display: none 또한 트리에 나타나지 않는다.

트리를 구축하는 과정

html 태그와 body 태그를 처리함으로써 렌더 트리 루트를 구성한다.

스타일 계산

렌더 트리를 구축하려면 각 렌더 객체의 시각적 속성에 대한 계산이 필요한데 이것은 각 요소의 스타일 속성을 계산함으로써 처리된다.

스타일 데이터는 구성이 매우 광범위한데 수 많은 스타일 속성을 수용하면 메모리 문제를 야기할 수 있다.

각 요소에 할당된 규칙을 찾는 것을 성능 문제를 야기할 수 있다.

배치

렌더러가 생성되어 트리에 추가될 때 크기와 위치 정보는 없는데 이런 값을 계산하는 것을 배치 또는 리플로우라고 한다.

HTML은 흐름 기반의 배치 모델을 사용하는데 보통 단일 경로를 통해 크기와 위치 정보를 계산할 수 있다.

배치는 반복되며 HTML 문서의 html 요소에 해당하는 최상위 렌더러에서 시작한다.

전역 배치와 점증 배치

배치는 렌더러 트리 전체에서 일어날 수 있는데 이것을 전역 배치라고 한다.

그리기

그리기 단계에서는 화면에 내용을 표시하기 위한 렌더 트리가 탐색되고 렌더러의 paint 메서드가 호출된다

CSS 박스 모델

CSS 박스 모델은 문서 트리에 있는 요소를 위해 생성되고 시각적 서식 모델에 따라 배치된 사각형 박스를 설명한다.

각 박스는 콘텐츠 영역 과 선택적인 패딩과 테두리 여백이 있다.