브라우저 렌더링(Browser Rendering)

1. 서버로부터 받아온 HTML 문서를 바탕으로 DOM 트리 생성
   • 이 때, HTML을 문법적으로 더 나눌 수 없는 '토큰'으로 분해한다.
   • 각 토큰들을 객체로 변환하여, '노드'를 생성한다.
   • 이렇게 브라우저가 이해할 수 있는, 노드들로 구성된 트리 자료구조를 DOM이라고 한다.
2. CSSOM 트리 생성
   • 렌더링 엔진은 처음부터 한줄 씩 순차적으로 파싱하며 DOM을 생성한다.
   • 이 때, 중간에 CSS를 로드하는 link나 style 태그를 만나면 DOM 생성을 일시 중단한다.
   • 그 후 DOM을 만들듯 CSS 파일을 서버에 요청하고, 응답받은 CSS 파일을 HTML과 동일한 파싱 과정을 거친다.
3. DOM 트리와 CSSOM 트리를 결합하여 렌더트리 (Render Tree) 생성
4. 레이아웃 : 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡쳐하는 박스모델 출력
5. 페인팅: 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환한다. 레이아웃 단계에서 모든 계산이 완료되면, 화면에 요소들을 그린다.

자바스크립트 파싱/실행

• script 태그 내의 자바스크립트 코드를 파싱 할 때는, 렌더링 엔진이 자바스크립트 엔진에게 제어권을 넘긴다.

  • 이 과정을 blocking 이 일어났다고도 한다.

• 이후 자바스크립트 파싱과 실행이 종료되면, 다시 렌더링 엔진으로 제어권이 넘어가 HTML 파싱이 중단된 시점부터 다시 시작하여 DOM 생서을 재개한다.

• 자바스크립트 엔진이 처리하는 자바스크립트 파싱,실행은

1. 토큰으로 분해하고
2. AST (Abstract Syntax Tree)를 생성한 뒤
3. 인터프리터가 읽을 수 있도록 바이트코드로 변환하여 실행

된다.

• 이 때, 자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용되었을 경우, DOM이나 CSSOM이 변경되고, 이는 다시 렌터트리로 결합되어 리렌더링 된다. (이를 리플로우/리페인트라고 한다.)