用javascript赋值优化动画答案

【问题标题】：Optimize animation with javascript assigning value用javascript赋值优化动画
【发布时间】：2017-08-30 02:56:36
【问题描述】：

我正在网站中构建具有大量效果和动画的动画。我正在尝试优化这些动画的效率，因为其中一些对于低 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});

它是否使用了一些优化？

【问题讨论】：

标签： javascript jquery html animation

【解决方案1】：

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

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

【讨论】：

由于某种原因，使用 translate 操作被移动到 GPU 并且由于某种原因，看起来使用 GPU 比使用 CPU 动画可以更快地达到限制。例如：使用 jquery 为数百个元素设置动画效果（不流畅，但可以），但是使用 GPU 为相同的数百个元素设置动画它会破坏一切，一些动画开始，其他失去同步......
您可能会导致大量重绘，您可以展示其余代码吗？
代码现在乱七八糟，我在顶部巨大的动画内empresasite.com.br运行它。

【解决方案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 -> 这是使用第三种解决方案

2) https://www.empresasite.com.br/?q=principal -> 这是使用第一种解决方案

在拥有大量资源的计算机上，您可能看不到任何差异，但如果您在内存为 4GB 或更少的计算机上运行此程序，您会看到很大的影响！

希望这对没有流畅动画的人有所帮助！

【讨论】：