渲染性能：样式属性或类名和样式表规则？答案

【问题标题】：Rendering performance: style attributes or classnames and stylesheet rules?渲染性能：样式属性或类名和样式表规则？
【发布时间】：2011-05-13 19:02:06
【问题描述】：

我正在构建数据可视化，渲染性能至关重要。我的问题与标准 HTML 相关，尽管我碰巧使用 SVG 和 JavaScript。

好的，假设场景：假设我有 10,000 个 DOM 节点，其中 background-color 为“red”，以及 10,000 个 DOM 节点，background-color 为“green”。每个节点都是由一个 JavaScript 循环创建的。我可以：

在每个节点上设置style属性，指定节点的background-color：<element style="background-color:red;"/>
在每个节点上设置class 属性，然后以内联样式或外部样式表引用该类：

<head><style>.foo {background-color:red;}</style></head>

<body><element class="foo"/></body>

下载代码的性能在这里并不重要——我只对浏览器的渲染性能感兴趣。我也很清楚，样式属性在日常网站开发中通常不是那么有用或语义化，但我在这里有一个特定的用例。

我我对合乎逻辑的答案感兴趣，但听听任何人实际测试过这个或阅读过其他人的测试真的很有用（我已经搜索过信息，但没有找到具体的关于这个）。

感谢您的帮助！

【问题讨论】：

【解决方案1】：

我为此创建了一个性能基准： http://jsperf.com/style-element-vs-attr

从 Firefox 和 Chrome 中的初始测试来看，使用类名而不是样式属性创建和渲染元素的速度似乎快了大约三倍。我对此感到非常惊讶 - 我不确定，但预期会相反。

【讨论】：

我对这些统计数据持怀疑态度，因为它只是衡量 javaScript 引擎完成所需的时间，而不是渲染图形可能花费的时间。无论如何，浏览器通常都会限制渲染帧。因此，即使 JSPerf 可能会报告一百万次操作，浏览器的渲染速度也可能不会超过每秒 60 帧。换句话说，浏览器将丢弃发生得很快的事件，而不是渲染它们，如果有很多图形正在发生，因为用户无论如何都不会注意到。这都会影响性能结果在图形渲染上的意义。
在我的测试中，使用浏览器分析器，结果在 5000 次操作中可以忽略不计，尽管直接设置属性可能比使用样式（直观）、使用 IE 和 Chrome 稍微快一些。这是一个不科学且不确定的测试，但我会接受。
为什么会令人惊讶？浏览器只处理一次 className CSS 规则，而每次遇到属性中的样式时都必须处理一次。此外，浏览器可能会将已处理的 CSS 文件（如果您使用外部 CSS 文件）保存在缓存中，并且重复视图样式计算可能会快得多。

【解决方案2】：

如果存在显着差异，我会感到非常惊讶（如果它很重要，我会感到非常惊讶），但如果有的话，它会在 IE 中，所以就这样吧。

也就是说，您正在测试的条件是如此极端，以至于如果内联更快，我认为您不应该滥用标记来获得小到微不足道的性能优势。基于类的 CSS 在开发、维护和语义方面要好得多，您应该不惜一切代价避免使用内联样式。

【讨论】：

【解决方案3】：

如果你说每个节点都是在一个 JavaScript 循环中创建的，那不是已经对浏览器性能（JavaScript 引擎）提出了要求吗？

不知何故，通过 JavaScript 本身设置颜色会稍微舒服一些。比如说$(this).css('color','red');，而不是添加一个类，该类需要浏览器在脚本运行时查找可用的计算样式，然后渲染/重新渲染颜色变化。

我不确定我是否完全正确，只是一个意见。

【讨论】：

【解决方案4】：

比较结果后，我会坚持使用CSS-in-JS解决方案，我尝试了很多，最后还是使用了这个lib：

它是从 JS 中创建和更新 CSS 规则，而且体积很小。

【讨论】：