[온라인 쇼핑몰 속도 최적화] 합성되지 않은 애니메이션 피하기

 

목차

 

💡 합성되지 않은 애니메이션은 브라우저 렌더링에 어떤 영향을 줍니까?

💡 합성되지 않은 애니메이션은 페이지 성능에 어떤 영향을 줍니까?

💡  합성되지 않은 애니메이션을 피하는 방법은 무엇입니까?

 

---

 

 

 

 

애니메이션은 웹 페이지에서 시각적인 요소의 활동성을 높이는 데에 있어 중요한 역할을 합니다. 그러나, 합성되지 않은 애니메이션은 GPU를 사용하지 못하고 CPU를 사용하기 때문에 브라우저의 렌더링 과정에서 많은 비용을 발생시키며, 브라우저의 성능을 저하시키고, 페이지 로딩 시간을 늘리는 원인이 됩니다. 
따라서, 합성되지 않은 애니메이션을 피하는 것이 중요합니다. 합성되지 않은 애니메이션을 피하면 페이지 로드 속도가 빨라지고 페이지 버벅거림(페이지 튕김)을 방지할 수 있습니다.

 

 

---

💡 합성되지 않은 애니메이션은 브라우저 렌더링에 어떤 영향을 줍니까?

합성되지 않은 애니메이션이 페이지 성능에 미치는 영향을 이해하려면, 먼저 브라우저가 페이지를 렌더링하는 방식을 이해해야 합니다.
브라우저가 페이지를 렌더링하기 위해 따라야 하는 6단계가 있습니다. 이를 통칭하여 렌더링 파이프라인이라고 합니다.

< 렌더링 파이프 라인은 각 단계가 후속 단계에 직접 영향을 미치는 브라우저 고유의 순차적 프로세스입니다.>

마지막 단계(즉, 합성)를 제외하고 렌더링 파이프 라인의 다른 모든 단계는 이전 단계의 직접적인 영향을 받습니다.

 

예를 들어, CSS 또는 JavaScript를 사용하여 페이지 레이아웃에 영향을 주는 요소의 스타일을 설정할 수 있습니다. 레이아웃은 페이지에 픽셀을 그리는 방법을 결정합니다.
처음 5단계(비합성 단계라고도 함)는 기본 스레드에서 실행되고, 합성 단계는 별도의 compositor-thread에서 실행됩니다.

 

 

---

 

 

💡 합성되지 않은 애니메이션은 페이지 성능에 어떤 영향을 줍니까?

앞서 언급했 듯이 브라우저 렌더링 파이프 라인의 각 단계는 파이프 라인의 후속 단계에 직접적인 영향을 미칩니다.
따라서 CSS/JavaScript 수정이 포함된 모든 애니메이션은 스타일 재계산을 유발할 수 있습니다. 스타일이나 레이아웃이 변경되면 픽셀이 다시 그려집니다. 픽셀을 다시 칠하려면 더 많은 메인 스레드 작업이 필요합니다.

페이지 성능에 미치는 영향은 주로 두 가지입니다.

 ● 첫째, 브라우저는 페이지를 렌더링하기 위해 더 많은 메인 스레드 작업을 수행해야 하므로 실행 시간이 늘어납니다.
 ● 또한, 렌더링 파이프 라인의 추가 단계에 의해 트리거될 수 있는 요소 변경으로 인해 페이지에 더 많은 레이아웃 이동이 발생합니다.

합성되지 않은 애니메이션을 피하면 메인 스레드 작업을 줄여 더 나은 사용자 경험을 제공할 수 있습니다.

합성 애니메이션(예: 불투명도, 변형)은 별도의 합성 스레드 에서 실행되며 픽셀 다시 그리기를 트리거하지 않습니다. 이렇게 하면 페이지가 원활하게 로드되어 예기치 않은 레이아웃 변경 및/또는 페이지 버벅거림을 방지할 수 있습니다.

 

 

---

 

💡  합성되지 않은 애니메이션을 피하는 방법은 무엇입니까?

합성되지 않은 애니메이션은 브라우저의 성능에 부담을 주고, 부드러운 애니메이션을 방해할 수 있습니다. 

 

이를 피하기 위해서는 다음과 같은 방법을 사용할 수 있습니다:

 

1. GPU 가속 활용
GPU(Graphics Processing Unit) 가속을 활용하여 합성되지 않은 애니메이션을 피합니다. GPU는 그래픽과 애니메이션 처리에 특화되어 있어 CPU보다 더 효율적으로 처리할 수 있습니다.
CSS 속성 중 transform과 opacity를 사용하면 GPU 가속을 활성화할 수 있습니다. 이러한 속성을 사용하여 애니메이션을 구현하면 합성되어 부드럽게 동작합니다.

2. 리플로우와 리플로우 최소화
브라우저가 요소의 크기나 위치를 변경해야 할 때, 리플로우(Reflow)라는 작업이 발생합니다. 리플로우는 성능에 부담을 주므로 최소화해야 합니다.
합성되지 않은 애니메이션을 피하기 위해 크기나 위치 변경이 필요한 경우, 이러한 작업을 GPU를 사용하여 수행하면 리플로우를 최소화할 수 있습니다.

3. requestAnimationFrame 사용
requestAnimationFrame을 사용하여 브라우저에게 애니메이션을 최적적인 타이밍에 그릴 수 있도록 합니다.
이 함수를 사용하면 브라우저의 리프레시 주기에 맞추어 애니메이션을 업데이트하므로 합성되지 않은 애니메이션을 피할 수 있습니다.

4. 애니메이션 중첩 최소화
여러 개의 애니메이션을 동시에 실행할 때, 합성되지 않은 애니메이션의 가능성이 높아집니다. 따라서 애니메이션 중첩을 최소화하도록 합니다.
필요한 경우, 여러 개의 애니메이션을 하나로 합치거나 순차적으로 실행하여 합성되지 않은 애니메이션을 방지합니다.

5. 최적화된 이미지 및 미디어 사용
이미지나 비디오 애니메이션을 사용할 때, 최적화된 형식과 크기의 미디어를 사용하여 불필요한 리소스 로딩과 합성되지 않은 애니메이션을 피합니다.

 

 

---

 

결론

합성되지 않은 애니메이션을 피하기 위해서는 GPU 가속을 활용하고, 리플로우를 최소화하며, requestAnimationFrame과 같은 최적화 기법을 사용하여 애니메이션을 구현합니다. 이렇게 하면 웹 페이지의 성능과 사용자 경험을 향상시킬 수 있습니다.
애니메이션에 사용된 CSS 요소를 평가하는 것으로 시작하세요.

페이지의 픽셀 다시 그리기를 실행하거나 실행하지 않을 수 있는 CSS 요소의 전체 목록을 보려면 여기를 클릭하세요.
합성기 전용 속성만 사용하고 레이어 수를 관리하는 방법에 대해 자세히 알아보려면 이 기사를 읽으십시오.