Question

我正在网站中制作一个包含大量效果和动画的动画。我正在尝试优化这些动画的效率，因为它们中的一些对于低CPU / RAM设备来说有点复杂。动画并不像我想要的那样平滑，你可以在这里看到https://www.empresasite.com.br

所以我在代码的很多部分都意识到这一点：

var x = 38; //this value changes every 50ms
document.getElementById("a").style.left = document.getElementById("b").style.left = document.getElementById("c").style.left = document.getElementById("d").style.left = document.getElementById("e").style.left = x + "px";

实际上它是上面的简化，我运行上面的代码至少有13个元素a = b = c = d .... m = x;，至少有4个属性（左，高，盒阴影和背景颜色）。

所以我想知道是否有更好的替代方案可以同时为多个元素/对象分配相同的值？

也许下面的代码会更快？我用它但是我没有看到动画的显着改进，也许我应该看到它？

var x = 38;
x = x + "px";
document.getElementById("a").style.left = x;
document.getElementById("b").style.left = x;
document.getElementById("c").style.left = x;
document.getElementById("d").style.left = x;
document.getElementById("e").style.left = x;

我认为上面的代码应该更快吧？我说这导致每个元素更新自己的属性（left）从＆＃34; x＆＃34;中检索值。在第一个例子中，我给了MAYBE javascript正在分配＆＃34; =＆＃34;链中前一个元素的值。签署所以它必须分配＆＃34; x＆＃34;然后将第一个元素的值分配给第二个元素......继续。

你知道jquery在我使用它的时候到底发生了什么：

$(".elements").css({left:x});

是否使用了一些优化？

Answer 1

您可以使用translate而不是修改position来提高性能。

使用您提出的jQuery变体不会有任何区别，因为您仍在修改位置left。

Answer 2

在线使用大多数javascript基准测试工具后，我得出了这个结论：

1）Jquery是我使用的所有原生js解决方案的更快方法。当你同时将同一属性应用于大量元素时，Jquery可能会使用某种优化！所以你应该依靠$(".class").css("left",x)将x值应用于数百个元素的left属性，这将是更快的解决方案;

2）第二种解决方案是将x单独应用于每个元素。例如：

var x = 38;
document.getElementById("a").style.left = x;
document.getElementById("b").style.left = x;

3）最糟糕的解决方案实际上是我在网站上使用的那个我面对的不是流畅的动画。所以避免这个：

document.getElementById("a").style.left = document.getElementById("b").style.left = ... = ... = x;

从第一个解决方案到第三个解决方案的区别非常明显。你可以在下面的链接中查看它（特别注意顶部的动画）：

1）https://www.empresasite.com.br/?q=principal&before - ＆gt;这是使用第三种解决方案

2）https://www.empresasite.com.br/?q=principal - ＆gt;这是使用第一个解决方案

在拥有大量资源的计算机中，您可能看不出有什么不同，但如果您在4GB或更低RAM的计算机上运行，您将看到很大的影响！

希望这可以帮助任何没有流畅动画的人！

使用javascript赋值来优化动画

2 个答案: