Repaint와 Reflow

DOM

DOM은 자바스크립트가 웹 페이지에 접근하여 내용과 디자인을 바꿀 수 있게 한다.
다른 프로그래밍 언어도 가능하지만 DOM 조작의 대표적인 언어는 자바스크립트다.

 

그래서 DOM은 프로그래밍 언어가 문서에 접근해서 읽고, 조작할 수 있게 하는 인터페이스다.

 

어떻게 생겼을까?

DOM은 대표적으로 HTML을 통해서 표현된다. JavaScript로 DOM을 직접 조작하면서 화면은 정적이지 않다.
사이트는 이벤트에 따라 컬러가 바뀌고, 다이나믹하게 애니메이션이 일어나기도 한다.

 

그렇지만 변화가 일어날 때 CPU 소모가 발생한다는 문제가 있다.
자바스크립트는 DOM을 변경하고 검색한다.

 

문서는 트리 구조다. 변경된 요소를 찾으려면 하위 트리 구조까지 타고 가야 한다.
JavaScript가 요소에 변화를 주면 브라우저는 Reflow와 Repaint 과정이 발생한다
화면이 리렌더링 된다고도 한다.

Repaint

Repaint는 HTML 요소가 비주얼적으로 바뀔 때 일어난다. 위치 와는 관련이 없다.

• visibility
• color
• background-color

특히 visibility를 수정하면 해당 요소의 자식 트리 구조까지 탐색한다.
탐색은 곧 CPU 소모다.

 

변경을 줘야 한다면 부모보다는 최대한 하위 노드에 줘야 한다.
자식이 없다면 변경되는 요소에 한 번만 계산된다.

Reflow

Reflow는 위치가 바뀔 때 일어난다. 한 요소의 위치가 바뀌면 엮여 있는 다른 요소들도 다시 걔산된다.
레이아웃에 영향을 주기 때문에 layout이라고도 불린다.
Repaint는 자식까지만 계산한다. 하지만 reflow는 레이아웃에 영향을 받는 모든 요소들에 대해 다시 위치를 계산해야 한다.
그래서 Repaint보다 CPU 소모가 크다.

 

Reflow를 트리거하는 작업들이다.

• DOM 요소 추가, 제거
• 위치 값
• class 변경
• 브라우저의 창 크기 조정
• font-family, font-size
• display

위치

위치 변화는 position 프로퍼티를 사용하는게 좋다.
절대적인 위치값을 주기 때문이다. 위치가 변경되도 다른 요소의 위치에 영향을 주지 않는다.

 

position: fixed로 뷰포트를 기준으로 절대적인 위치를 줄 수 있다.
가까운 부모에 position: relative를 주고, 변경될 요소는 position: absolute로 위치 값을 추가한다.

 

이 속성들은 요소들을 화면에 띄우는 개념으로 본다.
그러므로 변경이 되도 DOM 트리에 영향을 주지 않는 따로국밥 흐름을 가진다.

className

클래스명이 바뀌면 자식 트리 구조까지 탐색하고 변경한다.
그래서 클래스명을 바꿔야 할 때는 최대한 하위 노드에서 변경해서 reflow를 최소화 할 수 있다.

브라우저의 크기

브라우저의 크기가 바뀔 때 요소들에 변화가 일어나기도 한다. (반응형)
재정렬이 필요하므로 reflow가 발생한다.

Repaint와 Reflow

비교적 단순한 Repaint부터 소개했다.
그렇지만 DOM 렌더링은 reflow -> repaint 순서다.

 

동시에 repaint와 reflow 프로세스가 트리거되는 작업도 있다.

properties	reflow	repaint
display: none	O	O
visibility: hidden		X
font-family, font-size	O	O
color	X	O
background-color	X	O
margin, padding, border-width, border-style	O	O
Window resize	O	X
Window scroll	O	O

reflow와 repaint의 트리거 요인을 이해했다면 다른 트리거 작업도 유추가 가능할 것이다.

최적화 방법

display 속성은 reflow와 repaint 발생 모두 해당된다.
2번의 계산을 일으키니까 지양해야 할 것 같다.
그렇지만 또 최적화에 쓸모가 있기도 하다.

 

다음 글에서는 reflow와 repaint 계산을 최소화하는 방법에 대해 더 알아 보겠다.