브라우저 렌더링

렌더링 과정

 

1. 파싱

chrome과 같은 웹 브라우저에서 html,css, js파일을 읽는다.

js파일은 읽는 동시에 파싱작업을 중단한다.

(defer속성을 사용한다면 파싱 후에 )

 

2. 트리변환

html은 DOM / css에서는 CSSOM 이라는 트리를 만든다.

 

3. 결합

두 트리를 결합하여

화면에 그려낼 render 트리라는 것을 만든다.

 

4. Layout

render 트리에 따라 화면에 어떻게 각각의 요소를 배치할 것인지 정하는 단계

노드의 정확한 크기,위치 등을 계산하여 render 트리에 반영한다.

(모든 값들은 절대수치인 pixcel 단위로 변환된다.)

 

5. Paint

render 트리를 바탕으로 픽셀정보를 이용하여 화면에 그려줌 

 

6. Composition

픽셀정보로 그려진 여러 레이어들을 합성한다.

 

 

* 리플로우

Layout 단계를 다시 밟음

* 리페인팅

Paint 단계를 다시 밟음

---

어떠한 이벤트에 따라 돔이 변경될 때마다

리플로우 리페인팅이 실행되는데,

변경되는 속성에 따라 리플로우나 리페인팅이 생략되는 것으로 알고 있음

 

 - width, left와 같은 속성은 Layout 단계부터 다시 시작됨

 - color와 같은 속성은 Paint 단계부터 다시 시작됨

 

그래서 우리가 신경쓸것은

알맞은 속성을 변경하여 리플로우 단계를 최소화화여 속도를 개선시키는 것

(ex - transform)