[Web] 웹 브라우저 렌더링(Rendering)이란?

next.js를 공부하다가 웹 브라우저 렌더링 방식에 대해 제대로 이해할 필요가 있음을 느꼈다.

따라서 렌더링이 무엇인지부터 차근차근 블로그에 정리해보려 한다. 

 

1. 렌더링(Rendering)

렌더링은 웹사이트가 그려지는 과정을 의미한다.

 

웹 브라우저에는 자바스크립트 코드를 읽어와 기능을 작동시키는 자바스크립트 엔진과

사용자가 볼 화면을 그려내는 렌더링 엔진, 두 가지가 들어가 있다.

 

렌더링 엔진은 HTML, CSS, Javascript 세 가지 언어를 통해

웹사이트의 소스코드를 읽어와 실시간으로 화면을 그려낸다. 

 

모든 웹 브라우저에는 렌더링 엔진을 가지고 있으며,

우리가 가장 많이 사용하고 있는 크롬이나 엣지는 크롬의 Blink(블링크) 렌더링 엔진을 사용하고 있다.

 

 

2. 렌더링(Rendering) 순서

브라우저 렌더링 순서는 아래와 같다.

DOM / CSSOM Tree → JS → Render Tree → layout → paint → composition

 

1) Dom Tree / CSSOM Tree

출처 https://ko.javascript.info/basic-dom-node-properties

 

Dom Tree는 html 요소들을 트리 형태로 만들어 놓은 것을 말한다. 

HTML/XML 파서 Dom 요소로 변환하여 Dom Tree를 만든다. 

 

CSSOM Tree는 DOM과 CSS가 합쳐진 트리로 CSS 파서가 만든다.

 

브라우저에 url을 입력하고 나면, 브라우저가 서버에게 html 파일을 요청하게 된다.(request)

그 후 서버에게서 html을 받으면(response), 파일을 loading 하게 된다.

​

파일을 loading하면서 한 줄, 한 줄, 태그를 Dom 요소로 변환하여 Dom tree를 만들고,

css 파일을 읽은 후 cssom tree를 만든다.(scripting)

 

 

2) Render Tree

이 전에 만들어진 Dom tree와 Cssom tree를 결합하여 만든다.

페이지를 렌더링 하는데 필요한 노드만 선택하여 형성한다.

 

예를들어 'h2' 태그가 DOM Tree에 존재했지만 'display:none'이라는 속성이 적용된 경우

브라우저에 표기되지 않기 때문에 'Render Tree'에서는 빠지게 된다.

 

 

3) Layout

Render Tree를 토대로 요소들의 위치와 크기를 계산해 어떻게 표기할지 레이아웃을 정해놓는 과정을 말한다.

 

 

4) Paint

계산되 layout을 잘게 나눠 비트맵 형태의 이미지를 준비한 후, 실제로 그리는 작업을한다. 

 

레이아웃을 한 번 그린 후에는 각 요소를 바꿀때마다 처음부터 다시 렌더링해야 하기 때문에 

paint 작업을 통해 각각의 레이아웃을 쪼개서 준비하게 된다. 

 

 

'More tools → Layers'를 들어가보면 각 화면이 paint를 통해 나눠진 것을 확인할 수 있다.

 

 

5) composition

paint에서 나눈 레이어를 모아서 표기하는 과정을 말한다. 

 

 

 

렌더링 순서는 브라우저의 성능과 큰 연관이 있기 때문에 알아두는 것이 좋다.

css 속성이 어디서부터 렌더링 되는지에 따라 속도가 달라지기 때문이다.

레이아웃을 변경시키면 렌더링 과정이 늘어나므로 당연히 성능에 좋지 않다.

 

아래 페이지에 들어가면 어떤 css 속성이 어디서부터 렌더링 되는지 나와있으니 참고하면 좋을것 같다.

 

https://csstriggers.com/

 

 

 

 

 

 

 

---

참고

https://yozm.wishket.com/magazine/detail/646/