通过 javascript 性能改变 CSS 样式答案

【问题标题】：CSS Style change through javascript performance通过 javascript 性能改变 CSS 样式
【发布时间】：2016-01-19 19:45:47
【问题描述】：

我正在使用纯 javascript（没有 jquery 或任何其他框架）来制作动画。哪个更优化？为过渡创建类，例如：

CSS 类：

    .all-div-has-this-class { transition: all 1s; }
    .class1 { left: 0; }
    .class2 { left: 30px; }

JavaScript：

    testdiv.className += " class1";
    testdiv.className += " class2";

或者只是在 javascript 中这样做 => 在 css 中初始化 testdiv 位置，然后在 js 代码中初始化 testdiv.style.left = "30px";？

顺便说一下，这些都是在setTimeout函数中根据时间设置属性。此外，它只能是 javascript，没有任何 jquery 或任何其他专门用于动画的框架。

【问题讨论】：

【解决方案1】：

Dom 操作一如既往的繁重，特别是如果你想用 JS 做很多动画，这就是为什么我们有 CSS anamition，它使用浏览器内置函数来渲染动画。

js代码只将assgin css类赋给dom，规则由浏览器根据css类计算

【讨论】：

【解决方案2】：

对于所有浏览器和所有硬件都不会有一个通用的答案，但是这个answer 做了一个很棒的实验，使用 javascript 更改 10000 个元素的文本对齐来修改.style 与使用 CSS。

总结一下你可以看到 CSS 的显着毫秒数几乎是原来的两倍：

【讨论】：