JS reflow & repaint

reflow & repaint

 

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 함수는 자바스크립트를 통해 일어나는 애니메이션 정보를 브라우저에 매 프레임마다 미리 알려줍니다.

 

function updateScreen(time) {
 // 애니매이션 관련 내용
} 

requestAnimationFrame(updateScreen)

참고

https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B8%ED%84%B0%EB%B7%B0-js-%EC%96%91%EC%84%B1%ED%95%99%EA%B5%90