브라우저의 랜더링 과정

우선 그림으로 알아보자

위의 두 개의 흐름도는 브라우저 엔진의 양대 산맥인 웹킷(Wekbit) 과 게코(Gecko) 의 렌더링 과정을 나타낸 것 입니다.

두 부분의 공통적인부분 및 브라우저의 랜더링 과정 순서를 알아보자

1.HTML, CSS 읽기
2.HTML, CSS 파싱(Parsing)
3.DOM 트리 생성, 스타일 규칙(CSSOM) 생성
4.형상구축(어테치먼트)
5.렌더트리(형상트리) 생성
6.배치(Reflow)
7.그리기(Repaint)

1. HTML , CSS 읽기

렌더링 과정 그 첫 번째는, 당연하게도 HTML, CSS 파일을 읽는 것입니다.
그럼 누가 저 파일들을 읽을까요? 바로 브라우저가 읽습니다.
이 부분은 그다지 어려울 것이 없기 때문에 바로 다음으로 넘어가겠습니다.
(DOM 객체를 가져온다)

2. HTML, CSS 파싱(Parsing)

Parsing 은 번역하면 분석이라는 뜻이다.
HTML, CSS 파싱은 HTML, CSS 분석과 같은 말입니다.
그러나 이러한 분석이 왜 필요한가? 이에 대한 답은
브라우저가 HTML , CSS 파일을 그대로 읽을 수 없기 때문이다.
즉 파싱을 하는 이유는
화면에 보여주기 위해 파일을 읽어서 분석한 다음, 화면에 보여줄 수 있는 구조로 구축하기 위해서입니다.
(DOM 객체를 생성한다)

3. DOM 트리 생성, 스타일 규칙(CSSOM) 생성

1단계 즉 DOM 객체를 가져온다라는 말은 원하는 DOM 객체를 가져온다는 말이다. 여기서 DOM 객체를 좁은 의미로는 HTML의 태그를 의미하지만 태그에는 속성(Attribute) , 태그로 감싸지 않은 텍스트까지도 의미합니다.
즉, HTML에 있는 모든 것들이 바로 DOM 객체입니다.
이러한 객체들을 모아서 트리구조로 만든것이 바로 DOM 트리 입니다.

그렇다면 이러한 DOM들을 왜 트리구조로 만들었을까?
-> HTML 태그 자체가 트리구조 이기 때문입니다.
특정 자식 노드는 하나의 부모 노드만 가질 수 있고 여러개의 자식 노드를 가질 수 있습니다.

예시 코드로 봅시다

<div class="div-root>
  <div class="div-0">
    <div class="div-2">
      <div class="div-3">
        DIV-3
      </div>
    </div>
  </div>

  <div class="div-1">
    DIV-1
  </div>
</div>

위 코드를 돔 트리로 나타내보면

이제 CSSOM을 알아보자
스타일 규칙(CSSOM) 생성은 우리가 흔히 작성하는 CSS 파일을 DOM 트리 처럼 만드는 것을 말합니다.
실제 트리 구조 모습도 DOM 트리와 흡사합니다.

브라우저가 화면에 나타낼 수 있는 구조(DOM 트리와 스타일 규칙(CSSOM))를 완성 했습니다.
이제부터는 화면에 그리기 위한 단계들입니다.

4.형상구축(어테치먼트)

형상 구축은 위에서 만든 DOM 트리와 스타일 규칙(CSSOM) 을 만들어서 형상(Frame)을 만드는 과정입니다.
그리고 두 개가 합쳐저서 만들어진 이 형상(Frame)이 바로 실제로 브라우저 화면에 그려지게 되는 것입니다.

5.렌더트리(형상트리) 생성

4에서 형상구축의 결과물이 바로 이 랜더트리입니다.

이 렌더트리를 가지고 브라우저는 본격적으로 화면에 그리는 작업을 시행할 준비가 되었습니다.

6.배치(Reflow)

앞선 렌더트리를 화면에 그려주기 위해서는, 노드(DOM + CSSOM)가 브라우저 화면의 어느 위치에 배치 되어야 하는지를 알아야 합니다.

브라우저는 노드에 있는 내용(태그에 있는 내용이나 style 같은 시각적인 부분)을 가지고 어느 위치에 배치 해야 하는지를 계산합니다.

이 과정에서 꽤 복잡한 계산(연산) 이 들어갑니다. 이 의미는 바로 컴퓨터의 CPU의 자원을 많이 사용한다는 뜻입니다.

그래서 대부분 웹 페이지에서의 성능 저하는 CPU의 자원을 많이 사용하는 바로 이 부분에서 발생하게 됩니다.

이제 브라우저는 노드의 위치가 어디에 배치되어야 하는지를 알고 있습니다.

7.그리기 (Repaint)

이제 마무리로 사용자가 볼 수 있게 화면에 그려주어야 합니다.

배치 과정에서 브라우저 화면에 어디에 놓을지 좌표형식으로 가지고 있기 때문에, 브라우저 렌더링 엔진에서 이 좌표를 가지고 사용자가 볼 수 있도록 화면에 그려줍니다.