CSS 최적화 : DevTools로 애니메이션 성능 조정

CSS 애니메이션 성능 최적화 안내서 : 브라우저 개발자 도구를 사용하여 애니메이션 유창함을 향상시킵니다

이 기사는 Siteground와 공동으로 만들어졌습니다. SitePoint를 지원하는 파트너에게 감사합니다. 우리 모두가 알고 있듯이 CSS 애니메이션 성능은 일반적으로 매우 높습니다. 그러나 많은 수의 요소 또는 복잡한 애니메이션이 포함 된 장면의 경우 코드가 성능에 최적화되지 않으면 애니메이션이 말더듬되고 사용자 경험에 영향을 미칩니다.

이 기사에서는 CSS 애니메이션 뒤의 실행 메커니즘을 확인하는 데 도움이되는 실용적인 브라우저 개발자 도구 기능을 소개합니다. 애니메이션이 붙어 있으면 이유를 더 잘 이해하고 고칠 수 있습니다.

키 포인트

브라우저 개발자 도구를 사용하여 CSS 애니메이션 성능을 최적화하고 애니메이션 지연을 일으키는 문제를 식별하며 애니메이션의 기본 작업에 대한 통찰력을 얻습니다. 이러한 도구는 프레임 속도, 검토, 편집 및 디버그 코드를 확인하고 성능에 영향을 줄 수있는 레이아웃 및 드로잉 작업을 분석 할 수 있습니다.

부드러운 애니메이션 효과를 얻으려면 대상 프레임 속도가 60fps (초당 프레임)에 도달해야합니다. 더 부드러운 애니메이션을 보장하기 위해 CS의 불투명도, 변환 및 필터 만 애니메이션됩니다. 다른 속성을 애니메이션으로 만들면 브라우저에 압력을 가할 수있어 매우 짧은 시간 안에 값 비싼 작업을 수행하여 결과가 나빠질 수 있습니다.

css 속성 또는 및

기술을 사용하여 브라우저가 처리를 위해 GPU (그래픽 처리 장치)에 대한 일부 속성 변경을 넘겨 주도록 강제합니다. 이를 통해 하드웨어 가속을 활용하고 기본 브라우저 스레드의 압력을 완화합니다. 그러나 과용은 애니메이션 말더듬과 같이 피하려고하는 문제를 일으킬 수 있습니다.

개발자 도구 및 CSS 성능 분석

브라우저에서 매끄럽게 실행하려면 애니메이션이 60fps에 도달해야합니다. 프레임 속도가 낮을수록 애니메이션 효과가 악화됩니다. 이는 브라우저가 작업을 수행하기 위해 프레임 당 약 16 밀리 초만 가지고 있음을 의미합니다. 그러나이 시간 동안 그것은 무엇을 했습니까? 브라우저가 필요한 프레임 속도를 유지하는지 어떻게 알 수 있습니까?
• 애니메이션 품질을 평가할 때 사용자 경험보다 더 중요한 것은 없다고 생각합니다. 그러나 최신 브라우저 개발자 도구가 항상 100% 신뢰할 수있는 것은 아니지만 더 똑똑해지고 있으며이를 사용하여 코드를 검토, 편집 및 디버깅 할 수 있습니다.
프레임 속도와 CSS 애니메이션 성능을 확인해야 할 때 동일합니다. 작동 방식은 다음과 같습니다.
• Firefox 성능 도구 탐색 이 기사에서는 Firefox Performance 도구를 사용하고 있습니다. 또 다른 주요 경쟁자는 크롬 성능 도구입니다. 두 브라우저 모두 강력한 성능 기능을 제공하므로 좋아하는 도구를 선택할 수 있습니다.
Firefox에서 개발자 도구를 열려면 다음 옵션 중 하나를 선택하십시오.
웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 요소 확인을 선택하십시오.
• 또는 키보드 바로 가기 사용 : Windows 및 Linux에서 Ctrl Shift i
를 누르고 MacOS에서 i
• 를 opt i 를 누릅니다. 다음, 성능 탭을 클릭하십시오. 여기에는 웹 사이트의 성능 데이터 기록을 시작할 수있는 버튼이 있습니다. 이 버튼을 누르고 몇 초 동안 기다리거나 페이지에서 약간의 작업을 수행하십시오. 완료되면 "Performance Recording 중지"버튼을 클릭하십시오 잠시 후, Firefox는 코드에 어떤 문제가 있는지 이해하는 데 도움이되는 잘 조직 된 데이터를 많이 제공합니다.
성능 패널에서 녹음 결과는 다음과 같습니다. "폭포"섹션은 CSS 전환 및 키 프레임 애니메이션과 관련된 문제를 확인하는 데 좋습니다. 다른 부분은 "Call Tree"및 "JS Flame Graph"로 JavaScript 코드에서 병목 현상을 찾는 데 사용할 수 있습니다.
폭포 흐름보기에는 요약 섹션과 상단에 상세한 고장이 있습니다. 둘 다 데이터가 색상으로 코딩됩니다 :

노란색 막대는 JavaScript 작동을 나타냅니다.

보라색 막대는 HTML 요소를 계산하는 CSS 스타일 (재 계산 스타일) 및 페이지 레이아웃 (레이아웃)을 나타냅니다. 레이아웃 작업은 브라우저의 경우 상당히 비싸므로 중복 레이아웃 (예 : "reflow"라고도하는 속성을 애니메이션하는 경우 ,

, , ,

, 등), 결과는 말더듬 될 수 있습니다. 녹색 막대는 요소가 하나 이상의 비트 맵 (드로우)으로 그려져 있음을 나타냅니다. , , 및 기타 속성과 같은 애니메이션 속성에는 고가의 드로잉 작업이 포함되며, 이는 느린 애니메이션과 사용자 경험이 좋지 않은 이유 일 수 있습니다.

검사 할 데이터 유형을 필터링 할 수도 있습니다. 예를 들어 CSS 관련 데이터에만 관심이 있으므로 화면의 왼쪽 상단에있는 필터 아이콘을 클릭하여 다른 모든 것을 선택 해제 할 수 있습니다. 폭포 흐름 요약 아래의 녹색 막대는 프레임 속도 정보를 나타냅니다.

건강한 표현은 상당히 높지만 가장 중요한 일관성, 즉 깊은 틈이 많지 않습니다.

이것을 예제로 설명합시다.

실용 도구 전투
이것은
• 키워드를 사용하는 간단한 CSS 애니메이션입니다. 테스트 페이지는 다음과 같습니다.

직사각형 자주색 프레임은 무한 루프에서 볼 수 없습니다. 나는 화면의 사각형 상자의

요소의

속성을 ​​나타내는 애니메이션으로 이것을한다. 애니메이션 블록은 다음과 같습니다 <div> <i>이 애니메이션에서 얻은 성능 데이터는 다음과 같습니다. <code>margin-left 프레임 속도 시각화는 평균 프레임 속도가 44.82fps의 평균 프레임 속도로 약간 고르지 않은 것처럼 보입니다. @keyframes 또한 애니메이션 프로세스 중에 발생하는 모든 레이아웃 및 드로잉 작업에주의하십시오. 이들은 브라우저가 메인 스레드에서 수행하는 비용이 많이 드는 작업으로 성능에 부정적인 영향을 미칩니다. 마지막으로, Inspector Tool에 액세스하는 경우 애니메이션 섹션을 클릭 한 다음 애니메이션 이름을 사용하여 정보 상자가 현재 애니메이션에 대한 모든 관련 데이터와 함께 나타납니다. 애니메이션이 최적화되면 사실을 설명하는 메시지가 표시됩니다. 이 경우 메시지가 없습니다

@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}

이제 브라우저 가이 블록을 사용하여 CSS

속성을 ​​애니메이션하기 때문에 코드를 변경하고 새로운 녹화를 수행 할 것입니다.

이것은 성능에 기록 된 이미지입니다 :

프레임 속도는 이제 더 높고 (56.83fps), 폭포 흐름에는 비용이 많이 드는 레이아웃 및 드로잉 작업이 표시되지 않습니다. 또한 개발자 도구의 "Inspector"탭을 열면 "애니메이션"패널에 액세스하고 애니메이션 이름으로 호버링하면 다음과 같은 내용이 표시됩니다.

애니메이션 이름과 관련된 정보 상자는 모든 애니메이션이 최적화되었음을 나타냅니다. 이는 웹 사이트 방문자에게 좋은 소식입니다.

CSS의

,

및

에만 해당됩니다 당신은 이전 에이 제안을 들었을 수도 있지만, 다시 이야기 할 가치가있는 경우를 대비하여 : 애니메이션이 원활하게 실행되기를 원한다면 애니메이션을 설정하기 위해 CSS (필터)에 대한 불투명도, 변환 및 필터 만 있으면됩니다. 효과. 다른 모든 것을 애니메이션으로 만들면 브라우저에 압력을 가할 수있어 매우 짧은 시간 안에 값 비싼 작업을 수행해야합니다. 이는 일반적으로 최상의 결과를 얻지 못합니다. 브라우저의 성능 도구가 입증되었으므로 반복 된 레이아웃과 드로잉 작업은 친구가 아닙니다.

그러나 각 브라우저는 CSS 속성을 약간 다르게 처리합니다. 어떤 브라우저가 어떤 속성 (특히 웹 애니메이션에 관여하는 이러한 속성의 값을 업데이트 할 때)을 게시하고 작업하는 작업을 트리거 할 경우 CSS 트리거를 방문하십시오.

애니메이션 성능을 보장하기 위해 인기있는 접근 방식은 브라우저가 GPU (그래픽 처리 장치)에 대한 일부 속성 변경을 넘겨 주도록하는 것이며, 이는 브라우저의 기본 스레드에 대한 압력을 완화하고 하드웨어 가속도를 활용하는 것입니다. css 속성 또는 및

기술을 사용하여이를 달성 할 수 있습니다. 이 모든 팁은 작동하지만 과도하게 사용하면 실제로 피하려고하는 결과, 즉 애니메이션 말더듬을 얻을 수 있습니다.

웹 애니메이션 성능에 대한 하드웨어 가속에 대해 자세히 설명하려고하지는 않지만 더 깊이 파고 들면 아래에 나열된 리소스를 확인하십시오.

will-change 자원 translateZ(0) Paul Lewis와 Paul Irish의 고성능 애니메이션 translate3d(0,0,0)

CSS 애니메이션 및 전환 성능 : Max Vujovic의 브라우저 내부를보고 Paul Lewis와 Sam Thorogood의 애니메이션과 공연

Compositor-only Properties를 고수하고 Paul Lewis의 레이어 수를 관리 Sara Soueidan의 GPU Composited CSS의 트릭

• Nick Salloum의 CSS Will-Change 부동산 소개 mdn 에 의한 CSS 속성 애니메이션 CSS 애니메이션 성능 (FAQS)에 대한 FAQ CSS 애니메이션의 성능에 영향을 미치는 주요 요인은 무엇입니까?
CSS 애니메이션의 성능은 다양한 요인에 의해 영향을받습니다. 애니메이션의 복잡성, 애니메이션의 요소 수 및 애니메이션 속성이 모두 작동합니다.
• 및 와 같은 애니메이션 속성은 출판 또는 그리기 작업을 트리거하지 않기 때문에 더 나은 성능을 발휘하는 경향이 있습니다. 그러나 , 또는
와 같은 애니메이션 속성은 레이아웃 오프셋과 다시 그리기를 일으켜 애니메이션을 느리게 할 수 있습니다. 또한 장치의 하드웨어 및 브라우저의 렌더링 엔진도 CSS 애니메이션의 성능에도 영향을 미칩니다.
• CSS 애니메이션의 성능을 측정하는 방법은 무엇입니까?
  브라우저 개발자 도구를 사용하여 CSS 애니메이션의 성능을 측정 할 수 있습니다. 예를 들어 Chrome에서 성능 탭을 사용하여 애니메이션 런타임을 녹화하고 분석 할 수 있습니다. 이 도구는 애니메이션 라이프 사이클에서 시간 소비에 대한 자세한 분석을 제공하여 성능 병목 현상을 식별하는 데 도움이됩니다. 부드러운 CSS 애니메이션의 이상적인 프레임 속도는 얼마입니까?

  부드러운 애니메이션의 이상적인 프레임 속도는 초당 60 프레임 (FPS)입니다. 대부분의 장치가 초당 60 회 화면을 새로 고치기 때문입니다. 따라서 부드러운 애니메이션을 만들려면 60fps에 해당하는 16.67 밀리 초 (1 초/60)마다 애니메이션을 업데이트해야합니다.

  더 나은 성능을 위해 CSS 애니메이션을 최적화하는 방법은 무엇입니까?

  더 나은 성능을 위해 CSS 애니메이션을 최적화하기위한 다양한 전략이 있습니다. 일반적인 접근법은 및 와 같은 게시 또는 작업을 트리거하지 않는 애니메이션 속성에 대한 것입니다. 또한 애니메이션과 애니메이션을 단순화하는 요소의 수를 줄이면 성능을 향상시킬 수 있습니다. 속성을 사용하면 애니메이션 할 수있는 속성을 프롬프트하여 브라우저가 애니메이션을 최적화하는 데 도움이 될 수 있습니다.

  성능 측면에서 CSS 애니메이션과 JavaScript 애니메이션의 차이점은 무엇입니까?

  CSS 애니메이션은 일반적으로 JavaScript 애니메이션보다 더 잘 수행됩니다. CSS 애니메이션은 메인 JavaScript 스레드와 별개로 브라우저의 렌더링 엔진에서 실행되기 때문입니다. 이것은 JavaScript 스레드가 바쁘더라도 CSS 애니메이션이 여전히 원활하게 실행될 수 있음을 의미합니다. 그러나 JavaScript 애니메이션은 더 많은 제어력과 유연성을 제공하여 복잡한 애니메이션에 도움이 될 수 있습니다.

  하드웨어 가속이 CSS 애니메이션 성능에 어떤 영향을 미칩니 까? transform 하드웨어 가속은 CSS 애니메이션의 성능을 크게 향상시킬 수 있습니다. 하드웨어 가속화가 활성화되면 브라우저는 일부 렌더링 작업을 장치의 GPU에 오프로드하여 CPU를 제거하여 다른 작업을 처리합니다. 이로 인해 특히 복잡한 애니메이션이나 많은 요소가 포함 된 애니메이션에서 더 부드러운 애니메이션으로 이어질 수 있습니다. opacity will-change 애니메이션 성능에서 기능은 어떤 역할을합니까?

  함수는 다음 리판 전에 지정된 기능을 호출하여보다 효율적인 애니메이션을 허용하는 JavaScript 메소드입니다. 즉, 애니메이션이 장치의 새로 고침 속도와 동기화되어 더 부드러운 애니메이션이 생길 수 있습니다. 또한 브라우저는 애니메이션을 최적화하고 CPU 사용량을 줄이며 성능을 향상시킬 수 있습니다.

  DevTools의 성능 패널을 사용하여 CSS 애니메이션 성능을 향상시키는 방법은 무엇입니까?

  DevTools의 성능 패널은 애니메이션 수명주기에서 시간 소비에 대한 자세한 분석을 제공합니다. 이 데이터를 분석하면 성능 병목 현상을 식별하고 그에 따라 애니메이션을 최적화 할 수 있습니다. 예를 들어, 그리기에 많은 시간이 소비되면 애니메이션이 드로잉 작동을 트리거하지 않는 속성을 고려할 수 있습니다.

  레이아웃 지터가 CSS 애니메이션 성능에 미치는 영향은 무엇입니까?

  레이아웃 지터는 브라우저가 DOM의 변화로 인해 레이아웃 정보를 반복적으로 계산 해야하는 상황을 말합니다. 이는 CSS 애니메이션의 성능에 심각한 영향을 줄 수있어 애니메이션이 천천히 실행되거나 말더듬을 유발할 수 있습니다. 레이아웃 지터를 피하려면 DOM 읽기 및 작성 작업을 함께 배치하고 애니메이션을 피하여 게시 작업 속성을 유발하십시오.

  애니메이션 성능을 향상시키기 위해 CSS

  속성을 ​​사용하는 방법은 무엇입니까? will-change 속성을 ​​사용하면 애니메이션에 대한 속성에 대해 브라우저에 알릴 수 있습니다. 이를 통해 브라우저는 애니메이션이 시작되기 전에 필요한 최적화를 수행 할 수 있으므로 애니메이션이 더 부드럽습니다. 그러나

  속성은 브라우저가 더 많은 리소스를 소비하고 성능에 부정적인 영향을 미칠 수 있으므로

  속성을주의해서 사용해야합니다. will-change will-change (위의 모든 링크를 실제 링크로 대체해야합니다)