js中用事实证明cssText性能高的问题

首先要感谢 EtherDream 的不同观点,在 巧用cssText属性批量操作样式 一篇中由于他的质疑态度使我做了进一步的测试。

复制代码 代码如下:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>事实证明cssText在多数浏览器中性能较高</title>
</head>
<body>
<input type="button" value="测试1"/> ||
<input type="button" value="测试2"/>
<div></div>
<script>
var container = document.getElementById('container');
function appendElement(){
var ary = [];
container.innerHTML = '';
for(var i=0;i<=1000;i++){
var div = document.createElement('div');
ary.push(div);
container.appendChild(div);
}
return ary;
}
function test1(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';
}
var d2 = new Date;
console.log('耗时:' + (d2-d1));
}
function test2(){
var ary = appendElement();
var d1 = new Date;
for(var j=0;j<ary.length;j++){
var sty = ary[j].style;
sty.cssText = 'width:50px;height:50px;background-color:red;';
}
var d2 = new Date;
console.log('耗时:' + (d2-d1));
}
</script>
</body>
</html>


测试1,测试2都分别添加1000个div到页面上。

测试1 使用以下三行代码

复制代码 代码如下:


ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';


测试2 使用cssText一行搞定

复制代码 代码如下:


sty.cssText = 'width:50px;height:50px;background-color:red;';


测试1,测试2都分别添加1000个div到页面上。

测试1 使用以下三行代码

复制代码 代码如下:


ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';


测试2 使用cssText一行搞定

复制代码 代码如下:


sty.cssText = 'width:50px;height:50px;background-color:red;';


测试代码:


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfdjf.html