[Javascript] repaint & reflow

Reflow란?

생성된 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드 (부모, 자식)의 수치를 다시 계산하여 레이아웃 트리 (렌더 트리)를 재생성하는 작업
- 렌더링 과정에서 레이아웃 단계를 다시 거치는 과정
- Reflow를 발생하게하는 속성: width, height, padding, margin, float, position 등 레이아웃에 영향을 주는 모든 속성

 

Repaint 란?

Reflow 과정이 끝나고 재생성된 레이아웃 트리 (렌더 트리)를 다시 레이어에 그리는 작업
- 렌더링 과정에서 페인트 단계를 다시 거치는 과정
- Repaint를 발생하게 하는 속성: color, border-radius, background, box-shadow 등 시각적으로 보여지는 모든 속성

 

왜 Reflow와 Repaint는 렌더링 속도에 중요한 영향을 미칠까?

- 렌더링 과정은 순차적으로 진행된다.
- 각각의 렌더링 과정들은 반드시 전 단계의 데이터가 필요하다.
- 만약 전 단계에 변화가 일어나면 다음 단계에 모두 영향을 미친다.

 

렌더링 속도를 줄이는 방법

1. CSS Transform 속성 사용

transform을 사용하여 만드는 애니메이션은 cpu 대신 gpu를 사용하여 화면 렌더링을 처리한다.
gpu는 여러 개의 코어가 간단한 작업을 동시에 협업하는데 특화되어 있기 대문에 애니메이션을 빠르게 처리할 수 있다.

 

2. requestAnimationFrame 함수 사용

requestAnimationFrame 함수는 자바스크립트를 통해 일어나는 애니메이션 정보를 브라우저에 매 프레임마다 알려준다.
자바스크립트 애니메이션이 프레임의 시작 시 실행되도록 보장한다.

 

3. visibility: hidden 대신 display: none 사용하기

visibility: hidden은 레이아웃 트리에 반영되기 때문에 reflow 대상이 된다.

display: none의 경우 레이아웃 트리에 반영되지 않기 때문에 렌더 트리 재생성 작업에서 제외된다.

불필요한 노드는 display: none을 이용해 reflow 항목에서 제외시킬 수 있다.