復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>事實證明cssText在多數浏覽器中性能較高</title>
</head>
<body>
<input type="button" value="測試1" onclick="test1()"/> ||
<input type="button" value="測試2" onclick="test2()"/>
<div id="container"></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需刷新才能執行]