[WEB] Reflow & Repaint

🌏 간단한 브라우저 작동 과정

Reflow와 Repaint의 개념을 다루기 이전에 먼저 브라우저 작동 과정을 간략하게 살펴보자

1) HTML을 파싱하여 DOM 트리 생성

2) CSS를 파싱하여 CSSOM 트리 생성

3) JavaScript를 파싱하여 AST 생성

4) 렌더 트리 생성

5) 레이아웃 진행

6) 페인트 진행

자세한 브라우저 렌더링 과정

위 과정 이후에 화면을 수정되면 화면을 다시 그리게 되는데 이때 이 과정을 Reflow와 Repaint라고 한다.

🪄 Reflow

Reflow 말 그대로 플로우를 다시 정한다는 뜻이다.

요소의 너비, 높이, 위치 등이 변경되었을 때 렌더 트리를 재성성하고 이때 Reflow가 발생한다고 한다.

❗ Reflow 발생

• 요소의 위치, 크기 변경

• 폰트 변경, 텍스트 내용 변경

• JavaScirpt를 통한 DOM 동적 변화

• 윈도우 리사이징 발생(Global Layout 영향)

🖌️ Repaint

Repaint 말 그대로 다시 그린다는 뜻이다.

❗ Repaint 발생

1. 요소 색상이 변경 되었을 때

2. Reflow가 발생했을 때

3. Visibility가 hidden에서 visible로 바뀌었을 때

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

🚫 Reflow & Repaint 최소화

Reflow가 발생하면 해당 요소의 주변 부모, 자식, 형제 노드까지 영향을 주어 비용이 큰 작업이다.

Repaint 역시 DOM API를 조절하면 자식 노드까지 모두 검색하기 때문에 성능 저하를 발생시킬 수 있다.

❗ 그렇기에 Reflow와 Repaint를 최소화 하는 것이 중요하다!

🖐️ 몇 가지 최소화 방법

1) in-line 스타일 사용하지 않는다.

• in-line 스타일의 경우 HTML이 파싱될 때, 레이아웃에 영향을 주어 추가 Reflow가 발생한다.

2) 스타일 변경이 있을 때 CSS 하위 클래스를 변경한다.

• Reflow가 발생하면 DOM 요소의 상위 노드와 하위 노드 모두 영향을 줄 수 있기 때문에 가장 하위 노드를 변경함으로써 영향을 최소화한다.

3) DOM 사용을 최소화한다.

• DOM 사용을 줄임으로써 DOM 접근을 최소화 해 Reflow 비용을 줄인다.

4) 애니매이션이 있는 노드의 position을 absolute 또는 fixed로 설정한다.

• 노드의 position을 absolute/fixed로 설정하여 해당 노드를 전체 노드에서 분리시켜 해당 노드에서만 Reflow를 발생시키고, 주변 레이아웃의 영향을 최소화한다.

5) CSS 표현식을 사용하지 않는다.

• CSS 표현식은 Reflow가 발생할 때마다 자바스크립트 표현식이 다시 계산되기 때문에 Reflow 비용이 높다.

📝 { display: none } & { visibility: hidden }

{ display: none } : 화면에 보이지도 않고 레이아웃을 차지하지 않음, 현 상태에서는 Reflow가 발생하지 않는다. 단 hidden → block 또는 inline 등으로 바뀌게 되면 Reflow, Repaint 발생

{ visibility: hidden } : 화면에 보이지만 않을 뿐 레이아웃을 차지함, 단 hidden → visible이 되면 Repaint만 발생

💡 화면에서 제거하는 방법을 선택하는 것은 { display: none }이 레이아웃을 차지하지 않아 성능적으로는 { visibility: hidden }보다 뛰어날 수 있다.
하지만 다시 보이는 과정에서는 display에 경우 Reflow와 Repaint를 발생시킨다.
반면에 visibility에 경우 Repaint만 발생하기 때문에 각각의 특징과 동작 방식을 고려해서 사용해야 된다.