Javascript动态改变样式表性能测试。

最新推荐文章于 2025-12-04 17:39:28 发布

最新推荐文章于 2025-12-04 17:39:28 发布 · 74 阅读

文章标签：

本文通过一个简单的HTML页面展示了在不同浏览器环境下（Chrome、Firefox及IE8）进行大量元素样式修改时的性能差异。特别是针对Internet Explorer 8, 即使修改相同的样式也会消耗较长时间。

<html>
<style type="text/css">
.csdn_logo{width:50px;height:50px;background:url(http://csdnimg.cn/www/images/csdnindex_piclogo.gif);}
.google_logo{width:50px;height:50px;background:url(http://www.google.cn/intl/zh-CN/images/logo_cn.gif);}
</style>
<body>
<script type="text/javascript">
var table= document.createElement("table");
table.cellPadding = "0px";
table.cellSpacing = "0px";
var tr = table.insertRow(-1);
var cells = [];
for (var i = 0; i < 1000; i++) {
var td = tr.insertCell(-1);
var div = document.createElement("div");
div.className = "logo";
div.innerHTML = i;
td.appendChild(div);
cells.push(div);
}
document.body.appendChild(table);

function buttonTest_Click(sender, title) {
var tick = new Date().getTime();
for (var i = 0; i < cells.length; i++) {
//if (cells[i].className != title + "_logo") // 注意这个注释
cells[i].className = title + "_logo";
}
sender.value = title + " 花掉" + (new Date().getTime() - tick) + "毫秒";
}
</script>
<input type="button" onclick="buttonTest_Click(this, 'csdn')" value="csdn"/>
<input type="button" onclick="buttonTest_Click(this, 'google')" value="google"/>
</body>
</html>

【两个样式表切换】(来回点击两个按钮)
Chrome 3毫秒
Firefox3 22毫秒
IE8 78毫秒

【指定一样的样式】(只点击一个按钮)
Chrome 2毫秒
Firefox3 7毫秒
IE8 78毫秒（没变）

看来在IE下面赋值样式真耗时间，，，就算赋值同样的样式也花费同样的时间。。。

看来在IE环境中加这个判断有点必要：
if (cells[i].className != title + "_logo") // 注意这个注释
cells[i].className = title + "_logo";