[React] 리액트는 Reflow, Repaint 이슈를 어떻게 해결했을까? (feat. 가상돔)

 

🍎 서론

---

정적인 웹사이트, 돔의 변경이 적은 웹사이트라면 문제가 없겠지만, SPA처럼 돔 변경이 빈번하게 발생하는 웹사이트의 경우 렌더링 과정에서 각 노드에 관해 많은 연산을 수행하여 웹서버 성능 이슈의 원인이 될 수 있습니다. 리액트는 이 문제를 어떻게 해결하였을까요?

(렌더링 과정과 웹서버 성능 이슈에 공감이 가지 않는다면 아래 🍎 브라우저 렌더링의 흐름?부터 읽어보시길 추천드립니다)

 

 

 

🍎 DOM이 뭔가요?

---

저희가 부르는 DOM은 DOM 트리입니다. DOM 트리란 바로 / 브라우저가 이해하고 또 조작할 수 있도록 / 응답으로 받아온 HTML파일의 각 원소들을 / 노드로 하는 / 트리 형태의 파싱본이랍니다. 

어떠한 원소에 개발자가 속성을 부여하면, 브라우저는 그 원소를 담은 노드를 돔 트리에서 찾고, 수정할 원소 및 그 자식원소를 제거하고, 새롭게 수정할 원소로 교체합니다. 이후 다시 레이아웃과 페인팅 과정이 진행되게 되죠.

리액트는 "가상돔 (Virtual DOM)"이라는 원리로 더 빠른! 사용성을 제공해 줍니다. 

 

 

 

 

🍎 리액트 가상돔과 조작 과정

---

가상돔은 실제 돔의 복사본으로 메모리 내 자바스크립트 오브젝트 형태로 저장되어 있습니다. 리액트는 2개의 가상돔을 만들어, 하나는 변경 전, 다른 하나는 변경 후 형태를 담고 있습니다. 

 

두 복사본을 비교하여 정확히 어떤 원소가 변했는지 찾아내는 Diffing 과정을 거친 후 → 딱 바뀐 부분들만 실제 브라우저에 한 번에 적용(Batch Update)시켜주는 Reconciliation 과정을 진행합니다.

 

이는 돔에서 제거 및 교체하는 과정보다 JS 객체 자체를 조작하는 과정이 더 쉽고 빠르기에 리액트는 빠른 사용성을 제공합니다. 

또한, 돔 조작이 발생하면 가상 돔에서 모든 연산을 한번에 처리함으로써 Reflow, Repaint를 최소화하여 렌더링 과정의 성능 이슈를 해결하였습니다. 

 

 

 

🍎 브라우저 렌더링의 흐름?

---

렌더링 과정을 이해하면 불필요한 렌더링이 발생하는 과정을 이해할 수 있고, 이 과정을 최소화함으로써 성능을 최적화할 수 있습니다.

사용자가 URL를 입력 후, 브라우저가 검색어인지 URL인지 판단한 후, URL라면 네트워크 호출을 시작합니다. 응답으로 html, css, javascript, static (img와 같은) 파일을 받아오게 되는데, 받아온 파일을 화면에 렌더링 해주기 위해 html 파일을 렌더링 엔진에게 전달해 다음 과정을 진행합니다. 

(브라우저를 구성하는 엔진: 배보다 배꼽이 더 큰 Event Loop 이해)

 

1. DOM 트리 생성

렌더링 엔진의 메인 스레드는 전달받은 HTML파일을 브라우저가 이해할 수 있는 DOM 트리 형태로 반환합니다.

2. CSSOM 트리 생성

따로 적용된 스타일링 + 스타일링이 적용되지 않은 원소의 경우 브라우저상 디폴트 스타일링을 적용하여 CSSOM이라는 트리를 생성합니다.

 

 

3. 앞 두 트리를 결합하여 Render 트리 생성

DOM 트리 & CSSOM 트리를 결합하여 ⇒ Render 트리 형합니다.

display:none; 속성이 설정된 노드는 Render 트리를 만드는 과정에서 제외됩니다.   visibility: invisible;은 유사한 기능을 하지만, 공간은 차지하되 요소가 보이지 않게만 하기 때문에   Render 트리에 포함됩니다.

 

4. Attachment

모든 노드는 attach 메서드를 가지고 있고, 이 과정에서 attach 메서드가 호출되면서 모든 스타일 정보가 동기적으로 계산되고 객체 형태로 반환합니다.

 

5. 레이아웃 Layout

트리 내 노드들의 위치/크기/순서 정보(최상위 원소 맨 밑에 배치하는 등 3차원)를 계산하여 각 노드에 좌표를 부여하고 화면에 배치합니다.

 

6. 페인트 Paint

레이아웃 단계에서 배치된 원소들에 색을 입히고 화면에 그려줍니다.

 

 

🍎  Reflow & Repaint

---

화면에 표시된 후 자바스크립트가 돔을 조작하게 되면, 각 노드의 좌표를 계산하고 부여하는 레이아웃 과정 (reflow)과 색상을 입히는 페인팅 과정 (repaint) 이 다시 진행됩니다.

reflow는 position, width, height, margin, display, overflow 등 을 설정할 때 (즉 생성된 DOM 노드의 레이아웃이 변경될 때) 영향받은 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정입니다.

• 언제 발생하나요?
  • 페이지 초기 렌더링 (최초 Layout 과정)
  • 윈도우 리사이징 (Viewport 크기 변경시)
  • DOM 노드의 추가, 제거
  • DOM 노드의 위치, 크기 변경 (margin, padding, border, width, height 등..)
  • 이미지 크기 변경
  • 폰트 변경, 텍스트 내용 변경
  • CSS3 애니메이션과 트랜지션
  • offset, scrollTop, scrollLeft과 같은 계산된 스타일 정보 요청
• 최적화 방법론
  • 가장 하위 노드의 스타일링 변경을 우선 시 변경하여, 감싸는 상위 노드에 reflow를 최소화. 
  • 애니메이션이 있는 엘리먼트
    • 위치가 계속 바뀌기 때문에 position 속성을 fixed, absolute로 지정하여 지정된 노드를 전체 노드에서 분리시켜 해당 노드에만 Reflow가 발생하도록 제한
  • cssText로 한번에 스타일링하는 방법최적화 방법?   

// bad
const body = document.body;
body.style.width = '50px';
body.style.height = '100px';
 
// good
const body = document.body;
body.style.cssText = 'width: 50px; heigh: 100px;';

• 스타일링 태그
  • left, right, width, height < transform
  • visibility/display < opacity스타일링 태그

 

 

repaint는 background, background-image, color, outline, text-decoration 등을 설정할 때, 재생성된 렌더트리에 다시 색을 입히고 화면에 그려주는 과정입니다. 

 background-color, visibility와 같이 레이아웃에 영향을 주지 않는 스타일 속성만 변경되었을 경우에는 Reflow가 수행되지 않아 Repaint만 수행됩니다

  

 

참조자료:

스무디 한 잔 마시며 끝내는 리액트+TDD 서적

Reflow or Repaint(or ReDraw) 과정 설명 및 최적화 방법

Reflow와 Repaint