Study/Computer Science

[CS] 브라우저의 렌더링 원리

taecongs 2023. 10. 6. 14:27

알고있으면 좋은 Computer Science Tip✨

브라우저의 렌더링 원리(작동 원리)는?

  • 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링엔진 을 사용한다.
  • 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링 할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어진다.
    1. HTML을 파싱 후, DOM트리를 구축한다.
    2. CSS를 파싱 후, CSSOM트리를 구축한다.
    3. 자바스크립트를 실행한다. (HTML 중간에 스크립트 태그가 있다면 HTML 파싱이 중단된다.)
    4. DOM 과 CSSOM을 조합하여 렌더트리를 구축한다. (display : none 속성은 렌더트리로 구축되지 않는다.)
    5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다. (Layout 단계)
    6. 계산한 위치/크기를 기반으로 화면에 그린다. (Paint 단계)

 

⭐용어 공부⭐

(1) 렌더링엔진

  • 브라우저 마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 크롬은 블링크(Blink), 사파리는 웹킷(Webkit) 그리고 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용한다.

 

(2) CRP

  • CRP(Critical Rendering Path, 중요 렌더링 경로)는 브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변화하는 일련의 단계를 말한다. CRP는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함한다.

 

(3) 파싱

  • 파싱은 하나의 프로그램을 런타임 환경이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미한다. 쉽게 말해, 문서의 내용을 토큰(token)으로 분석하고, 문법적 의미와 구조를 반영한 파스 트리(parse tree)를 생성하는 과정이다.

 

(4) DOM

  • DOM(Document Object Model)이란? HTML 문서의 계층적 구조와 정보를 표현하고 이를 제어할 수 있는 API 즉, 프로퍼티와 메서드를 제공하는 트리자료구조이다.

 

(5) CSSOM

  • CSS 내용을 파싱하여 자료를 구조화 한 것이다.

 

(6) 렌더트리

  • DOM과 CSSOM 트리의 결합으로 만들어진다. 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout)을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트(Paint) 즉, 화면에 요소들을 표현하는 프로세스를 위해 존재한다.