reflow와 repaint의 최적화

Reflow / Repaint

• 하지만 특정 액션이나 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치가 변하면 해당 요소의 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout(Reflow)과정을 다시 수행
• 이럴경우 각 요소들의 크기와 위치를 다시 계산하게 되는데 이 과정을 Reflow, 그리고 Reflow 된 렌더 트리를 다시 화면에 그려주는 과정을 Repaint라 함

Reflow

• 렌더트리와 각 요소들의 크기와 위치를 다시 계산해주는 과정

Reflow가 일어나는 경우

• DOM 노드의 추가, 제거
• DOM 노드의 위치 변경
• DOM 노드의 크기 변경(margin, padding, border, width, height 등..)
• CSS3 애니메이션과 트랜지션
• 폰트 변경, 텍스트 내용 변경
• 이미지 크기 변경
• offset, scrollTop, scrollLeft과 같은 계산된 스타일 정보 요청
• 페이지 초기 렌더링
• 윈도우 리사이징

이외에도 화면의 구조가 변경되었다면 Reflow가 발생한다.

Repaint

화면의 구조가 변경되지 않는 화면 변화의 경우 Repaint만 발생

• 📝 : 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 다시 발생

Repaint만 일어나는 경우

• visibility : hidden 으로 DOM 요소를 숨기는 경우 (레이아웃이나 위치 변경이 없어 repaint만 발생)
• background-color, visibillty, outline 등의 스타일 변경

Composite

• 화면에 표시하기 위해 페이지에서 paint된 부분을 합치는 과정

Display

• 화면에 실제 그려지는 과정

---

Reflow 최적화

• reflow는 렌더링 트리를 다시 생성하므로 부하가 크고, 상위 엘리먼트가 변경되면 하위 엘리먼트에도 영향을 끼침

• **CSS 하위 선택자 줄이기**

// bad
.container .list li .btn {
  background-color: red;
}

// good
.list .btn {
  background-color: red;
}

• 불필요한 노드는 display: none으로 지정하기

  • visibility: invisible은 Layout 공간을 차지하기 때문에 Reflow의 대상이 됨
  • 하지만 display: none은 Layout 공간을 차지하지 않아 Render Tree에서 아예 제외됨

• 애니메이션을 position: fixed, absolute로 지정하기

  • 이때 position을 fixed나 absolute를 주어 노드를 분리하면 해당 노드만 Reflow가 발생하게 만들 수 있음

• 프레임 줄이기

  • 요소가 이동하는 순간마다 Reflow, Repaint가 발생하게 됨
  • 따라서 이러한 트랜지션, 애니메이션 주기나 효과를 간소화하면 성능을 개선할 수 있음

• 인라인 스타일 지양하기

  • 인라인 스타일은 HTML이 파싱될 때 레이아웃에 영향을 주어 추가적인 Reflow를 발생시킴
  • 물론 유지보수 및 가독성 측면에서도 인라인 스타일을 지양하는 것이 좋음