Reflow And Repaint

브라우저의 렌더링 과정

브라우저는 HTML, CSS, JavaScript를 해석하여 화면에 표시하는데, 이 과정을 렌더링이라고 한다.

1. DOM Tree 구축: HTML 문서를 파싱하여 DOM Tree를 생성한다.
2. CSSOM Tree 구축: CSS 파일을 파싱하여 CSSOM Tree를 생성한다.
3. Render Tree 구축: DOM Tree와 CSSOM Tree를 결합하여 Render Tree를 생성한다.
4. Layout: Render Tree를 기반으로 각 노드의 크기와 위치를 계산한다.
5. Paint: 레이아웃을 기반으로 화면에 픽셀을 그린다.
6. Composite: 레이어를 합성하여 화면에 표시한다.
7. Reflow: 레이아웃을 재계산하는 과정이다. DOM 요소의 크기나 위치가 변경되면 해당 요소와 하위 요소의 레이아웃을 다시 계산한다.

Reflow와 Repaint

• Reflow: 레이아웃을 재계산하는 과정이다. DOM 요소의 크기나 위치가 변경되면 해당 요소와 하위 요소의 레이아웉을 다시 계산한다.
• Repaint: 화면을 다시 그리는 과정이다. 레이아웃이 변경되면 레이아웃을 기반으로 화면을 다시 그린다.

Reflow 발생 조건

• DOM 요소 추가, 삭제, 변경
• DOM 요소의 위치, 크기 변경
• CSS 스타일 변경
• 브라우저 리사이징
• 폰트 로딩
• 스크롤
• 등..

Reflow 최적화

• Batching: 여러 개의 DOM 요소를 변경할 때, 한 번에 처리하면 Reflow 횟수를 줄일 수 있다.
• Document Fragment: Document Fragment를 사용하여 DOM 요소를 메모리에 추가한 후, 한 번에 DOM에 추가하면 Reflow 횟수를 줄일 수 있다.
  • • Document Fragment는 메모리에 존재하는 가상 DOM이다.
• CSS 최적화: CSS 선택자를 최대한 간단하게 작성하고, CSS 애니메이션을 사용할 때는 GPU 가속을 활용한다.
• CSS 애니메이션: CSS 애니메이션을 사용할 때는 transform과 opacity를 사용하여 GPU 가속을 활용한다.
• CSS 애니메이션 최적화: CSS 애니메이션을 사용할 때는 will-change 속성을 사용하여 레이어를 미리 생성한다.

Repaint 최적화

• 이미지 최적화: 이미지를 최적화하여 불필요한 리소스를 줄인다.
• 레이어 최적화: 레이어를 사용하여 화면을 합성하면 Repaint 횟수를 줄일 수 있다.