브라우저 렌더링 과정

이 글은 예전에 봤던 브라우저 렌더링 과정을 리마인드 하기 위해서 한번 간략하게 설명하는 글이다.

 

브라우저 렌더링 과정을 설명하는 전통적인 과정이 있는데 밑의 그림과 같다.

전통적인 렌더링 과정 설명

웹 개발자를 희망하는 사람이라면 다 한번쯤 본 그림일텐데, 이건 로딩을 중시하던 예전의 렌더링 과정 설명이고 최근 문서들은 로딩 이후의 상황이 더 중요해졌기 때문에 dom, cssom, js 과정을 통틀어서 js 과정으로 묶여있다.

최근 렌더링 과정 설명

이 글에서도 html 문서를 parsing해서 dom을 만들고, css를 cssom으로 만들고 하는 과정은 js로 퉁쳐서 설명하도록 하겠다.ㅎ

---

1. js 과정

html 문서를 parsing을 거쳐 dom으로 만들고, js code도 js engine을 통해서 parsing, byte code로 만들어 실행시키는 과정을 통틀어 js 과정이라고 한다.

https://dev.to/saurabhdaware/html-parsing-and-rendering-here-s-what-happens-when-you-type-url-and-press-enter-3b2o

js 해석과정은 엔진마다 변환과정이 조금씩 다르기도하고 이 주제 하나만으로 블로그 한 포스트 분량이기 때문에 링크로 대체하겠다. 

v8 기준으로 설명되어 있는 글이다.

https://pks2974.medium.com/v8-%EC%97%90%EC%84%9C-javascript-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC%ED%95%B4%EB%B3%B4%EA%B8%B0-25837f61f551

V8 에서 Javascript 코드를 실행하는 방법 정리해보기

---

2. recalculate style

css를 parsing 한 결과인 cssom과 html을 parsing 한 결과인 dom을 합쳐 render tree로 만드는 과정이다.

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko

render tree는 dom tree와 다르게 1 대 1의 관계가 아니다. disable 되는 tag의 경우에는 만들어지지 않는다.

---

3. layout (reflow)

recalculate style 과정까지 표시할 노드와 해당 노드의 계산된 스타일을 계산하였지만, 뷰포트내에서 이러한 노드의 정확한 위치와 크기를 계산하지는 않았다.

이것을 계산하는 과정이 바로 layout 이다!!

각 부분 안에 세세한 위치와 크기를 가지는 박스모델로 만들어지고 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다!

---

4. update layout tree

https://www.slideshare.net/deview/125-119068291

브라우저도 웹화면을 한장의 비트맵으로 처리하지 않고 포토샵처럼 layer를 만든다.

이유 : 자주 위치가 바뀌는 것들을 다른 layer로 빼 놓는다면 그 layer만 다시 그려줌으로써 리소스를 아낄수 있다.

---

5. paint

말그대로 그려주는 단계!

렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 과정.
여기서는 layer를 각각 그려주는 거임.

---

6.composite

layer들을 합성하여 하나의 bitmap으로 만들어주는 과정

page layer들

---

7. 참고

https://stackoverflow.com/questions/25724126/chrome-devtools-timeline-update-layer-tree-event

Chrome DevTools Timeline Update Layer Tree Event

https://evanjin-blog.vercel.app/development/%EC%9B%B9-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%EC%97%90-%ED%95%84%EC%9A%94%ED%95%9C-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%AA%A8%EB%93%A0-%EA%B2%83/

웹 성능 최적화에 필요한 브라우저의 모든 것

https://tv.naver.com/v/4578425

웹 성능 최적화에 필요한 브라우저의 모든 것

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko 

렌더링 트리 생성, 레이아웃 및 페인트  |  Web  |  Google Developers