리페인팅/리플로우
브라우저의 성능을 저하시킬 수 있는 리페인팅/리플로우에 대해 알아보자
리플로우와 리페인트는 렌더링과정에서 레이아웃 단계와 페인트 단게를 다시 거치는 과정이다.
1. 리플로우
1.1 정의
생성된 DOM노드의 레이아웃 변경 시 영향을 받는 모든 노드(부모, 자식)의 수치를 다시 계산하여 레이아웃 트리(렌더트리)를 재생성하는 작업을 의미한다.
1.2 Reflow를 발생하게 하는 속성
width, height, padding, margin, float, position 등 레이아웃에 영향을 주는 모든 속성
2. 리페인팅
2.1 정의
Reflow 과정이 끝나고 재생성된 레이아웃 트리(렌더트리)를 다시 레이어에 그리는 과정
2.2 Repaint를 발생하게 하는 속성
color, border-radius, background, box-shadow 등 시각적으로 보여지는 모든 속성
3. 리플로우, 리페인팅, 렌더링
렌더링 과정은 순차적으로 진행된다. 각각의 렌더링 과정들은 반드시 전 단계의 데이터가 필요하다. 만약 전 단계에 변화가 일어나면 다음 단계에 모두 영향을 미친다.
예를들어, 스타일이 변하면 그 스타일에 해당하는 레이아웃, 그리고 페인트 과정이 순차적으로 다시 진행된다.
reflow, repaint 해야할 요소가 많으면 많을수록 자연스럽지 못한 렌더링이 이루어질 가능성이 있고, 브라우저 전체적인 성능에 영향을 미치게 된다.
4. 해결방법
1. CSS Transform 속성을 사용한다
Transform으로 만드는 애니메이션은 cpu가 아닌 gpu를 사용하여 렌더링을 처리한다.
gpu는 여러개의 코어가 간단한 작업을 동시에 처리(병렬처리)에 특화되어 있기에 애니메이션을 빠르게 처리할 수 있다.
2.requestAnimationFrame 함수를 사용
requestAnimationFrame 함수는 자바스크립트를 통해 일어나는 애니메이션 정보를 브라우저에 매 프레임마다 미리 알려준다.
프레임마다 미리 알려주기에 자바스크립트 애니메이션이 프레임의 시작 시 실행되도록 보장한다.
5. 정리
- reflow는 DOM 노드의 레이아웃 변경 시 레아이웃트리(렌더트리)를 재생성하는 작업을 말한다
- repaint란 reflow 과정이 끝나고 재생성된 레이아웃 트리(렌더트리)를 다시 레이어에 그리는 작업이다.
- reflow, repaint 작업이 많아질수록 렌더링 성능이 저하된다
- 성능저하를 막기 위해 css transform, js requestAnimationFrame함수를 사용한다.
출처
