CSS 키 프레임 애니메이션 CPU 사용량이 높습니다. 이렇게해야합니까?

CSS 키 프레임 애니메이션 CPU 사용량이 높습니다. 이렇게해야합니까?

---

여러 요소에 다음 키 프레임 애니메이션을 사용합니다.

@keyframes redPulse {
    from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
    to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
    from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
    to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
.event_indicator {
    display: inline-block;
    background-color: red;
    width: 5px;
    margin-right: 5px;

    -webkit-animation-name: redPulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

    animation-name: redPulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

내 컴퓨터에서 Chrome과 Firefox 모두 CPU 사용량이 약 40 %입니다. 애니메이션의 현재 상태 (좋지만 지금은 사용할 수 없음)입니까? 아니면 마법 속성이 누락 되었습니까?

동일한 애니메이션으로 다음 샘플을 확인할 수 있습니다. http://jsfiddle.net/Nrp6Q/

---

예, 페이지에 여러 개의 무한 루프 애니메이션이 있기 때문에 이것은 정상입니다. 따라서 CPU는 이러한 요소가 렌더링되는 동안 지속적으로 작업을 수행합니다. CPU 사용량을 크게 줄이는 "마법"속성이 있습니다.

transform: translateZ(0);

이렇게하면 요소가 자체 레이어로 합성되고 (브라우저가 3D 변환을 수행 할 것이라고 생각하도록 속임으로써) 브라우저는 대부분의 경우 GPU 가속을 활용하여 CPU의 부담을 줄여야합니다. 나를 위해 이것은 약 20 % (거의 절반)까지 줄였습니다.

이 기술에 대한 자세한 내용은 http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html을 참조하십시오.

또한 애니메이션에 키 프레임이 많을수록 더 많은 부담이됩니다. 중간 키 프레임을 잘라낸 상태로 애니메이션을 시도하면 CPU 사용량이 또 다른 상당한 (~ 10-12 %) 감소하는 것을 볼 수 있습니다.

마지막으로, 모든 속성이 동일하지는 않습니다. box-shadow는 브라우저가 배경색보다 매끄럽게 애니메이션하는 것이 훨씬 어렵습니다. 모든 키 프레임은 그대로두고, translateZ (0) 트릭을 사용하여 box-shadow 속성을 삭제하면 CPU 사용량이 10-11 %에 불과했습니다.

이렇게 말하는 것이 고통 스럽지만, 무한 루프 애니메이션의 경우 애니메이션 .gif는 브라우저 애니메이션의 현재 상태에서 CSS3보다 훨씬 더 나은 성능을 발휘할 것입니다. 한동안 페이지.

2017 업데이트 :

이 질문과 답변에 대한 길을 찾는 사람들에게는 ,, 당신은 설정 과 translate3d(0, 0, 0)동시에 동일한 이점을 제공합니다 . 데모에서 사용 하는 @Farside 의 주석을 무시하십시오. 그러나이 기술을 사용하면 여전히 상당한 차이가 있음을 알 수 있습니다.translateZ(0)translateX()translateY()translate3d(X, Y, Z)translate(X, Y)

이 질문 에 따르면 일부 사람들은 모든 브라우저, 특히 Chrome에서 transform: rotateZ(360deg).

---

CPU의 부하를 줄이는 가능한 방법 중 하나는 소위를 사용하는 null transform hack것입니다 . 이 방법은 종종 은색 총알 같은 것으로 환영받습니다 . 대부분의 경우 Chrome, Opera 및 Safari와 같은 WebKit 및 Blink 브라우저에서 렌더링 성능이 크게 향상됩니다.

"Null transform hack"(하드웨어 합성 모드) 사용

널 변환 해킹은 기본적으로 두 가지 작업을 수행합니다.

1. 하드웨어 합성 모드를 켭니다 (플랫폼에서 지원된다고 가정).
2. 자체 뒷면 이있는 새 레이어를 만듭니다.

브라우저를 "강제"하려면 다음 CSS 속성 중 하나를 요소에 추가하면됩니다.

transform: translateZ(0);

/* or its friend: */
transform: translate3d(0, 0, 0);

3D 변형으로 작업 할 때 성능을 향상시키기 위해 다음과 같은 속성도 갖는 것이 좋습니다 .

backface-visibility: hidden;
perspective: 1000;

Caveats of the "null transform hack"

Enabling a hardware acceleration in CSS3 for a lot of objects may slow down performance! Apparently, each null 3D transform creates a new layer. However, force-hacking layer creation may not always be the solution to certain performance bottlenecks on a page. Layer creation techniques can boost page speed, but they come with a cost: they take up memory in system RAM and on the GPU. So even if the GPU does a good job, the transfer of many objects might be a problem so that using GPU acceleration might not be worth it. The cite from W3C:

However, setting up the element in a fresh layer is a relatively expensive operation, which can delay the start of a transform animation by a noticeable fraction of a second.

Moving a few big objects has a higher performance, than moving lots of small items when using 3D-acceleration. So they must be used wisely and you need to make sure that hardware-accelerating your operation will really help the performance of your page, and that a performance bottleneck is not being caused by another operation on your page.

Moreover, a GPU is designed specifically for performing the complex mathematical/geometric calculations, and offloading operations onto the GPU can yield massive power consumption. Obviously, when hardware kicks in, so does the battery of the target device.

The modern way: the will-change property

The progress is not standing on the one place... W3C introduced the will-change CSS property. To cut the long story short, the will-change property allows you to inform the browser ahead of time of what kinds of changes you are likely to make to an element, so that it can set up the appropriate optimizations before they're needed.

Here's what they say in the the draft:

The will-change property defined in this specification allows an author to declare ahead-of-time what properties are likely to change in the future, so the UA can set up the appropriate optimizations some time before they’re needed. This way, when the actual change happens, the page updates in a snappy manner.

Using will-change, hinting to the browser about an upcoming transformation can be as simple as adding this rule to the element that you’re expecting to be transformed:

will-change: transform;

When developing for mobile, developers are forced to take the wide array of device constraints into consideration while writing mobile web apps. Browsers are becoming smarter, and sometimes, it's better to leave the decision to the platform itself, instead of overlapping acceleration and forcing the behavior in a hacky-way.

---

I had a similar case of high CPU usage when animating some elements with CSS3. I was animating the "left"-property of ~7 elements, with some opacity- and shadow-properties used in my whole page. I decided to switch to jQuery.animate, which sadly didn't improve the performance at all. My CPU (i7) was still at ~9-15% while displaying the page, several tricks (translateZ, etc) didn't really improve the performance either - while having my layout messed up (some absolute-positioned elements were involved, ouch!).

Then I stumbled upon this wonderful extension: http://playground.benbarnett.net/jquery-animate-enhanced/

I simply referenced the .js-file, didn't make a single change at the jQuery transitions, and my CPU usage is now 1-2% on the very same page.

My recommendation: when facing CPU issues using CSS3 transitions, switch to jQuery + the animate-enhanced-plugin.

---

You can also use this on any of the following class elements where you want to use GPU instead of CPU

.no-cpu {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
}

<element class="event_indicator no-cpu">animation...</element >

참고URL : https://stackoverflow.com/questions/13176746/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way