Reflow 와 Repaint

Reflow란?

Reflow는 레이아웃을 변경하는 과정에서 발생하는 브라우저의 렌더링 작업입니다.

이 과정은 페이지의 구조나 크기가 바뀔 때마다 발생하며, 레이아웃을 다시 계산하는 데 시간이 소요됩니다.

Reflow가 발생하면 페이지의 DOM(Document Object Model)을 다시 계산하여 화면에 표시되는 모든 요소의 위치와 크기를 재계산합니다.

Reflow가 발생하는 상황

Reflow는 다음과 같은 상황에서 발생합니다:

• 요소의 크기나 위치가 변경될 때
• DOM 트리에서 새로운 요소가 추가되거나 제거될 때
• 폰트 크기나 스타일이 변경될 때
• 윈도우 크기를 변경할 때

예를 들어, 아래와 같은 코드에서는 div의 너비를 변경하면 Reflow가 발생합니다.

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  document.getElementById('box').style.width = '200px';
</script>

 

위 코드는 div의 너비를 100px에서 200px로 변경하므로 Reflow가 발생하게 됩니다.

브라우저는 전체 페이지의 레이아웃을 다시 계산하여 요소들의 위치와 크기를 재조정합니다.

Reflow의 성능에 미치는 영향

Reflow는 레이아웃 변경을 일으킬 때마다 발생하므로 자주 발생하면 페이지 렌더링이 느려질 수 있습니다. 특히 복잡한 페이지에서 여러 요소가 Reflow를 유발할 때는 성능 저하가 더욱 두드러집니다.

예를 들어, 동적으로 크기나 위치를 변경하는 UI 요소가 많을 경우, Reflow가 빈번하게 발생하여 웹 페이지의 반응 속도가 느려질 수 있습니다.

 

---

Repaint란?

Repaint는 화면을 다시 그리는 과정으로, Reflow보다는 상대적으로 덜 비용이 드는 작업입니다.

Repaint는 요소의 시각적인 변경, 즉 레이아웃을 변경하지 않고 색상이나 배경 등을 변경할 때 발생합니다.

Repaint가 발생하는 상황

Repaint는 다음과 같은 상황에서 발생합니다:

• 요소의 색상, 배경색, 텍스트 색상 등의 시각적 스타일을 변경할 때
• 이미지나 배경 이미지가 변경될 때
• 투명도(opacity)나 그림자 효과가 변경될 때

예를 들어, 아래 코드는 div의 배경색을 변경하여 Repaint를 유발합니다.

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  document.getElementById('box').style.backgroundColor = 'blue';
</script>

 

위 코드에서는 div의 배경색만 변경되므로 Repaint만 발생하며, 레이아웃 계산은 필요하지 않습니다.

Repaint의 성능에 미치는 영향

Repaint는 Reflow보다 더 적은 자원을 소모하는 작업입니다.

그러나 복잡한 UI에서 여러 요소의 스타일을 자주 변경하면, Repaint가 누적되어 페이지 성능에 영향을 줄 수 있습니다.

 

---

Reflow와 Repaint의 차이점

• Reflow는 레이아웃 계산을 포함한 브라우저의 렌더링 작업입니다. 레이아웃이 변경될 때마다 발생하며, 페이지의 크기와 위치를 재계산합니다.
• Repaint는 시각적 스타일의 변경만 포함하며, 레이아웃을 재계산할 필요 없이 화면에 다시 그려지는 작업입니다.

간단히 말해, Reflow는 레이아웃의 변경을 포함하고, Repaint는 시각적 요소의 변경만 포함합니다. Reflow가 더 많은 자원을 소모하므로, 가능한 Reflow를 최소화하는 것이 중요합니다.

최적화 방법

Reflow와 Repaint를 최소화하는 방법은 웹 성능을 향상시키는 데 중요한 역할을 합니다. 

Reflow와 Repaint를 최소화하는 방법

• 스타일 변경을 그룹화: 여러 개의 스타일 변경을 한 번에 적용하는 것이 좋습니다. 예를 들어, width와 height를 각각 변경하는 것보다, 한 번에 두 값을 변경하는 것이 더 효율적입니다.
• requestAnimationFrame 사용: 애니메이션을 할 때는 requestAnimationFrame을 사용하여 브라우저가 최적화된 방식으로 렌더링할 수 있도록 합니다.
• transform과 opacity 사용: transform과 opacity는 레이아웃을 변경하지 않으므로, 요소의 크기나 위치를 변경할 필요가 있을 때 이들을 사용하면 Reflow를 피할 수 있습니다.

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  // 비효율적인 방식
  document.getElementById('box').style.width = '200px';
  document.getElementById('box').style.height = '200px';

  // 최적화된 방식
  const box = document.getElementById('box');
  box.style.width = '200px';
  box.style.height = '200px';
</script>