2024-08-14 브라우저의 렌더링 과정 이해하기

웹 페이지 요청 -> HTML Parsing(DOM 생성) -> CSS Parsing(CSSOM 생성) -> 렌더 트리 생성(DOM 트리 + CSSOM 트리 결합) -> JavaScript 실행 -> 레이아웃 계산 -> Paingting -> Compositing -> 사용자와 인터렉션

 

외계어로 쓰인 것 같지만 이해하면 쉽다.

 

웹 프론트엔드 엔지니어라면, 우리가 만드는 웹 페이지가 브라우저에서 어떤 순서로 렌더링되는지 이해하는 것이 중요하다.

(아는 게 중요한 이유)

 

각 단계 설명

웹 페이지 요청

• 사용자가 브라우저에 url 주소를 입력하면 브라우저는 서버에 웹 페이지를 요청한다.
• 그리고 이 요청을 받은 서버는 이 요청이 유효하다고 판단하면 HTML, CSS, JavaScript 등의 파일을 클라이언트의 브라우저로 전송한다.

HTML Parsing (DOM 생성)

• 서버에서 응답을 받은 브라우저는 받아 온 자료 중 먼저 HTML을 파싱하여 DOM(Document Obejct Model) 트리를 생성한다.
• DOM은 HTML의 문서 구조를 나타내는 트리이다.
• (트리가 뭔지)

CSS Parsing (CSSOM 생성)

• 다음 이 정적인 HTML 문서를 스타일링 해주는 CSS를 파싱하여 CSSOM(CSS object Model이라는 또 다른 트리를 생성한다.
• CSSOM은 CSS 스타일 규칙을 구조화한 트리이다.

렌더 트리 생성

앞에서 HTML과 CSS를 파싱한 결과로