-
HTML이 Context free grammar가 아니기 때문에, 일반적인 상향식, 하향식 파서로 작성되는 게 아니라 좀 복잡한 파서를 사용해야 하며, 다양한 에러들을 처리해 줘야한다. (CSS는 Context free grammar라 일반적인 파서를 사용할 수 있다.)
-
더 빠른 요청을 위해 img, link 태그는 파싱 중이 아니라 파싱 전 Preload scanner에 의해 미리 요청됨. (html 토큰화 이후 Preload scanner 실행)
-
img는 non blocking으로 처리 되는 외부 리소스이지만, css는 브라우저 마다, 속성마다 다르게 처리되므로 주의해야 한다.
-
script 엘리먼트는 명시된 스크립트가 다운로드 되고 실행이 끝날 때 까지 html 파싱을 block 한다. script 태그가 DOM을 수정하지 않는다면 async 속성을 사용해 스크립트가 다운로드 될 때 html 파싱이 block 되는 것을 막을 수 있다. defer 속성을 사용할 경우, 스크립트 다운로드 뿐 아니라 해당 스크립트 실행 자체를 html 파싱 후로 미룸으로써 html 파싱 blocking을 제거할 수 있다.
-
preload 등의 리소스 힌트를 사용해 외부 리소스 다운로드의 우선순위를 변경 가능하다.
-
DOM 트리를 html에 레이아웃이 끝난 후 시각적인 트리? 형태로 변환되는데, 이 용어의 이름이 브라우저 엔진마다 다른 것 같다. 웹킷은 attachment, layout이 끝난 후 생성된 트리의 이름을 Render tree라고 부르는 것 같다.
-
attachment: DOM, CSSOM에서 스타일을 결정하고 렌더러를 만들어 렌더러 트리를 만듬.
-
layout: 렌더러가 생성될 때 크기와 위치 정보는 아직 계산되어 있지 않다. 이 값들을 계산하는 과정을 layout 이라고 한다. (렌더러 인스턴스들의 재귀적인 layout 호출로 구현되어 있는 듯)
-
Render tree엔 DOM 트리에서 display: none 속성이 들어 있는 등 시각적이지 않은 요소들은 제외된다.
-
렌더러의 width는 상위 렌더러의 width, 해당 렌더러의 width, margin, border를 사용해 계산되고, 계산된 width, maxWidth, minWidth 중 알맞은 값으로 설정된다.