导致高cpu使用率的Javascript动画

我正在使用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多个场景

虽然我很欣赏它将是相当处理器密集型的，但它的使用方式似乎比预期的要多，并降低了我的机器速度

---

这里有任何明显的影响性能的因素吗？

您看到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);

下面是一些文章，解释了为什么使用变换与使用

顶部

、

右侧

、

底部

、或

左侧

设置动画效果更好

---

设置动画时，最好将动画属性保持为变换和不透明度，以便它们在自己的图层上渲染，提供更好的性能，减少噪音。

您能否更具体地说明希望从中获得什么？这部动画很老套吗？慢？等请指定您要查找的内容。在您的站点上运行javascript配置文件，它将提供一些关于导致CPU使用率高的函数的相当详细的信息。以下是Chrome的profiler的链接：实际动画要复杂得多，大约有100多个场景。-这将极大地影响性能。感谢dev-tools-profiler链接，我将对此进行研究。动画运行正常，我希望降低cpu使用率。我认为大量的场景与此有关。