Reflow와 Repaint: 웹 성능 최적화의 핵심 개념

Reflow와 Repaint란 무엇인가?

Reflow와 Repaint는 브라우저의 렌더링 과정에서 발생하는 중요한 작업입니다. 웹페이지의 DOM이나 스타일이 변경될 때 브라우저는 해당 내용을 반영하기 위해 다시 계산하고 화면을 갱신합니다.

• Reflow: 레이아웃이 변경될 때 발생합니다. 요소의 크기, 위치, 또는 폰트 크기 등이 변할 때, 브라우저는 해당 요소와 그 주위의 레이아웃을 다시 계산해야 합니다.
• Repaint: 스타일의 시각적 속성(예: 색상, 테두리, 그림자 등)이 변경되면 Repaint가 발생하여 해당 요소가 다시 그려집니다. 하지만 레이아웃을 다시 계산하지는 않습니다.

 

Reflow & Repaint를 유발하는 스타일 요소들

Reflow는 레이아웃과 관련된 속성에 의해 발생하며, 다음과 같은 요소들이 이를 유발할 수 있습니다:

• 크기 변경: width, height
• 배치 변경: margin, padding, position, top, left, right, bottom, display
• 폰트 변경: font-size, font-family, line-height
• 창 크기 변경: 브라우저 창 리사이즈
• DOM 조작: DOM에 새로운 요소를 추가 및 제거, 또는 DOM 구조 변경 시

Repaint는 시각적 속성의 변화에 의해 발생하며, 다음과 같은 요소들이 해당됩니다:

• 색상 변경: color, background-color
• 테두리 변경: border-width, border-style, border-color
• 투명도: opacity
• 시각적 효과: box-shadow, text-shadow
• 배경 이미지 변경: background-image

div {
      width: 300px;                   // Reflow 발생
      height: 200px;                  // Reflow 발생
      background-color: #f0f0f0;      // Repaint 발생
      color: red;                     // Repaint 발생
      margin: 10px;                   // Reflow 발생
      border: 1px solid black;        // Reflow, Repaint 발생
}

 

border: 1px solid black 처럼 border 속성을 변경할 때 Reflow와 Repaint는 둘 다 발생합니다.

- Reflow : border-width 때문에 발생 (레이아웃에 영향을 미치는 속성)

- Repaint : border-color 때문에 발생 (시각적인 속성)

 

---

Reflow와 Repaint 최적화 방법

성능 최적화를 위해서는 Reflow와 Repaint가 빈번하게 발생하지 않도록 스타일을 신중하게 적용해야 합니다. 추가로 Reflow와 Repaint의 발생 여부는 인라인 스타일이든 SCSS로 정의한 스타일이든 동일합니다! 중요한 것은 스타일이 어떻게 적용되었는지가 아니라, 변경되는 스타일 속성이 무엇이냐에 따라 Reflow 또는 Repaint가 발생한다는 점입니다 :)

1. 스타일 변경 최소화: DOM 요소를 자주 추가하거나 스타일을 자주 변경하는 작업을 최소화해야 합니다. 한 번에 여러 스타일을 변경하는 것이 성능에 유리합니다.
2. CSS 클래스 활용: 여러 속성을 변경할 때는 인라인 스타일보다 CSS 클래스를 사용하여 스타일을 한 번에 적용하는 것이 좋습니다.
3. 애니메이션 최적화: 애니메이션에서는 레이아웃에 영향을 미치는 속성(width, height 등)을 피하고, 시각적인 속성(opacity 등)을 사용하는 것이 성능에 유리합니다.
4. DOM 접근 최소화: 자바스크립트로 DOM에 접근하여 스타일을 변경할 때는, 이를 한 번에 처리하거나 requestAnimationFrame을 사용하는 방식으로 브라우저의 작업을 최적화할 수 있습니다.