CSS 애니메이션 성능 개선

❗️문제 상황 

2가지 요구사항을 수행할 때 애니메이션 효과가 매끄럽지 못함
1. 스크롤 위치가 특정 섹션에 도달하면 화면을 고정시키고 카드만 가로로 이동해야 함(left로 위치를 변경했음)
2. 카드가 이동하면 배경의 이미지는 가운데 위치하는 카드의 이미지로 변경되어야 함(background-image를 변경했음)

 

✅ 해결

미리 배경 이미지를 렌더링 해놓은 상태에서 opacity만 transition을 주고 카드의 위치는 transform의 translateX속성을 사용하여 애니메이션 최적화함

 

 

속성을 바꾸는 것만으로 최적화가 가능했던 이유는 무엇일까요?

이유에 대해 설명하기 위해서는 우선 브라우저 렌더링 과정에 대한 이해가 필요합니다.

 

📌 간략한 브라우저 렌더링 과정

1. HTML과 CSS 등 리소스를 서버로부터 받으면, 브라우저의 렌더링 엔진에서 파싱한다.

2. HTML을 파싱하면서 DOM트리와 CSSOM트리를 생성한다.

3. DOM트리와 CSSOM트리를 결합헤서 Render 트리를 생성한 후, 레이아웃 작업과 페인팅 작업을 한다.

 

이러한 과정은 노드가 추가되거나 창의 크기가 변경되거나 스타일이 변경되었을 때 반복해서 일어날 수 잇습니다.

특히 레이아웃 계산과 페인팅을 다시 실행하는 경우는 비용이 많이 들기 때문에 주의해야 합니다

리플로우: dom + ccsom ⇒ 렌더트리 ⇒ 레이아웃 배치 ⇒ 페인트 ⇒ 컴포지션
레이아웃에 영향을 주는 속성이 변화하면 리플로우가 일어나게 됨
ex) position, display, top, bottom, margin, padding 등등

리페인트: 페인트 ⇒ 컴포지션(리플로우에서 레이아웃 배치 과정을 제외한 것)
레이아웃에 영향을 주지 않은 속성의 경우는 리페인트가 일어남
리페인트는 렌더 트리를 다시 만들지 않고 렌더 트리의 노드 중에서 스타일 속성이 변경된 요소들에 대한 업데이트가 이루어진다고 알고 있습니다.
ex) background-image, background-color, color

GPU 위임
opacity와 transform와 같은 속성은 레이어를 따로 분리하여 애니메이션 작업을 GPU에 위임하기 때문에
리플로우나 리페인트가 일어나지 않음

 

 

left, background-image를 변경했을 때는 계속해서 리플로우와 리페인트가 발생했기 때문에 렌더링이 매끄럽지 못했고

변경 후에는 transform과 opacity를 사용하여 GPU에 작업을 위임했기 때문에 애니메이션 성능이 개선되었습니다