브라우저 렌더링
1. 브라우저 렌더링 과정 (렌더링 엔진의 동작 과정)
-
DOM Tree 생성 :
HTML를 파싱 후, DOM Tree 생성한다. -
CSSOM Tree 생성 :
CSS를 파싱 후, CSSOM Tree 생성한다. -
Javascript를 실행 :
HTML 중간에 스크립트가 존재하면 DOM Tree를 변경될 수 있기에 HTML 파싱이 중단되는데 이는 defer(파싱이 완료된 후 실행), async(비동기 실행) 옵션을 통해 제어할 수 있다. -
DOM Tree와 CSSOM Tree를 조합하여 Render Tree 생성 :
이때,display: none;속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것들은 Render Tree로 구축되지 않는다. -
Render Tree 배치 (Layout(Reflow)) :
뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다. -
Render Tree 그리기 (paint(Repaint)) :
계산한 위치/크기를 기반으로 화면에 그린다.
2. Reflow, Repaint
2.1 Reflow
생성된 DOM 노드의 레이아웃 수치 변경 시 영향 받은 모든 노드의 수치를 다시 계산하여, Render Tree를 재생성하는 과정이다.
- DOM 엘리먼트 추가, 제거 또는 변경
- CSS 스타일 추가, 제거 또는 변경
- CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다.
- CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임에서 리플로우가 발생합니다.
- offsetWidth 와 offsetHeight 의 사용. offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산됩니다.
- 유저 행동. 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환등을 활성화하여 리플로우를 트리거할 수 있습니다.
2.2 Repaint
Reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 과정
- 가시성이 변경되는 순간 (opacity, background-color, visibility, outline)
- Reflow 가 실행된 순간 뒤에 실행됩니다.
2.3 Reflow를 피하거나 영향을 최소화
링크의 3p 하단부터 방법들이 설명되어있다.
References
프론트엔드 개발 공부중인 주니어 개발자의 복습노트