프론트엔드 개발자라면 항상 염두에 둬야 하는 내용이 바로 reflow, repaint가 아닐까 합니다.

언젠가 이 글을 보고 복습하고자 기록합니다.

---

Pixel Pipeline

화면을 구성할 때 중요한 Pixel Pipeline 5가지의 주요 영역에 대해서 살펴보겠습니다.

• JS: DOM 요소 추가 삭제와 상관없이 시각적 변경을 초래하는 작업을 처리하는 데 사용합니다.
• Style: 선택자를 기반으로 어떤 요소에 CSS 규칙이 적용되는지를 파악합니다.
• Layout: 브라우저가 Style 규칙이 적용되고 나면 요소가 차지하는 공간과 화면의 위치를 계산합니다. (css에 %를 이용한다면 pixel로 변경하는 작업을 포함합니다.)
• Paint: 시각적인 부분 텍스트, 색상, 이미지, 테두리, 그림자를 그리는 작업을 합니다.
• Composite: 페인트가 완료된 후 합치는 과정을 거칩니다.

Reflow

Pixel Pipeline의 Layout에 해당하며 생성된 DOM 노드의 레이아웃 사이즈(너비, 높이, 위치 등)가 변경되면 노드의 사이즈를 계산하여 렌더 트리를 재생성하는 과정입니다.

Reflow가 발생하는 경우

• window 리사이즈
• elment 위치 변경
• element 크기 변경
• node 추가 제거
• font 변경, image 리사이즈

Reflow 최적화 시키기

• 애니메이션은 position을 fixed or absolute로
• inline style을 없애기
• style 변경이 필요하다면 최하위 노드를 변경하도록 (부모는 reflow 일어나지 않게)
• CSS 표현식, 하위 선택자 줄이기

Repaint

Pixel Pipeline의 Paint에 해당하며 Reflow가 끝난 후 재생성된 렌더 트리를 그리는 과정입니다.

Repaint가 발생하는 경우

• 배경 이미지 변경
• 텍스트, 색상 변경
• 그림자 추가 삭제

(참고: reflow가 일어나면 repaint가 발생합니다. 반대의 경우는 없습니다.)

---

(참고 내용들) pixel pipeline 과정들이 항상 전부 일어나는 건 아니다

1. JS/CSS > Style > Layout > Paint > Composite Layout 변경이 되면 전부 일어난다.
2. JS/CSS > Style > Paint > Compsite Paint만 일어나는 경우에는 Layout 부분이 스킵이 된다.
3. JS/CSS > Style > Composite Layout, Paint 모두 필요하지 않는다면 Compsite 만 일어난다.

결론

작업을 할 때 reflow, repaint를 염두하며 코스트가 적게 들어가는 방향으로 구현하여 성능을 극대화해 보세요!

(참고: css가 어떤 단계가 일어나는지 모르겠다면 사이트 참고 https://csstriggers.com/)

참고자료: https://web.dev/rendering-performance/