[HTML] Reflow와 Repaint

 

브라우저는 어떻게 화면에 요소를 그릴까

브라우저에서 DOM API.를 통해  DOM트리나 CSSOM트리를 조작하게 되면,

 

DOM트리와 CSSOM트리는 결합하여 렌더트리를 형성합니다.

 

이후 브라우저는 렌더 트리를 기반으로 화면에 요소를 그리기 위해

 

레이아웃 계산(reflow)와 페인팅 과정(repaint)을 거치게 됩니다.

 

---

reflow

reflow는 DOM요소의 위치와 크기를  계산하는 단계입니다.

 

다음과 같은 경우  reflow가 발생하게 됩니다.

 

• DOM 노드가 추가/삭제 될 때
• 요소의 크기가 변경될 때
• 브라우저 창의 크기가 변경될 때
• 폰트 크기 변경등 레이아웃에 영향을 주는 스타일이 변경될 때

reflow는 레이아웃 전체에 영향을 주기 때문에 비용이 큰 작업에 속합니다.

 

예를들어, 브라우저 resizing이 많이 일어나게 되면 성능문제를 일으킬 수 있으므로

 

보통 디바운스나 쓰로틀 기법을 사용하여 리사이징 이벤트 호출 횟 수를 제어합니다.

 

---

repaint

repaint는 말 그대로 요소를 다시 그리는 단계입니다.

 

레이아웃에 영향을 주지는 않지만 화면에 보이는 스타일이 변경될 때 발생하는 단계로,

 

다음과 같은 경우 repaint가 발생합니다.

 

• 색상이 변경될 때
• visibility속성이 변경될 때
• hover시 색상이 변경될때

스타일은 정말 많기 떄문에 이처럼 색상이 변경될 때 발생합니다.

---

오해 바로잡기

그런데 reflow와 repaint는 항상 순차적으로 실행되는 단계가 아닙니다.

 

DOM 변경 사항에 따라 reflow 단계가 생략될 수도 있고, repaint만 수행될 수도 있습니다.

 

이 때문에 성능 최적화 관점에서는 불필요한 Reflow를 최소화하는 것이 중요합니다.