导致 CPU 使用率高的 Javascript 动画答案

【问题标题】：Javascript animation causing high cpu useage导致 CPU 使用率高的 Javascript 动画
【发布时间】：2015-09-04 17:56:20
【问题描述】：

我正在使用 ScrollMagic 库和 GreenSock 动画平台来创建单页滚动动画。

下面是动画的代码示例：

// Initiate Scroll Magic
var controller = new ScrollMagic.Controller();

// This pins the main container for the duration of the animation
new ScrollMagic.Scene({
        triggerElement: "#main", triggerHook: 'onLeave', duration: 59000
    })
    .setPin("#main", {pushFollowers: true})
    .addTo(controller);

//Create scenes at specific points using the offset of the pinned conainter...
new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:1000})
    .setTween("#diseaseInitiation", 0.5, { opacity: 1}) 
    .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:1000})
    .setTween("#initialKeratinocytes", 0.5, { opacity: 1}) 
    .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:2000})
    .setTween("#initialKeratinocytes", 0.5, { top:100})
    .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:2000})
    .setTween("#diseaseInitiation", 0.5, {top: -100})
    .addTo(controller);

实际的动画要复杂得多，大约有 100 多个场景。

虽然我很欣赏它会占用大量处理器，但它似乎使用的方式比预期的要多，并且会减慢我的机器速度。

这里有什么明显会影响性能的东西吗？

【问题讨论】：

您能否更具体地说明您想从中得到什么？动画是剪辑的吗？慢的？ ETC？请指定您要查找的内容。
在您的站点上运行一个 javascript 配置文件，它将提供一些相当详细的关于导致 CPU 使用率高的函数的信息。这是 Chrome 分析器的链接：developer.chrome.com/devtools/docs/cpu-profiling
实际的动画要复杂得多，大约有100多个场景。 - 这会极大地影响性能。
感谢开发工具分析器链接，我会看看。动画运行正常，我希望降低 CPU 使用率。我认为大量的场景与它有关。

标签： javascript performance animation gsap scrollmagic

【解决方案1】：

您看到高 CPU 使用率的原因是动画 top CSS 属性。在制作动画时，使用y 而不是top 和x 而不是left 总是更好的性能。这样您就可以使用 GPU 而不是 CPU 来制作动画。

将最后两个动画从 top 更改为 y

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:2000})
.setTween("#initialKeratinocytes", 0.5, { y:100 })
.addTo(controller);

 new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:2000})
.setTween("#diseaseInitiation", 0.5, { y: -100 })
.addTo(controller);

这里有一些文章解释了为什么使用变换动画效果优于使用top、right、bottom 或left 的位置

Myth busting CSS animations vs Javascript

Why moving elements with translate is better than posabs topleft

Jank Free

最好的做法是在制作动画时将动画属性保持为变换和不透明度，以便它们在自己的图层上渲染并提供更好的性能和更少的卡顿。

【讨论】：