[개발 용어] Repaint와 Reflow 쉽게 이해하기

프론트엔드 개발을 하게되면 repaint와 reflow 라는 말을 자주 듣게 될 것이다. 브라우저의 렌더링 과정과 관련이 있다. repaint와 reflow를 이해하려면 먼저 브라우저가 어떻게 페이지를 그려서 보여주는지 알아야 한다. 우리가 HTML과 CSS로 작성한 코드는 '렌더링(Rendering)'이라는 과정을 거쳐 화면에 나타난다. 

HTML(DOM)과 CSS(CSSOM) 코드를 기반으로 브라우저 엔진이 Render Tree를 형성하고, 이 과정에서 reflow와 repaint가 발생한다. 자바스크립트로 DOM을 조작하거나 CSS를 동적으로 변경할 때 이 두 현상이 트리거된다.

웹 브라우저의 렌더링 엔진(Rendering Engine)이 화면을 그리는 과정

1. DOM과 CSSOM 생성: 웹 브라우저의 렌더링 엔진(크롬의 경우 Blink, 사파리의 경우 Webkit 등)이 HTML과 CSS를 읽어서 각각 DOM과 CSSOM(CSS Object Model)이라는 구조를 만든다. 
   *** DOM(Document Object Model): HTML을 읽어서 만든 트리 구조로, HTML 태그들이 계층적으로 정리된 형태이다. 예를 들어, <div><p>Hello</p></div>가 있으면 div 안에 p가 들어가는 식으로 브라우저가 이해할 수 있게 구조화된다.
   *** CSSOM(CSS Object Model): CSS를 읽어서 만든 스타일 규칙의 트리 구조로, DOM에 있는 요소들에 어떤 스타일(색깔, 크기 등)이 적용될지 정리한 거다. 예를 들어, p { color: blue; }가 있으면 "p 태그는 파란색"이라는 규칙이 CSSOM에 저장된다.
2. Render Tree 형성: DOM과 CSSOM을 합쳐서 어떤 요소를 화면에 그릴지 결정하는 설계도인 렌더 트리를 만든다.
3. Layout 단계: Layout 모듈이 각 요소의 위치(x, y 좌표)와 크기(너비, 높이)를 계산한다.
   예를 들어, <div style="width: 100px; margin: 10px;"> 같은 요소가 있다면, 이 div가 화면에서 어디에 배치되고 얼마나 큰 공간을 차지할지 숫자로 계산하는 것이다.
4. Paint 단계: 계산된 위치에 색깔과 그림을 채워 넣는다. 

Repaint : 시각적 스타일 변경

Repaint는 말 그대로 다시 칠하는 거다. 브라우저가 화면에 보이는 요소의 시각적 스타일(ex. 색, 배경색, 투명도 등)이 변경될 때 발생한다. 즉, 요소의 위치나 크기 같은 레이아웃에는 영향을 주지 않고, 단순히 픽셀을 다시 그리는 작업이다. 

발생 예:  

• color, background-color, visibility 같은 스타일 속성이 바뀔 때.
• 레이아웃에는 변화가 없고 화면의 외관만 바뀔 때.

repaint는 비교적 가벼운 작업으로 비용이 적다. GPU에서 처리될 수 있는 경우가 많아 최적화가 잘 되어 있으면 빠르게 실행된다. 

 

Reflow : 레이아웃 변경

reflow는 repaint보다 좀 더 큰 작업이다. DOM 요소의 레이아웃(위치, 크기 등)이 변경될 때 발생한다. 브라우저가 요소의 너비, 높이, 위치 등을 다시 계산하고, 그에 따라 전체 또는 일부 레이아웃을 재구성하는 과정이다. 굳이 비유하자면 방 안에서 가구 배치를 바꾸는 것과 비슷하다. 가구를 옮기면 다른 가구 위치도 조정해야 하는 것처럼, reflow가 일어나면 화면 전체 또는 일부를 다시 정리해야 한다. 

발생 예:  

• width, height, margin, padding, display 같은 속성이 변경될 때.
• DOM 노드가 추가되거나 제거될 때 (예: appendChild, removeChild).
• 브라우저 창 크기가 조정될 때 (resize).

reflow는 repaint보다 비용이 큰 작업이다. 브라우저가 바뀐 요소에 따라 다른 요소들도 어떻게 영향을 받는지 계산해야 하기 때문이다. 그래서 특히 DOM 트리가 크고 복잡할수록 reflow는 비용도 커지고 더 오래 걸릴 수 있다.

reflow가 발생하면 그 뒤에 반드시 repaint가 따라온다. 레이아웃이 바뀌면 새로 계산된 위치에 맞춰서 색도 다시 칠해야 하기 때문이다. 하지만 repaint는 단독으로 일어날 수 있다.

 

💡성능 팁

웹 페이지를 빠르게 만들고 싶다면 reflow와 repaint를 줄이는 게 좋다.

• Reflow 최소화: 스타일 변경은 한 번에 묶어서 적용할 것. (예: 클래스 하나로 여러 스타일 변경)
• Repaint 최적화: transform이나 opacity처럼 GPU 가속을 활용하는 속성을 사용하면 repaint 비용을 줄일 수 있다.
• 불필요한 DOM 접근 피하기: offsetWidth, clientHeight 같은 속성 읽기는 reflow를 유발할 수 있으니 주의할 것.