引起高CPU使用率的Javascript動畫

我正在使用ScrollMagic庫和GreenSock動畫平臺來創建單頁滾動動畫。引起高CPU使用率的Javascript動畫

這裏是動畫的代碼示例：

// 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多個場景。

雖然我很欣賞這將是相當處理器密集型，它似乎使用超過預期的方式，並放慢我的機器。

這裏有什麼明顯的會影響性能？

來源

2015-09-04 BenHerb

你能更具體地說明你究竟想從中得到什麼？動畫clippy？慢？等等？請指定您要查找的內容。 – Blunderfest

在您的網站上運行javascript配置文件，它會提供一些相當詳細的信息，介紹導致高CPU使用率的功能。以下是Chrome探查器的鏈接：https：//developer.chrome.com/devtools/docs/cpu-profiling – user2879041

*實際的動畫要複雜得多，大約有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);

這裏有一些文章解釋了爲什麼它能夠更好地利用變換與位置top，right，bottom，或者left

Myth busting CSS animations vs Javascript動畫

Why moving elements with translate is better than posabs topleft

Jank Free

它在動畫中，讓您的動畫屬性轉換和透明度，使他們使自己的層上，並提供更好的性能，並減少JANK始終是最好的做法。

來源

2015-10-09 14:49:42