渲染性能:样式属性或类名和样式表规则？

Question

我正在构建数据可视化,渲染性能至关重要.我的问题与沼泽标准HTML有关,虽然我碰巧使用SVG和JavaScript.

OK,一个假设的情景:说我有一个10000个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>

下载代码的性能在这里并不重要 - 我只对浏览器的渲染性能感兴趣.我也非常清楚风格属性在日常网站开发中通常不是那么有用或语义,但我在这里有一个特定的用例.

我对逻辑答案很感兴趣,但是听到任何人实际测试过这个或者读过别人的测试真的很有用(我搜索了一些信息,但没有找到具体的内容).

谢谢你的帮助!

Answer 1

从 Firefox 和 Chrome 中的初始测试来看，创建和渲染使用 classNames 的元素（而不是样式属性）的速度大约是样式属性的三倍。我对此感到非常惊讶——我不确定，但预计情况恰恰相反。