在DOM中動畫深入元素會不會影響性能？

幫助瀏覽器渲染

瀏覽器管理着渲染樹，元素互相依賴。如果動畫元素深入DOM中，則其他元素取決於其幾何和位置。即使動畫實際上不會移動它們，瀏覽器也必須執行附加計算。

爲了使動畫消耗更少的CPU（並且更平滑），請勿在DOM中深入使用動畫效果元素。

這是指的是香草JS--它是過時的建議嗎？ jQuery有這個問題嗎？還是它做了一些聰明的事情來避免它？

2014-09-13 Ben

我相信現在的瀏覽器仍然如此，以及現在使用CSS進行動畫製作的更多「技巧」：http：//www.html5rocks.com/en/tutorials/speed/high-performance-animations/ – 2014-09-13 07:11:54

還要記住，jQuery *是* vanilla JS（內部）。這只是一個圖書館。 – 2014-09-13 07:12:56

@Derek謝謝。我想知道jQuery是否採取了一些措施來緩解這種情況，也許是通過從DOM中取出動畫來爲它們設置動畫效果，或者試圖減少更改佈局的需要（例如，將CSS更改爲背景色）。 – Ben 2014-09-13 08:26:23

它確實有道理。通過改變一個元素，瀏覽器將不得不驗證這個改變是否影響到「鏈條上的任何事情」。您可以通過使該對象獨立於佈局來繞過這一點。您可以將其定位爲絕對或動畫變換適當性。在這種情況下，動畫元素不應該影響頁面上的任何內容。

是的，jQuery有這個問題。如果你想要執行動畫，你應該使用CSS或Native element.animate（如果可用）：http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36

2014-09-13 12:26:02 Mircea

回答