38장. 브라우저의 렌더링 과정(2)

본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다.

38.3 HTML 파싱과 DOM 생성

브라우저의 응답으로 서버가 응답한 HTML은 문자열로 이루어진 순수한 텍스트
HTML 문서를 렌더링하기 위해서는 브라우저가 이해할 수 있는 자료구조(객체)로 변환해야 함
- 브라우저의 렌더링 엔진이 DOM을 생성하게 됨
- HTML 문서는 HTML 요소들의 집합으로 이루어지며 중첩 관계를 가짐
- DOM은 HTML 문서를 파싱한 결과물

바이트 형태의 HTML 문서를 문자열로 변환
문자열 형태의 HTLM 문서를 문법적 의미를 갖는 최소 코드 단위인 토큰으로 분해
토큰들을 객체로 변환하여 노드들을 생성
- 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생성
- DOM을 구성하는 기본 요소
DOM 구성

렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나감
CSS를 로드하는 link 태그 또는 style 태그를 만나면 DOM 생성을 일시 중지
- href 어트리뷰트에 지정된 CSS파일을 서버에 요청
- 파싱 과정을 거침(바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM)

생성된 DOM은 HTML 요소와 스타일 등을 변경할 수 있는 DOM API 제공
JavaScript 코드에서 DOM을 동적으로 조작 가능
렌더링 엔진은 HTML 문서를 파싱하며 DOM을 생성하다가 script 태그를 만나면 DOM 생성을 일시 중단
- JavaScript 태그를 파싱하기 위해서 제어권을 JavaScript 엔진에 제어권을 넘김
JavaScript 엔진은 JavaScript 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환하고 실행
JavaScript 엔진
- V8 - 구글 크롬, Node.js
- SpiderMonkey - 파이어폭스
- JavaScriptCore - 사파리
- 모든 엔진은 ECMAScript 사양 준수
토크나이징
- 소스 코드를 어휘 분석하여 문법적 의미를 갖는 코드 최소 단위인 토큰들로 분해
파싱
- 토큰들의 집합을 구문 분석하여 AST(추상적 구문 트리) 생성
- 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료구조
바이트코드 생성과 실행
- AST는 인터프리터가 실행할 수 있는 중간 코드인 바이트코드로 변환
  - 인터프리터에 의해 실행

DOM ,CSSOM을 변경하는 DOM API가 사용되면, 변경된 DOM, CSSOM이 다시 렌더 트리로 결합됨
- 다시 레넏링
- 이를 리플로우, 리페인트라고 함
리플로우 : 레이아웃 계산을 다시 하는 것
- 노드 추가/삭제, 요소 크기/위치 변경, 윈도우 리사이징
- 레이아웃에 영향을 주는 변경이 발생한 것에 한해 실행
리페인트 : 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것

렌더링 엔진과 자바스크립트 엔진은 직렬적으로 파싱을 수행
- 동기적으로 위에서 아래 방향으로 순차적으로 파싱하고 실행
HTML 파싱 중에, script 태크에 의해서 DOM 생성이 지연될 수 있음
- script 태그의 위치는 중요한 의미를 가짐
- DOM API를 사용할 때 DOM이 생성 완료되지 않았다면, 문제가 발생할 수 있음
HTML body 요소의 가장 아래에 자바스크립트를 위치
- 렌더링 엔진이 HTML 요소를 모두 파싱하여 DOM 생성 완료 후 script 태그 실행
- 페티지 로딩 시간이 단축될 수 있음

자바스크립트 파싱에 의한 DOM 생성 중단 문제를 근본적으로 해결하기 위해 추가 된 어트리뷰트
인라인 자바스크립트에서는 사용 불가
async 어트리뷰트
- HTML 파싱과 자바스크립트 파일의 로드가 비동기적으로 진행
- 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행, 이때 HTML 파싱 중단
defer 어트리뷰트
- HTML 파싱과 자바스크립트 파일의 로드가 비동기적으로 동시에 진행
- 자바스크립트의 파싱과 실행은 DOM 생성이 완료된 직후 진행
- IE10 이상에서 지원