브라우저 Reflow과 Repaint

인터넷을 많이 사용하는 요즘, 인터넷을 사용하다보면 웹페이지가 리로드 되거나 요소가 추가되는 등의 변경사항이 발생할 때 다시 페이지가 그려지는 걸 경험한 적이 있을 것이다. 이러한 현상은 Reflow와 Repaint라는 두 과정을 통해 이루어진다.

 

앞 글에서 브라우저 렌더링 과정을 알아보았으니, 이의 연장선으로 렌더링 최적화를 알기 위해 Reflow와 Repaint에 대해서 알아보도록 하자.

 

💡 Reflow(Layout) 💡

웹 페이지의 레이아웃을 계산하고 요소의 위치와 크기를 결정하는 과정이다.

 

브라우저에서 웹페이지 렌더링 과정을 모두 거쳐 최종적으로 웹페이지를 화면에 보여줬다고 해도 렌더링 과정이 완전히 종료된 것은 아니다. 어떠한 경우에 따라 요소의 위치와 크기를가 수정되는 경우가 생기면, Layout 과정을 다시 수행하게 되는데 이 과정이 Reflow이다.

 

Layout 과정을 다시 수행하는 것은 렌더 트리와 각 요소들의 크기와 위치를 다시 계산하는 것이다.

 

❗️ Reflow가 일어나는 경우 ❗️

• 웹페이지 처음 로딩할 때
• 웹페이지 요소가 추가되거나 제거될 때
• 웹페이지 요소의 크기나 위치가 변경될 때
• 폰트 크기가 변경될 때
• 브라우저 창 크기가 변경될 때
• 사용자가 웹 페이지를 스크롤할 때

 

💡 Repaint(Paint) 💡

계산된 레이아웃에 따라 화면에 실제 픽셀을 그려내는 과정이다.

 

Reflow만 수행되면 실제 화면에서는 아무런 현상도 일어나지 않는다. Reflow가 수행되면서 Layout 과정을 다시 거쳤기에, 이 렌더 트리를 다시 실제 화면에 나타내주는 Paint 과정도 다시 수행할 필요가 있다. 이때 과정이 Repaint이다.

 

하지만 그럼 Reflow가 일어나야만 Repaint가 일어나느냐? 그것은 아니다.

Repaint가 일어나는 경우를 먼저 확인해보자.

 

❗️ Repaint가 일어나는 경우 ❗️

• Reflow가 발생한 후
• 웹 페이지 요소의 색상이나 배경이 변경될 때
• 웹 페이지 요소에 애니메이션이 적용될 때
• 사용자가 웹 페이지 클릭과 마우스 오버 등으로 요소와 상호 작용할 때

이처럼 Repaint가 일어나는 경우는 Reflow가 발생한 경우 외에도 존재한다.

레이아웃에 직접적인 영향이 가해진 것이 아닌, 디자인과 같은 스타일 속성의 변화만 일어난 경우에는 Reflow가 발생할 이유가 없기에 이럴 경우에는 Repaint만 일어나게 되는 것이다.

---

❓ Reflow와 Repaint를 최적화해야 하는 이유 ❓

Reflow와 Repaint를 최적화하지 않으면 브라우저 렌더링 과정 일부를 다시 수행해야 한다.

이는 비용적인 측면에서도 문제가 있지만 성능 저하를 야기할 수 있기에, Reflow와 Repaint는 웹 개발에서 최적화는 필수적이다.

---

✅  Reflow와 Repaint 최적화 하기 ✅

영향 받는 노드 최소화하기

상위 노드의 스타일이 변경되면 하위 노드에 모두 영향을 주게 되는데,

이때 position: absolute; 또는 position: fixed;와 같은 주변에 영향을 주지 않는 속성을 사용하는 것이다.

 

사용하지 않는 노드에는 display: none 사용하기

사용하지 않는 노드에 visibility: invisible;과 같은 스타일 속성을 사용하면 레이아웃 공간을 차지하기에, Reflow의 대상이 된다.

그렇기에, display: none;을 사용하면 레이아웃 공간을 차지 하지 않아 렌더 트리에서 제외된다.

 

Reflow, Repaint 발생하는 속성 사용 피하기

Reflow가 일어나면 Repaint도 수행되어야 하기에 가능하면 Reflow가 발생하는 속성보다 Repaint만 발생하는 속성을 사용하는 것이 좋다. 또한 Reflow와 Repaint가 일어나지 않는 transform과 opacity 속성을 사용하는 것이 좋다.

 

이 외에도 불필요한 CSS 및 JavaScript 최적화, 이미지 최적화 등을 통해 Reflow와 Repaint를 최적화할 수 있다.

---

⭐️ 결론 ⭐️

Reflow와 Repaint는 브라우저 렌더링 과정에서 중요한 역할을 하는 개념이다.

이 두 가지를 이해하고 최적화하는 방법을 통해 웹페이지의 성능을 향상시킬 수 있기에, 최적화하기 위해 노력해야 한다.