[WEB] 브라우저가 웹페이지를 읽어내는 과정

Browser processing pipeline

• 이미지 출처: https://hpbn.co/primer-on-web-performance/

위 사진은 웹 브라우저가 웹 페이지를 처리하는 과정을 간단하게 표현한 파이프라인입니다.

파싱(parsing)이란?

파싱(parsing) 입력 데이터를 읽어들이고 그 구문을 분석하고 해석하는 과정

파싱하는 과정

HTML 파싱

웹 브라우저는 HTML 문서를 요청하고 그 문서를 토큰화 하여 문자열로 읽어들입니다.
토큰화된 토큰들을 이용하여 DOM을 구성하고 그 과정에서 각 요소들은 노트로 변환되며 이 노드들은 트리 구조로 연결됩니다.
DOM 구성이 된다면 웹 페이지의 구조가 브라우저 내부에 객체로 저장이 됩니다.

• 만약 HTML을 파싱하는 도중 스크립트 파일을 만나게 되면, 파싱하는 것을 멈추고 스크립트를 실행시킵니다.
• 만약 DOMContentLoaded가 있으면, HTML파싱이 완료되었을 때 즉시 발생합니다
• onload는 웹페이지의 모든 리소스가 로드가 되었을 때, 즉 DOM이 CSSOM과 구성이 된 이후에 발생합니다

CSS 파싱

HTML 파싱을 하는 것 처럼 CSS파일을 토큰을 만들고, 이러한 토큰들을 이용하여 CSSOM을 구성하게 됩니다.

Render Tree 구성

DOM과 CSSOM이 구성된 후에는 이 두 객체를 결합하여 Render Tree를 생성합니다.

• Render Tree에는 화면에 보이지 않는 요소들도 렌더트리에 포함이 되지만 몇몇 태그들은 렌더트리에 포함이 되지 않는다.
• 예시) meta태그, link태그, display:none 등

Layout

Render Tree의 각 노드들의 크기와 위치를 계산하여 화면에 배치화는 과정
브라우저는 Render Tree를 순회하면서 각 노드들을 화면 위치에 배치합니다.

Paint

Layout 단계에서 계산된 각 노드의 스타일을 적용하여 실제로 화면에 그리는 과정
브라우저는 Render Tree를 순회하면서 각 노드들의 스타일을 적용하여 화면을 그리게 됩니다.