브라우저의 기본 렌더링 과정
서버에서 브라우저의 데이터를 받아 온 이후 렌더링 과정을 설명하면
- DOM 트리 생성 : HTML 파일을 파싱(parsing)하여 DOM 트리를 생성한다.
- CSSOM 트리 생성 : CSS 파일을 파싱하여 CSSOM 트리를 생성한다.
- Render 트리 생성 : DOM 트리와 CSSOM 트리를 합성해 Render 트리를 생성한다.
- Layout 단계 : Render 트리의 각 요소가 배치될 위치와 크기를 픽셀 단위로 계산한다.
- Paint 단계 : 계산된 위치와 크기대로 요소를 화면에 나타낸다.
이렇게 크게 5단계로 나타낼 수 있다. 이 과정을 조금 더 자세히 알아보았다.
1. DOM, CSSOM 트리 생성 과정
HTML과 CSS의 객체 모델인 DOM, CSSOM 트리 생성에는 다음과 같은 세부 과정이 진행된다.
-
먼저 서버로부터 8비트 데이터 형태의 HTML 정보를 받아온다. 이를 바이트 스트림(Byte Stream)이라고 한다.
-
받아온 데이터를 문자로 변환하고 브라우저가 가지고 있는 토큰(token)과 비교하여 받아온 데이터가 HTML인지 확인하는 과정을 거친다. 이를 토큰화(Tokenization)이라고 한다.
토큰화
토큰은 이 문자가 HTML혹은 CSS인지 확인하는 일종의 설명서 라고 할 수 있다. 이 설명서를 통해 받아온 문자 데이터를 확인하는 과정을 토큰화 라고 한다.
-
토큰화를 통해 확인된 문자는 노드(node) 라는 단위의 데이터로 변환되어 트리를 이루는 하나의 단위가 된다.
- link, img 태그를 만나게 되면 태그 내의 리소스를 다운로드한다.
- script 태그를 만나게 되면 DOM 트리 생성을 일시 중단하고 script 태그 내부의 자바스크립트를 다운로드해 해석하게 된다.
2. Render 트리 생성
DOM 트리와 CSSOM 트리가 합쳐져 Render 트리가 생성된다.
이때, Render 트리에는 실제로 화면에 보여질 요소의 정보만 표시되기 때문에 display: none과 같은 속성이 적용된 요소는 Render 트리에 표시되지 않는다.
display: none
이와 같이 Render 트리에 포함되지 않는 경우 발생하는 문제는 다음과 같다.
- 트리에 요소가 나타나지 않기 때문에 웹 접근성이 떨어질 수 있다.
- display 속성값이 변화하면 리플로우가 발생해 성능 저하의 요인이 될 수 있다.
3. Layout 및 Paint
Render 트리에 표시된 정보를 기반으로 요소의 크기와 위치를 계산하는 레이아웃(Layout) 과정이 이루어진다.
위치와 크기에 대한 계산이 끝나면 텍스트, 색, 보더(border) 등을 여러 레이어에 그리는 페인트(Paint) 가 진행된다.
리플로우(Reflow)와 리페인트(Repaint)
레이아웃 과정에서 계산된 요소의 크기와 위치가 변경되는 경우, 레이아웃을 새로 계산하는 리플로우가 일어나게 된다.position,margin,padding등을 변경하면 발생한다.
페인트 과정에서 결정된 색, 보더 등의 정보가 변경되면, 페인트를 다시 진행하는 리페인트가 일어나게 된다.
4. Composite
페인트 단계에서 만들어진 여러개의 레이어를 합성(composite)하여 하나의 완전한 페이지를 만드는 과정이다.
