[JS] Reflow와 Repaint

웹 성능 최적화에서 중요한 개념 중 하나가 바로 Reflow(리플로우)와 Repaint(리페인트)입니다. 이 두 가지는 브라우저가 화면에 콘텐츠를 렌더링 하는 과정에서 발생하며, 잘못된 코딩 습관은 Reflow와 Repaint를 빈번하게 발생시켜 성능 저하로 이어질 수 있습니다.

 

 

목차

1. 브라우저 렌더링 과정

2. Reflow란?

3. Repaint란?

4. Reflow와 Repaint의 상호작용

5. Reflow와 Repaint 최소화 - 성능 최적화

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. 브라우저 렌더링 과정

Reflow와 Repaint를 알기 위해서는 우선 브라우저 렌더링 과정을 알아야 합니다.

1. HTML 파일을 파싱해 DOM 트리를 생성합니다.
2. CSS 파일을 파싱해 CSSOM 트리를 생성합니다.
3. 생성된 DOM과 CSSOM으로 Render 트리를 생성합니다.
4. Layout : 레이아웃은 렌더 트리를 이용해 브라우저의 화면에 요소들을 배치하는 과정입니다. 이때 각 요소의 크기, 위치, 간격 등을 계산합니다.
   
5. Paint : 브라우저는 렌더링된 요소들을 화면에 그립니다. 이 과정에서 브라우저는 CSS 스타일, 배경, 그림자, 그림 등을 고려하며, 여러 계층으로 구성된 렌더링 요소들을 하나의 이미지로 합치는 과정도 포함됩니다.
   

브라우저 렌더링 과정은 컴퓨터 사양, 브라우저 종류 등에 따라 속도가 다르게 나타날 수 있습니다.

같은 웹 페이지라도 누군가는 매우 느리게 그려지겠죠😕

 

2. Reflow란?

Reflow는 브라우저가 DOM(Document Object Model)과 CSSOM(CSS Object Model)을 기반으로 웹 페이지의 레이아웃을 계산하고 요소들의 위치와 크기를 다시 배치하는 과정입니다.

Reflow는 주로 웹 페이지 내에서 요소의 위치, 크기의 변화가 있을 때 발생합니다.

 

Reflow가 발생하는 상황

• DOM 요소가 추가되거나 제거될 때
• 브라우저 창의 크기가 조정될 때 (반응형 디자인)
• 스타일 속성이 변경될 때
  • 크기 관련 속성 : width, height, margin, padding 등
  • 위치 관련 속성 : position, top, left 등
  • 레이아웃 관련 속성 : display, flex 등
  • 폰트 관련 속성 : font-size, font-weight 등

예시 코드

// DOM 요소 추가로 인한 Reflow 발생
const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

// 스타일 변경으로 인한 Reflow
newDiv.style.width = '100px';
newDiv.style.height = '100px';

 

Reflow는 매우 비용이 큰 작업입니다. DOM 구조가 복잡할수록 Reflow에 소요되는 시간도 길어집니다.

Reflow는 웹 성능 저하의 주요 원인 중 하나로 꼽힙니다. Reflow가 적게 발생하도록 웹을 개발해야겠죠😊

 

3. Repaint란?

Repaint는 브라우저가 DOM 요소의 시각적 스타일을 다시 그리는 과정입니다. Repaint는 레이아웃을 변경하지 않지만 요소의 색상, 배경, 그림자 등의 스타일 속성이 변경될 때 발생합니다.

 

Repaint가 발생하는 상황

• 색상 관련 속성 변경 : color, background-color 등
• 테두리 관련 속성 변경 : border-color, border-radius 등 

예시 코드

// 색상 변경으로 인한 Repaint
const element = document.getElementById('example');
element.style.backgroundColor = 'blue';

 

Repaint는 Reflow에 비해 비교적 덜 비용이 드는 작업이지만, 빈번하게 발생하면 역시 성능 저하를 유발할 수 있습니다.

 

4. Reflow와 Repaint의 상호작용

Reflow와 Repaint는 둘 다 Render Tree가 변경되어 발생한다는 점은 같습니다. 그러나 둘은 차이가 있습니다.

Reflow가 발생하는 경우

Repaint가 발생하는 경우

 

위 그림에서 볼 수 있듯이 Reflow는 항상 Repaint를 유발하지만, Repaint는 Reflow를 유발하지 않습니다. Reflow가 레이아웃 계산을 포함하기 때문에 시각적 요소의 변경(=Repaint)을 동반하지만, Repaint는 단순히 시각적 변경만 처리하기 때문입니다.

 

예시 코드

// Reflow와 Repaint가 모두 발생
const element = document.getElementById('example');
element.style.width = '200px'; // Reflow 발생 -> Repaint 발생

// Repaint만 발생
element.style.backgroundColor = 'red'; // Reflow 없이 Repaint만 발생

 

요약하자면, 화면의 구조가 변경될 때는 Reflow 와 Repaint가 모두 발생하지만 그 외의 변경은 Repaint만 발생한다고 보시면 됩니다.

 

5.  Reflow와 Repaint 최소화 - 성능 최적화

Reflow 최소화

1. CSS 레이아웃 최적화

• 고정된 레이아웃 설계를 통해 레이아웃 변경을 최소화합니다.

2. DOM 조작 최소화

• 여러 번 DOM을 수정하지 말고, 한 번에 변경 사항을 적용합니다.

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

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

4. 인라인 스타일 지양하기

• 인라인 스타일은 HTML이 파싱 될 때 레이아웃에 영향을 주어 추가적인 Reflow를 발생시킵니다.

5. 프레임 줄이기

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

6. 애니메이션 최적화

• transform과 opacity 속성을 사용해 레이아웃 계산을 방지합니다.
• 이 두 속성은 GPU 가속을 사용할 수 있어, reflow를 일으키지 않고 repaint만 발생시키므로 CPU 자원을 적게 사용할 수 있습니다.

Repaint 최소화

1. CSS 스타일 변경 최소화

• 배경색, 테두리, 그림자 등 시각적 스타일 변경을 최소화합니다.

2. visibility와 display 구분해 사용

• 요소를 숨길 때 display: none 대신 visibility: hidden을 사용하면 Repaint만 발생합니다.

3. will-change 속성 사용

• CSS 속성 will-change를 사용해 필요한 경우 별도의 레이어를 생성하여 Repaint 성능을 개선합니다.

4. 대량 스타일 변경 관리

• 여러 스타일 변경을 한 번에 처리하거나 CSS 클래스 추가로 대체합니다.

 

 

 

Reflow와 Repaint는 브라우저가 화면을 렌더링 하는 데 필수적인 과정입니다.

Reflow와 Repaint를 적절히 관리하지 못하면 웹 성능에 악영향을 끼칠 수 있습니다. Reflow 최적화와 Repaint 최적화는 각각 다른 접근이 필요하며, 이를 잘 이해하고 적용하면 성능이 크게 개선될 수 있습니다.

 

 

추천글

[JS] 이벤트 루프(Event Loop)란?

 

[Next] Next.js 이미지 최적화(Image 컴포넌트)