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

时间:2010-11-22 11:22:34

标签: html css performance browser svg

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

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

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

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

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

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

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

    感谢您的帮助!

4 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

如果存在显着差异,我会感到非常惊讶(如果有任何重要的话,我会感到非常惊讶),但是如果有一个,那么它将会在IE中那么长。

也就是说,您正在测试的条件是如此优势,以至于我不认为您应该滥用您的标记,以便在内联更快的情况下获得从小到小的性能优势。基于类的CSS对于开发和维护以及语义的目的来说是无法更好的,你应该不惜一切代价避免使用内联样式。

答案 2 :(得分:0)

如果你说,每个节点都是在JavaScript循环中创建的,那么对浏览器性能(JavaScript Engine)的要求是不是已经很高了呢?

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

我不确定我是否完全正确,只是一种意见。

答案 3 :(得分:0)

在比较结果后,我会坚持使用CSS-in-JS解决方案,我尝试了很多,最后使用这个库:

https://github.com/cssobj/cssobj

它从JS创建和更新CSS规则,并且它的规模很小。