HTML을 브라우저에 표시할 때, 크게 2단계로 나뉜다
- 각 HTML의 요소를 파싱하고, 각 요소가 차지하는 공간 산출하기 (Reflow)
- 산출한 공간에 요소의 내용을 그리기 (Repaint)
Reflow 발생
Reflow는 브라우저에 표시에 해야하는 요소의 배치가 바뀌는 등의 이유로 발생한다.
- 요소의 추가, 삭제
- 이미 존재하는 요소의 내용이 변경
- 스크롤로 인한 위치 또는 브라우저의 사이즈가 변경 등
단, 매 번 Reflow하지 않아도 처리할 수 있기 때문에 필요한 때만 한정해서 발생시킨다. 실제로 Reflow가 발생하는 타이밍은 아래와 같다.
- 프레임 갱신 직전
- 자바스크립트로 부터 치수와 관계 있는 스타일의 값에 엑세스 할 때
출처: https://developers.google.com/speed/docs/insights/browser-reflow
Reflow 최소화
- 불필요한 DOM 트리의 레벨을 줄이기
- 너무 깊게 DOM 트리를 구성하지 않는다.
- CSS 최소한으로 사용
- 애니메이션과 같은 복잡한 렌더링은 고정 위치 사용
- 불필요한 CSS Selector 사용 줄이기
- 하위 요소 선택기는 좋지 않다.
