Browser Rendering 과정 - 3월 9일 스터디 발표

개요

브라우저에서 웹 페이지를 렌더링 하는 과정을 알아보기 위해 해당 글을 읽고 정리한다.

https://javascript.plainenglish.io/web-performance-understanding-critical-rendering-path-72283caefc1f

 

내용

브라우저 렌더링이란?

화면에 웹 페이지를 렌더링 하기 위해 브라우저에서 수행하는 작업 또는 단계의 시퀀스.

  1. 로더(Loader)가 서버에서 리소스(HTTP, CSS, JavaScirpt) 스트림을 읽음.

  2. 수신된 HTML을 파싱하여 DOM생성

  3. CSS 파싱하여 CSSOM 생성

  4. DOM과 CSSOM이 결합된 Render Tree 생성

     - 모든 요소의 위치 및 치수(레이아웃) 계산 포함

  5. 화면에 실제 픽셀을 페인팅

 

Document Object Model

서버에서 가져온 HTML을 브라우저는 분석하고 DOM을 생성한다.

DOM 트리 생성 단계

해당 단계를 수행하며 수신된 HTML 바이트를 토근으로 변환하는 작업이 포함됨.

이러한 토큰을 사용하여 노드를 생성 후 각 노드를 연결하여 DOM트리 생성

 

토큰 생성

브라우저는 Fetched HTML 문자를 문자별로 읽기 시작하고, HTML 태그가 나타날 때 마다 토큰 생성

• StartTag 토큰
  • HTML 시작(열기) 태그를 만났을 때 생성
• EndTag 토큰
  • HTML 종료(닫기) 태그를 만났을 때 생성

HTML을 분석 후 아래 이미지의 토큰이 생성된다.

이 단계에서 생성된 토큰은 모든 HTML 태그에 대한 노드를 생성하는데에 사용된다.

노드 및 DOM 트리 생성

• HTML/XML 파서가 문서를 파싱하여 생성함.
• 토큰의 순서는 노드 간의 관계, 즉 노드가 다른 노드의 자식인지 여부를 식별하는데 사용된다.
• 노드에는 속성, 클래스 등과 같은 특정 태그의 전체 정보가 포함되어 있다.
• 노드가 생성되면 해당 시퀀스를 사용해 노드 간의 관계를 식별하여 노드를 연결한다.

CSS Object Model (CSSOM)

• CSS 파서가 CSSOM 트리를 생성함.
• HTML을 구문 분석하는 동안 브라우저가 스타일 시트를 참조하는 스타일 태그 또는 링크 태그를 발견
  • 외부 CSS의 경우 해당 스타일을 가져오고, 구문 분석 및 페이지 스타일에 대한 모든 정보를 포함하는 CSS개체 모델로 변환함.
•  CSSOM 생성 프로세스는 DOM 생성과 유사함

         1. CSS바이트가 문자로 변환됨

         2. 문자가 토큰으로 변환

         3. 토큰이 노드로 변환

         4. 해당 노드를 연결하여 CSSOM을 생성

• 부모 노드의 모든 스타일은 자식 노드에도 적용됨

Render Tree

• DOM과 CSSOM을 조합한 것.
• 렌더 트리를 생성하기 위해 브라우저는 DOM 탐색을 시작하고 CSSOM에서 일치하는 스타일을 찾음
• 위에서 찾은 것을 결합하여 콘텐츠 및 스타일 정보를 모두 포함하는 렌더링 트리 노드를 생성.
• 렌더링에 필요한 노드만 선택해 페이지를 렌더링 하는데 사용한다.
  • 예) 메타, 스크립트 등과 같은 태그의 노드 & CSS 스타일 사용으로 숨겨진 노드는 포함되지 않는다.

Layout

• 이 단계의 렌더 트리는 뷰포트에서 각 요소의 치수와 위치를 찾는데 사용됨.
• 렌더링 트리에서 위치, 크기 등을 알 수 없기 때문에 객체들에게 위치 및 크기 등을 정해주는 과정
• CSS는 선택자에 따라 적용되는 태그가 다르므로 CSS 스타일을 분석해 태그에 스타링 규칙을 적용되게 결정함.
• 백분율 값은 뷰포트 크기에 따라 픽셀로 변환됨.

Paint

• 각 요소의 모든 컨텐츠, 스타일, 치수 및 위치가 있으므로 렌더 트리의 각 노드를 실제 픽셀로 변환한다.
• 그리는 작업을 실행한다.