使用javascript分配值优化动画

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）从“x”中检索值。在第一个示例中，我给了MAYBE javascript分配了“=”符号链中前一个元素的值，因此它必须将“x”分配给第一个元素，然后将第一个元素的值分配给第二个元素...继续。

你知道的jQuery究竟是干什么的，当我用这个：

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

是否使用了一些优化？

Answer 1

玩弄大部分的JavaScript基准测试工具在网上后，我想出了这样的结论：

1）jQuery是所有的原生JS的解决方案我使用的更快的方法。也许Jquery使用某种优化，当你同时将很多元素应用于同一个属性时！因此，您应该依靠$(".class").css("left",x)将x值应用于数百个元素的左侧属性，这将是更快的解决方案;

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种解决方案到第3种解决方案的区别非常明显。您可以在下面的链接查看（在顶部要特别注意动画）：

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

2） - >这是使用第一个解决方案

在有很多资源的计算机，你可能看不到有差别，但如果你用的RAM小于或等于4GB运行此的计算机，你会看到一个很大的影响！

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

Answer 2

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

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