CSS 최적화
-
최적화에 대해 알아보며 나한테 묻는 QA개발 2022. 3. 31. 17:27
Q: 애니메이션의 최적화와 Reflow / Repaint 개선 방법은? A 먼저, 컨텍스트 관점에서의 최적화는 CSS 애니메이션 중에 Transform과 Opacity와 같은 속성 변경은 컴포지터 스레드에서 처리되어서 메인 스레드와 병렬 처리가 가능하지만, JS 애니메이션은 항상 메인 스레드에서 처리되기 때문에 블로킹이 발생할 수 있습니다. 따라서, JS에서 처리되고 있는 애니메이션 중 CSS로 처리가 가능한 애니메이션을 CSS에서 처리함으로써 성능 개선이 될 수 있습니다. 리플로우 개선으로는 애니메이션이 들어간 요소의 Position은 Fixed나 absolute로 지정한다거나, 인라인 스타일을 최소화시키고 ClassName의 변화에 따라 스타일이 변경될 경우 Reflow를 완전히 피할 수는 없지만 D..