作业帮HTML语言教程:用事实证明cssText性能高
来源：学生作业帮助网 编辑：作业帮 时间：2024/04/27 21:54:27 HTML
HTML>
02
03
04
05
06
07
08 ||
09
10
11
47
48
测试1，测试2都分别添加2000个div到页面上。
测试1 使用以下三行代码
view sourceprint?1 sty.width = '50px';
2 sty.height = '50px';
3 sty.backgroundColor = 'gold';
测试2 使用cssText一行搞定
view sourceprint?1 sty.cssText = 'width:50px;height:50px;background-color:red;';
也许你会和我一样听说或认为cssText只reflow一次，相对测试1（reflow 3次）页面渲染性能更高些。事实的确是这样，看测试结果。
IE6 IE7 IE8 IE9 Firefox Chrome Safari Opera
测试1 75 68 28 32 857 31 26 20
测试2 47 39 25 24 308 27 17 21
以上可以看出所有浏览器中当操作多个样式时style.cssText效率还是高于style.width/height/background-color。如果把数量由2000改为5000的话效果将更明显。因此当操作多个样式时更推荐使用cssText。当然以上只是记录一次测试结果，你可以多试两次。为保证每次点击测试的单一性，建议每测一次后刷新下页面。
从以上数据我们可以得到以下结果：
1，IE随着版本的提高，两者的效率越来越接近。
2，Firefox两者的性能差异较大。
3，Chrome/Safari/Opera中的两者性能差异较小，Opera中偶尔测试2的效率要低于测试1。
4，无论测试1，测试2。Firefox的效率都要低于其他浏览器很多，甚至包括IE6。这让人大跌眼镜。
HTML