[JS] 브라우저의 렌더링 과정

용어 정리

파싱

어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다.

---

렌더링

HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.
크게 2단계를 거쳐 이뤄진다.

1) DOM 요소와 스타일에 기반을 둔 레이아웃 계산

2) 계산된 요소의 화면 표현

일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그린다.

 

---

렌더링이 진행되는 과정

1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다.
2. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더트리를 생성한다.
3. 브라우저 JS 엔진은 받아온 JS를 파싱해 AST를 생성하고, 바이트 코드로 변환해 실행한다
4. 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다.
5. 화면에 HTML 요소를 페인팅한다.

 

1. 서버로부터 리소스를 요청한 뒤 응답 받아오기

브라우저는 URL을 입력받으면, DNS(도메인 서버)를 통해 IP 주소로 변환받아 해당 IP주소를 갖는 서버에 요청을 전달한다.

 

2. HTML,CSS 파싱 후 DOM, CSSOM 생성하기, 이들을 결합해 렌더 트리 생성하기

HTML은 서버로부터 바이트 형태로 전달받게 되며, 이후 문자열로 변환한다.
문자열로 변환된 HTML은 각각 토큰으로 분해된다.
토큰으로 분해 된 HTML은 각각 노드 객체로 분해되며, 각각의 노드 객체가 부모-자식 관계를 형성하며 트리 형태의 자료구조인 DOM을 형성한다.

CSS 또한 파싱 과정이 바이트 → 문자열 → 토큰 → 노드로 이루어진다.
각각의 노드는 부모-자식 관계를 형성하고, 트리 형태의 자료구조인 CSSOM을 형성한다.
HTML 파싱 중, CSS를 의미하는 link 태그나 style 태그를 만날 경우 블로킹되어 CSSOM 생성으로 넘어간다.
CSSOM 생성이 마무리되면, 블로킹 된 시점부터 다시 HTML 파싱을 진행한다.

렌더 트리 = 렌더링에 필요한 트리 자료 구조이다.
DOM과 CSSOM으로 이루어져 있다.
화면에 렌더링되는 노드만으로 구성된다. 화면에 렌더링되지 않는 "display:none" 이나 "meta"태그 등은 렌더 트리를 구성하지 않는다.

 

3. JS 파싱 후 AST 생성하기

AST = 추상 구문 트리를 말한다. 이를 기반으로 인터프리터가 바이트코드를 생성한다.

HTML 파싱중, JS를 의미하는 script 태그를 만나게 되면 블로킹되어 제어권을 JS엔진에게 넘겨주어 JS 파싱으로 넘어감

AST 생성 과정
1. JS코드는 각각의 의미를 갖는 토큰으로 분해
2. 각 토큰은 서로 결합하여 AST 형성
3. AST는 바이트코드로 변환되어 인터프리터가 실행

 

4. 렌더 트리를 기반으로 HTML요소의 레이아웃 계산하기

렌더 트리는 요소들의 위치나 크기와 관련된 정보들이 들어있다. BUT 이 정보들은 각 요소들에 대한 정보일 뿐, 전체화면에서 정확히 어디에 위치할 것인지에 대해서는 아직 모른다. 이런 계산을 하는 단계가 레이아웃 단계이다. 브라우저는 각 요소들이 전체 화면에서 어디에, 어떤 크기로 배치되어야 할지 파악하기 위해 렌더트리의 맨 윗부분부터 아래로 내려가며 계산을 진행한다. 모든 값들은 절대적인 단위인 px값으로 변환된다.

 

5.  화면에 HTML 요소 페인팅하기

이제 화면에 보여줄 차례다. 브라우저 화면은 픽셀이라고 하는 작은점들로 이루어져 있다. 정보를 가진 픽셀들이 모두모여 하나의 이미지나 화면을 구성한다. 화면에 색상을 입히고, 어떤 요소를 보여주기 위해서는 이 픽셀에 대한 정보가 있어야 한다.
페인팅 = 이러한 픽셀들을 채워나가는 과정
따라서 이 과정들을 이미지화된 모습으로 브라우저 화면을 통해 볼 수 있게 되는 것이다.

---

리플로우, 리페인트

리플로우 : 레이아웃 계산을 다시하는 것
리페인트 : 새로운 렌더트리를 바탕으로 다시 페인트 하는 것

If) 사용자가 브라우저 화면의 크기를 조절하거나, 버튼을 눌러 화면에 요소가 추가되거나 삭제되는 경우가 생기면, 요소들의 위치나 크기등이 바뀌는 일이 생긴다. 당연하게 생각할 수 있지만, 화면에 나타나는 모습을 바꾸기 위해서는 모든 요소들의 위치와 크기를 다시 계산하고, 다시 그려서 보여줘야 한다. 이를 리플로우(reflow) , 리페인트(repaint)라 한다.

 

JS 파싱에 의한 HTML 블로킹

3번에서 설명했다시피, HTML 파싱은 script 태그를 만나면 블로킹되어 렌더링 엔진에서 JS엔진에게 제어권을 넘겨주게 된다.

script는 동기적(위에서 아래로) 파싱이 이루어지기 때문에, HTML 파싱이 script태그의 위치에 따라 지연될 수 있다.

If) JS코드가 HTML 노드를 생성할 경우, HTML 파싱이 완료돼있어야 한다.
=> 따라서 script 태그는 되도록이면 body태그 맨 아래에 위치하는 편이 좋다.

 

script 태그의 async와 defer 어트리뷰트

script 태그를 body 태그 맨 아래에 위치시키더라도,
JS 코드 파싱중에 사용자가 웹에 상호작용을 시도(버튼을 누르기, 텍스트 입력) 시 정상적으로 작동하지 않는다.

async, defer 어트리뷰트를 통해 JS 코드를 비동기적으로 불러옴으로써 DOM 렌더링의 블로킹을 방지할 수 있다.

 

async

JS 파일 로딩을 비동기적으로 처리한다.
JS 파일 로딩이 끝난 순서대로 파싱 및 실행이 이루어지며,
이 경우 HTML 파싱이 블로킹 처리되기에 순서가 보장되지 않는다.

defer

async와 마찬가지로 JS 파일 로딩을 비동기적으로 처리한다.
JS 코드의 파싱 및 실행은 DOM 생성 이후에 실행된다.

---

요약

브라우저의 랜더링 엔진은 HTML, CSS파일로 DOM과 CSSOM을 생성한다.
이 둘은 렌더트리로 결합되고, 이 렌더트리는 요소들의 크기, 위치를 계산하는 레이아웃 작업과 픽셀을 통해 화면에 실제로 그리는 작업인 페인팅 단계에 활용된다.
여기까지의 과정을 마치면 사용자는 웹페이지를 볼 수 있게 된다.
추가로, DOM은 DOM API를 제공하기 때문에, Javascript로 이미 생성된 DOM을 조작할 수 있다는 것도 소개했다. 이런 조작으로 인해 요소들에 변경 사항이 생기면, 앞의 과정을 다시 수행하게 된다. 레이아웃단계를 다시 반복하는걸 리플로우, 페인팅단계를 다시 반복하는걸 리페인팅이라 한다.
이렇게 우리는 단순히 주소창에 주소를 검색할 뿐이지만, 그 내부 과정을 살펴보면 굉장히 복잡한 과정이 빠르게 수행되고 있었다는 것을 알게되었다.