1. 디스플레이의 주사율
일반적인 디스플레이의 주사율은 초당 60 Frame(60FPS)
브라우저의 주사율이 초당 30, 20 Frame 일때 쟁크 발생(애니메이션이 버벅이는 현상)
왜 브라우저가 60Frame을 못 그리는걸까? 먼저 브라우저가 화면을 그리는 과정에 대해 알아보자.
2. 브라우저 렌더링 과정
- DOM + SSOM - HTML과 CSS를 가공하여 DOM + CSSOM로 변환
- Render Tree - DOM 트리와 CSSOM 모델을 조합하여 Render Tree라는 구조를 만듦. Render Tree 는 요소에 대한 컨텐츠와 스타일들을 만듦
- Layout - 브라우저는 Layout으로 넘어감. 위치와 크기를 계산
- Paint - 색 채워 넣기
- Composite - 각 레이어를 합쳐 화면으로 만듦
위와 같은 과정을 Critical Rendering Path 또는 Pixel Pipeline 이라고 한다.
만약 완성된 화면에서 버튼을 눌러서 이거나 다른 이유로 스타일이 살짝 변한다면 변화된 내용을 가지고 다시 위의 과정을 실시한다.
그렇기에 애니메이션 같은경우 상당히 짧은시간내에 위의 과정을 거쳐서 빨리 화면을 보여줘야한다. 그래서 브라우저가 벅차 중간중간 일부 화면들을 생략해버린다.
조금이나마 브라우저의 부담을 줄이는 방법은 무엇일까?
3. 해결방안
1) Repaint
color, background-color와 같이 색깔이 변한 경우 Layout은 변경 되지 않았으므로 Layout 과정을 생략하고 바로 Paint 단계로 넘어가는 것
2) Reflow, Repaint 피하기 (GPU도움받아)
transform, opcaity(GPU가 관여할 수 있는 속성) 변경되었을때 Render Tree에서 GPU가 관여하면서 Layout과 Paint 작업을 건너 뛰고 GPU가 직접적으로 데이터를 가공해 하나의 레이어로 Composite에 넘겨준다.
3) 각 속성에 대한 영향도
Reflow 발생
Repaint 발생
Reflow, Repaint 생략
opacity, translate, rotate, scale
자료 참고 :https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
https://www.inflearn.com/course/웹-성능-최적화-리액트-1/dashboard
