성능 보장 렌더링 순서

우리의 웹페이지나 웹어플리케이션을 브라우저가 사용자에게

보여주기까지 어떤 과정을 거치냐?

 

브라우저에서 URL을 입력하게 되면 

HTML request/response -> loading -> scripting -> rendering -> layout -> painting

이런 순서로 진행이 된다.

 

먼저 브라우저가 서버에게 HTML 파일을 요청하게 된다.

그래서 HTML 파일을 서버에게 받아서 로딩을 하게 된다.

데이터를 받아와서 이 HTML을 한줄 한줄씩 읽어서 DOM 요소로 변환한다. 

이 부분을 scripting이라고 하는데 이렇게 DOM으로 변환하고 CSS요소를 CSSOM으로

변환한 다음에 이것을 브라우저 window에 표기를 하기 위해서 준비한다.

이렇게 Rendering tree를 만든 다음에 각각의 요소들이 어떤 위치에 얼마나 크게 표기될 건지

계산을 한 다음에 그림을 그리는 스텝으로 진행이 된다.

 

이것을 조금 더 어떤 일을 하냐를 카테고리를 나눠서 생각하면 HTML 페이지에서 브라우저가 이해할 수 있도록

브라우저만의 언어로 바꾸는 Construction 파트와 이렇게 만들어진 브라우저가 이해할 수 있는 Rendering tree를 이용해서 구조를 작성하고 어디에다 배치할 건지 계산을 한 다음에 실제로 브라우저 window에 그림을 그려주는 rendering 하게 되는 Operation 파트로 나뉘게 된다.

DOM            CSSOM             RenderTree           layout          paint       composition

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Contruction                                                                                    Operation

time to first render                                                                    performance user interactions

                                                                                                             avoid jank

                                                              ensure reflows & repaints at 60 f / s

Contruction 파트에는 앞에서 살펴본 DOM 요소로 변환하고 CSSOM을 만들게 되고 RenderTree를 최종적으로 만드는 것까지를 의미하게 되고, 그 다음에 Operation 과정에서 layout, paint, composition을 통해서 최종적으로 사용자에게 내용이 우리의 웹페이지가 보여지게 되는 것이다.

 

 

Operation

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

layout                                                             paint                                                          composition

 

layout은 만든 RenderTree를 이용(rendertree에는 DOM 요소뿐만 아니라 최종적으로 계산된 CSS 스타일이 포함되어져 있다.)

그 정보를 기반으로 해서 window 위에서 어떤 요소는 이 정도 위치에 그리고 이 정도 크기로 배치를 하게 되고 얘는 여기에, 얘는 여기에 얘는 이렇게 레이아웃을 구상하게 된다. X와 Y 그리고 너비와 높이 이런 크기들이 계산이 될것이다.

이런 레이아웃을 맞춰야지 정확하게 어디에다가 얼마만큼 크게 그림을 그려야 될지가 계산이 된다. 이런 레이아웃을 통해서 그 다음에 paint 과정이 일어나게 되는데 paint과정은 바로 브라우저에 바로 그림을 그리는 것이 아니라 우리가 이 요소들을 어떻게 배치했느냐에 따라서 paint 부분에서는 각각 부분을 조금 조금씩 잘게 잘게 나누어서 이미지를 준비해 놓는다. 즉 각각의 요소들을 이미지를 비트맵이라고 하는데, 컴퓨터가 이해할 수 있는 이미지를 비트맵 데이터 형태로 변환하게 되는데, 깊게 들어가지 말자.

 

 

paint 단계에서는 따로따로 나누어서 계산이 되는 과정을 거치고 CSS에서 z-index를 쓰게 되면(꼭 z-index 별로 아니라 다양한 속성값에 따라 브라우저 엔진마다 성능 개선을 위해 레이어를 만든다) 얘가 지금 제일 위에 있으니까 얘를 이렇게 묶어서 하게 되고, 그리고 얘네는 각각 같은 레이어에 있으니까 같은 z-index에 있으니까 같이 묶어서 이렇게 paint에서는 레이어 단계를 만들어서 레이어별로 paint를 준비해만 놓는다.

 

브라우저도 레이어기능을 위해서 성능개선을 하는데 CSS에 will-change라는 속성값이 있는데

이 속성값은 브라우저에게

"내 이 요소는 opacity가 변화될지도 몰라"

이렇게 얘기를 하면 브라우저는

"아~ 너는 변화 될지도 몰라? 알겠다. 그럼 나는 너를 새로운 레이어에다가 추가해 놓을게"

"네가 opacity가 변경이 되면 너만 바뀌면 되게 만들어 놓을게" 이렇게 준비를 하는 것이다.

그래서 will0change는 속성값을 너무 많이 쓰지 마라 이런 말이 있다.

 

즉 불필요하게 너무 많이 쓰면 브라우저가 불필요하게 쓸데없이 레이어를 너무 많이 만들기 때문에 이것도 좋지가 않다.

각각 요소마다 새로운 레이어를 만들게 되면 너무 많은 레이어가 존재하게 되어도 브라우저 성능이 나빠질 수 있기 때문이다. 그래서 이런 레이어는 중요하지만 너무 많이 남용해서 사용하면 안된다.

 

컴포지션은 미리 준비한 레이어를 순서대로 차곡차곡 브라우저 위에다가 표기하면 된다. 이제 준비한 아이를 브라우저에 얘 먼저 내려놓고  z-index가 높은 아이를 제일 나중에, 얘를 먼저 올려놓고 그 위에 얘를 올려놓고 composiotn, 이렇게 함께 모아서 표기하게 되는 것이다.

 

 

참고: https://academy.dream-coding.com/courses/browser101

프론트엔드 필수 브라우저 101 (자바스크립트 마스터 | 디버깅, 성능 분석, 실전 프로젝트 10개)