js中用事实证明cssText性能高的问题_javascript技巧_动视

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

2020-11-27 20:58:27 责编:小采

代码如下:

事实证明cssText在多数浏览器中性能较高

||

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;jary[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;jvar sty = ary[j].style;
sty.cssText = 'width:50px;height:50px;background-color:red;';
}
var d2 = new Date;
console.log('耗时：' + (d2-d1));
}

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

测试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;';

测试代码：
<p>点击这里可以直接测试：</p> <input onclick="test1()" value="测试1" type="button" /> || <input onclick="test2()" value="测试2" type="button" /> || <input onclick="stop()" value="停止测试" type="button" /> //
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

下载本文

显示全文

全部频道