의외로 신입이 모르는 것! - 브라우저 렌더링 과정

면접에서 신입에게 가장 많이 물어봤던 것이 브라우저 렌더링 과정이었다.

처음에는 면접을 위해서 달달 외우기만 했었는데 어느정도 시간이 지나고 다시 보니 이해가 되는게 신기했다.

한번 그렇게 해보시기를....

 

---

브라우저 렌더링 과정은 어떻게 될까

 

 

1. HTML parsing

브라우저 Render engine이 HTML을 parsing해서 DOM node로 이루어진 DOM Tree를 생성한다.

 

2. CSS parsing

CSS 파일과 Inline style을 parsing하여 CSSOM을 만들게 된다.

 

3. Render Tree 생성

DOM Tree와 CSSOM을 결합해 Render Tree를 만들게 된다.

Render Tree는 어떤 스타일이 적용되어야하고, 순서는 어떻게 나타낼지 즉, 화면에 시각적으로 나타나는 요소들을 결정하게 된다.

반대로 시각적이지 않은 <script>, display: 'none' 등은 Render Tree에 그려지지 않는다.

 

4. Layout 단계

Mozilla에서는 reflow라고 말하기도 하는데 이 단계에서는 뷰포트 내에서 생성 된 Render Tree의 각 노드들이 스크린 상의 어느 공간에 위치해야할지 결정되고 position, size 등이 이 단계에서 계산된다.

여기서 Layout은 계산 범위에 따라서 Global Layout(전역적 레이아웃)과 Incremental Layout(증분적 레이아웃)을 볼 수 있는데, Global Layout은 전체 레이아웃을 계산하는 것을 말한다.

폰트 적용, 폰트 사이즈 적용, offsetHeight 등과 같은 경우이다.

하지만 노드가 많아지면 속도가 느리기에 브라우저에서 자체적인 최적화 로직을 탑재하고 있다.

그 중 하나가 Dirty bit system이다.

이를 활용하면 매번 처음부터 탐색하면서 레이아웃을 변경하지 않고, 특정 부분만 다시 계산함으로써 비용을 줄일 수 있다.

 

5. Paint 단계

실제로 화면에 repaint가 되는 과정을 말한다.

 

이러한 과정을 통해서 화면에 렌더링 되어지고 우리가 볼 수 있게 되는 것이다.

 

! Tip. 그렇다면 어떻게 Render Tree를 빠르게 만들 수 있을까?

심플하게 보자면 DOM 요소와 CSS 규칙이 적을 수록 빠르다.

즉, html의 경우 div tag의 남용, 쓸데없는 wrapping 등 불필요한 태그 사용을 자제하도록 하자!

css의 경우 box를 이동할 때 top, left 등의 속성을 사용하면 layout부터 다시 발생하게 되는데 translate을 사용하면 composition만 일어나게 된다.

 

*** 덧붙혀서...

어떤 인터렉션에 의해서 DOM에 변화가 발생하게 되면 Render Tree가 그 때마다 재생성 된다.

즉, 인터렉션에 의한 변화가 발생하면 모든 요소들의 스타일을 다시 계산하고 Layout 과정과 repaint 과정을 반복하게 되는 것이다.

여기서 인터렉션이란 "Like" 버튼 클릭, 장바구니 목록에서 상품 삭제, 댓글 달기 등을 말한다.

매번 이럴 때마다 DOM을 조작하는 불필요한 비용이 발생되는데, 이 때문에 인터렉션이 잦은 페이지에서는 SPA(Single Page Application)가 유용하게 쓰인다.

인터렉션이 없는 정보만 전달하는 페이지라면 굳이 SPA를 사용할 필요가 없는 것이다.