브라우저의 단계별 작업 과정
- HTML 마크업을 처리하고 DOM tree 빌드
- Link 또는 style Tag를 만나면, CSS 스타일링 처리하고 CSSOM tree 빌드
- DOM tree와 CSSOM tree 결합되어 Render tree 만든다.
- Render tree에서 “레이아웃 = 리플로우" 실행하여 각 노드의 위치 계산
- 화면에 개별 노드 “리페인트 = 래스터화” 실행하여 그리기
Render Tree
브라우저는 HTML과 CSS 파일을 파싱하여 생선된 DOM Tree와 CSSOM Tree, 두 개의 트리를 결합한 것을 Render Tree라고합니다.
[출처: 자바스크립트 Deep Dive]
DOM과 Render Tree는 항상 일치하진 않습니다. Render Tree는 문서의 시각적 표현을 담당하기 때문에 화면에 렌더링되지 않는 display: none 속성이 적용된 요소나 <head> 내부의 태그들은 Render Tree에 포함되지 않습니다.
Reflow와 Repaint
웹 페이지는 정적인 상태로만 존재하는 것이 아니라, 개발자의 코드나 사용자의 행동에 따라 DOM의 변경이 발생니다.
이런 과정에서 브라우저는 변경 사항을 반영하기 위해 발생하는 과정이 Reflow와 Repaint입니다.
Reflow
- 요소의 위치나 크기와 같은 레이아웃 정보를 다시 계산하는 과정
- width, height, flex, font-size 등의 변경이 발생하면 Reflow 발생
- CPU를 사용
- Reflow는 자신의 자식 DOM 전체에 영향을 줄 수 있어 성능에 큰 부담
- Reflow는 발생 시 Repaint도 동반하므로, 브라우저 성능 최적화를 위해 가능한 한 Reflow 발생을 줄이는 것이 중요
Reflow를 유발하는 작업
- 요소의 크기 또는 위치 변경 (width, height, margin, padding, position, top, left 등)
- 요소의 추가 또는 삭제
offsetHeight,offsetWidth,getBoundingClientRect()등의 속성 접근display: none적용 또는 해제- 브라우저 창 크기 변경
- Reflow 관련 객체
출처
reflow 최소화
- fragment 기법을 사용해 dom 업데이트를 한번에 처리 (batch update)
- 레이아웃 변경을 최소화하도록 css 작성
- css 애니메이션 최적화
- css will-change 속성 사용 -> 자주 사용하면 메모리 낭비 발생
Repaint
- Repaint는 요소의 스타일(색상, 배경 등)이 변경될 때 발생
- GPU를 사용
- Reflow보다 비용이 적지만, 불필요한 Repaint가 많아지면 렌더링 성능에 영향을 줄 수 있다.
Repaint를 유발하는 작업
- color, border-color, background 등의 속성 변경
- visibility 속성 변경
요약
Reflow는 요소의 위치나 크기와 같은 레이아웃 정보를 다시 계산하는 과정이다.
Reflow는 자신의 자식 요소의 렌더링도 발생해 무거운 작업
Repaint는 요소의 스타일(색상, 배경 등)이 변경될 때 발생
참고 자료
Reflow, Repaint을 알아보자!
[자바스크립트] 브라우저 렌더링
Render Tree 구성, Reflow, Paint(Repaint)
