[WEB] 브라우저 렌더링 과정 바로 알기

 

 

 

 

브라우저 렌더링의 원리

 

주소창에 https://www.google.com/을 입력하면 브라우저에서는 무슨 일이 일어날까?

 

브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, Javascript와 같은 웹 페이지 요소들을 파싱하고 이를 브라우저 화면에 표시하는 역할을 한다.

 

 

 

브라우저 렌더링 동작 과정

 

렌더링의 기본적인 동작 과정은 다음과 같다.

 

1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다(Parsing)

2. 두 Tree를 결합하여 Rendering Tree를 만든다(Style)
3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다(Layout)
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다(Paint)
5. 레이어를 합성하여 실제 화면에 나타낸다(Composite)

 

각 단계를 좀 더 자세히 알아 보자.

 

 

---

 

 

Parsing

 

브라우저가 페이지를 렌더링하려면 가장 먼저 HTML 문서를 파싱해야 한다. Parsing 단계는 렌더링 엔진이 HTML 문서를 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다. 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.

 

cf 1) DOM을 생성하는 중간에 <link> 또는 <style>을 만나면 DOM 생성을 중단하고 CSS 파일을 서버에 요청 후 응답 받아 html과 동일한 과정으로 해석해 CSSOM을 생성하는 것. CSS 파싱이 완료되면 HTML 파싱이 중단된 시점으로 돌아가 다시 HTML 파싱을 시작함.

 

cf 2)

- HTML 파싱 과정에서 브라우저는 HTML 태그의 종류와 속성 등을 분석.

- CSS 파싱 과정에서 브라우저는 CSS 선택자와 규칙을 분석, 각 규칙의 적용 범위 및 우선순위 등을 계산함.

---

 

Style

 

Style 단계에서는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 결합하여 Render Tree를 생성한다. Render Tree는 실제로 화면에 그려질 Tree 구조에 해당된다. 그러니까 브라우저가 화면에 표시할 요소들을 정의하는 것. 이 과정에서 브라우저는 레이아웃과 페인팅에 필요한 정보를 추출하고 숨겨진 요소나 비표시 요소를 필터링한다.

 

ex)

Render Tree를 구성할 때  visibility: hidden 은 요소가 보이지는 않지만 공간을 차지하기 때문에 Render Tree에 포함되나,  display: none 의 경우 Render Tree에서 제외된다.

 

---

 

Layout

 

Layout 단계는 Render Tree를 이용해 브라우저 화면에 요소들을 배치하는 과정이다. 이때 브라우저는 화면에 어떻게 배치해야 할지 root부터 노드를 순회하며 각 요소의 크기, 위치, 간격 등을 계산하여 뷰포트 내에서의 정확한 배치를 수행한다(브라우저 크기, 스크롤 위치 등도 고려됨).

 

---

 

Paint

Paint 단계에서는 이전 Layout 단계에서의 결과를 이용해 계산된 위치에 요소들을 표시한다. 렌더링된 요소들을 화면에 그리는 것. 이 과정에서 브라우저는 CSS 스타일, 배경, 그림자, 그림 등을 고려하며 여러 계층으로 구성된 렌더링 요소들을 하나의 이미지로 합치는 과정도 포함된다 (스타일이 복잡할수록 Paint 단계에서의 시간은 당연히 늘어남) .

 

---

 

Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 이제 드디어 화면에서 웹 페이지를 볼 수 있다.

 

 

 

---

 

 

Javascript의 파싱과 실행

DOM은 HTML의 구조나 정보뿐 아니라 HTML 요소를 제어할 수 있는 DOM API(ex. document.querySelector() 등) 를 제공한다. DOM API는 DOM의 각 노드와 사용하기 위한 인터페이스이자 HTML을 JS에서 제어하기 위한 명령들의 집합. DOM API를 사용하면 이미 생성된 DOM을 동적으로 제어할 수 있다.

CSS를 파싱할 때 <link>나 <style>을 만나면 DOM 생성을 멈추고 CSSOM을 생성했던 것처럼 <script>도 동일하다. 다른 점은 DOM과 함께 CSSOM을 만드는 일은 렌더링 엔진이 했다면 <script> 내의 자바스크립트 코드를 파싱할 때에는 렌더링 엔진이 자바스크립트 엔진에 제어권을 넘긴다(이를 blocking이 일어났다고 함).

이후 자바스크립트의 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권이 넘어가 HTML 파싱이 중단된 시점부터 DOM의 생성을 재개한다.

자바스크립트 실행 과정에서 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 이전에 그려놓은 DOM/CSSOM이 변경된다. 변경된 DOM/CSSOM은 다시 렌더 트리로 결합되며 리렌더링되는데 이를 리플로우(reflow, 레이아웃을 다시 계산해 주는 것) / 리페인트(repaint, 재결합된 렌더 트리를 기반으로 다시 페인트하는 것)라고 한다.

 

 

출처: https://velog.io/@do_dam/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95

 

 

 

---

 

 

브라우저 렌더링 순서 정리

 

 

Construction

(A) 사용자가 웹 사이트에 접속하면 
(B) 브라우저는 IP를 파악하고 
(C) 서버에 HTTP 요청, 
(D) 서버는 다시 브라우저에 HTTP 응답 
(E) 응답한 HTML을 파싱해 DOM 트리를 만들고 여기에 CSSOM을 결합해 Render Tree를 생성해 주는 

위 (A) ~ (E)의 5가지 과정을 Construction이라고 한다.

 

Operation

Render Tree가 만들어진 이후 

(F) Render Tree 안에 있는 Node를 배치하고 (Layout)
(G) UI를 그리고 (Paint)
(H) Node를 순서대로 구성한 뒤 (Composition)
(I) 사용자에게 결과 화면을 출력하는

위 (F) ~ (I)의 4가지 과정을 Operation이라고 한다.

 

 

 

 

 

 

참고자료
https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work#%EB%A0%8C%EB%8D%94render

https://d2.naver.com/helloworld/59361

https://opendeveloper.tistory.com/entry/FrontEnd-%EC%A7%80%EC%8B%9D%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%9B%90%EB%A6%AC%EC%99%80-%EC%88%9C%EC%84%9C%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B3%A0%EB%A0%A4%EC%82%AC%ED%95%AD

https://velog.io/@do_dam/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95