1. reflow & repaint

 

프로젝트를 진행하면서,

사용자의 만족도를 높이기 위해서는 빠른 렌더링 속도가 중요하다는 것을 느끼게 됐다.

 

렌더링 속도를 높이기 위해서

어떤 것을 고려해야하는지 공부하던 도중

리플로우와 리페인트에 대해 알아보게 되었다.

 

1. 개념

리플로우는 레이아웃이 변경 될 때

이로인해 영향을 받는 모든 DOM 노드들의 수치가 다시 계산되고, 레이아웃 트리가 재생성되는 것을 의미한다.

레이아웃이 변경 될 때 발생하기 때문에

width, height, padding, margin, float, position 등이 변하면 발생한다.

 

리페인트는 리플로우가 끝난 후에 발생하는 현상으로,

다시 만들어진 레이아웃 트리를 레이어에 다시 그리는 작업을 의미한다.

또한 리페인트는 가시적인 속성에 의해 발생한다.

ex. color,border-radius,background,box-shadow  등

2. 렌더링 속도에 미치는 영향

렌더링은 순서대로 진행되기 때문에

리플로우와 리페인트가 발생하는 경우, 둘의 작업을 마친 후에 렌더링 작업이 계속해서 진행된다.

 

만약, 애니메이션을 구현 하였는데 리플로우와 리페인트 해야 할 양이 너무 많아 순조롭게 진행되지 않는다면

부자연스러운 애니메이션이 구현 될 것이고

궁극적으로는 브라우저 렌더링 속도가 저하 될 것이다.

3. 해결 방법

렌더링 속도 저하를 막기 위해 두가지 방법을 활용 할 수 있다.

 

1.  CSS transform 속성 사용

2. JS requestAnimationFrame 함수 사용

---

 

첫번째는 CSS로 애니메이션을 구현하는 경우 transform 속성을 사용 할 수 있다.

cpu대신 gpu를 사용해서 렌더링을 하기 때문이다.

 

gpu를 cpu대신 사용하는 이유는

gpu의 다수의 코어가 간단한 작업을 동시에 협업하는데 특화되어 있기 때문에

애니메이션을 빠르게 처리할 수 있기 때문이다.

 

두번째는 JS로 애니메이션을 구현 할 때

requestAnimationFrame 함수를 사용하여 자연스러운 애니메이션이 구현되도록 할 수 있다.

 

이 함수는 JS를 통해 일어나는 애니메이션 정보를

브라우저에 매 프레임마다 미리 알려주기 때문에

애니메이션이 프레임의 시작 시 실행되도록 보장하기 때문이다.

4. 결론

리플로우와 리페인트 작업으로 인해 렌더링 속도가 느려질 수 있다.

 

그렇기 때문에 

transform 속성과 requestAnimationFrame함수를 활용하여

렌더링 속도가 느려지는 것을 최소화하고,

사용자 경험이 향상 될 수 있도록 할 필요가 있다.