[브라우저] 배치(Layout), Paint(feat 더티비트)

◆ 브라우저 렌더링 순서

트리 생성 이후 렌더링 엔진의 동작(위 과정을 Critical Rendering Path라고 한다고 한다.)

* Render Tree : 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리.(display none 이나 meta정보는 포함되지 않음)

* 박스모델..(Block , Inline Block, InLine...)

■ 배치 = Layout = Reflow라 불린다.

Render Tree에는 보여줄 수 있는 모든 정보가 있다. 

이를 실제로 화면에 보여주기 위해서 요소들의 정확한 위치와 크기를 계산하는 과정이다.

화면에서 차지하는 영역, 여백, 스타일 속성이 계산된다. ( %, em 같은 상대적인 단위는 px단위로 변환됨)

이 과정을 통해서 렌더링엔진은 각 요소가 어떻게 생겼고, 어디에 보여줄 지 알게 된다.

 

구체적으로는 왼쪽에서 오른쪽으로, 위에서 아래로 배치가 진행된다. 

모든 렌더링 오브젝트(=렌더러)는 배치 또는 reflow 메서드를 갖는데, 각 렌더러는 배치해야 할 자식의 배치 메소드를 불러온다.

 

- 배치 과정

1. 부모 렌더러가 자식의 너비 결정

2. 부모가 자식을 검토
    1) 자식 렌더러 배치(자식의 x,y 결정)

    2) 필요하다면 자식 배치 호출해 자식 높이 계산.(부모와 자식이 더티하거나, 전역 배치 상태이거나 또는 다른 이유로)

3. 부모는 자식의 누적된 높이와 여백, 패딩을 이용해 자신의 높이 설정. 이 값은 부모 렌더러의 부모가 사용하게 됨..?

4. 더티 비트 플래그 제거.

 

 

- 너비 계산

사용가능 너비  = 컨테이너 너비- paddingLeft() - paddingRight()

최소, 최대 너비가 있을 시

사용가능 너비< 최소 => 최소 사용

사용가능 너비> 최대 => 최대 사용

 

- 줄바꿈

줄 바꿀 필요 있을 때는 배치가 중단되고, 부모가 추가 렌더러를 생성하고 배치를 호출한다.

 

■ 그리기 = Paint = Repaint

위 과정을 통해 얻은 정보를 화면에 실제 픽셀로 보여주는 과정. UI 기반 구성요소 사용.

쌓임 맥락 및 z-index참고

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

 

 

 

■ 더티 비츠 체제 : 다시 배치할 필요가 있는 녀석들

일부만 바뀌었는데, 전체를 바뀌면 성능면에서 ㅜㅜ이다. 따라서 변경된 녀석들만 다시 배치하게 되는데, 이 때, 변경된 요소를 더티라고 표시한다.

 

'더티'와 '자식이 더티' 라는 두 가지 플래그가 있다. 

 

- 전역 배치 : 화면 크기변경 or 글꼴 크기 변경과 같이 모든 렌더러에 영향을 주는 전역 스타일 변경.

* 전역배치는 보통 동기적으로 실행된다.

 

- 점증 배치 : 렌더러가 더티일 때 비동기로 실행된다. ex) 네트워크로 추가 내용 받아서 DOM 트리에 더하고, 새로운 렌더러가 렌더 트리에 추가될 때!

 

□ 최적화 : 캐시 사용, 변화가 없는 부분은 변하지 않게!

 

 

 

■ 사용자 동작으로 인한 CSS 변경 또는 애니메이션 동작

1. Layout이 다시 발생(Reflow) : 주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀔 때 다시 발생.

*Layout>Paint>Composite과정을 모두 다시 하게 된다.

2. Paint부터 다시 발생(Repaint) : 배경이미지나, 텍스트 색상, 그림자 등 레이아웃 수치 변화시키지 않는 스타일 변경

*Paint>Composite과정을 모두 다시 하게 된다.

3. 레이어의 합성만 다시 발생

노드 객체들은 생성된 Layer에 포함되게됨. Layer들은 Paint과정에서 그려지게 되고, 하나의 비트맵으로 합성(composite)한다.

참고자료

1. https://d2.naver.com/helloworld/59361 : 브라우저 동작원리

2. https://www.youtube.com/watch?v=sJ14cWjrNis  : 브라우저 렌더링