js中用事實證明cssText性能高的問題
更新時間：2011年03月13日 23:49:29 作者：
首先要感謝 EtherDream 的不同觀點，在 巧用cssText屬性批量操作樣式 一篇中由于他的質(zhì)疑態(tài)度使我做了進(jìn)一步的測試。
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>事實證明cssText在多數(shù)瀏覽器中性能較高</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 使用以下三行代碼
復(fù)制代碼 代碼如下:
ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';
測試2 使用cssText一行搞定
復(fù)制代碼 代碼如下:
sty.cssText = 'width:50px;height:50px;background-color:red;';
測試1，測試2都分別添加1000個div到頁面上。
測試1 使用以下三行代碼
復(fù)制代碼 代碼如下:
ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';
測試2 使用cssText一行搞定
復(fù)制代碼 代碼如下:
sty.cssText = 'width:50px;height:50px;background-color:red;';
測試代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
如何使用moment.js獲取本周、前n周、后n周開始結(jié)束日期及動態(tài)計算周數(shù)
使用了momentjs之后發(fā)現(xiàn)這個日期處理控件實在是太強(qiáng)大了,下面這篇文章主要給大家介紹了關(guān)于如何使用moment.js獲取本周、前n周、后n周開始結(jié)束日期及動態(tài)計算周數(shù)的相關(guān)資料,需要的朋友可以參考下2022-09-09
下面小編就為大家分享一篇js 取消頁面可以選中文字的功能方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
本篇文章主要是對JS控件ASP.NET的treeview控件全選或者取消的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
利用JavaScript實現(xiàn)簡單的網(wǎng)頁時鐘
這篇文章主要介紹了利用JavaScript實現(xiàn)簡單的網(wǎng)頁時鐘，主要使用了js的日期對象,實現(xiàn)的時候先創(chuàng)建一個日期對象，并進(jìn)行網(wǎng)頁布局,對時間獲取之后將時間填入對應(yīng)的標(biāo)簽內(nèi)。然后使用多線程實現(xiàn)時鐘的變動,需要的朋友可以參考一下2022-02-02
最近做了小項目，項目需要只顯示用戶的姓名和手機(jī)號開頭跟結(jié)尾，其他部分用*號代替，下面小編給大家分享一段簡單的代碼，需要的朋友跟隨腳本之家小編一起看看吧2018-07-07
這篇文章主要介紹了js控制頁面的全屏展示和退出全屏顯示的方法,實例分析了javascript控制頁面全屏效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript變量作用域，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
仿服務(wù)器端腳本方式的JS模板實現(xiàn)方法...2007-04-04
本篇文章主要介紹了webpack引入eslint配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
javascript下對于事件、事件流、事件觸發(fā)的順序隨便說說
向同一個標(biāo)簽 動態(tài)的添加事件是 執(zhí)行的順序在ie和其他非ie內(nèi)核的瀏覽器有所不同 ie是“先進(jìn)先出 ” 就是最先添加的最先執(zhí)行，其他非ie內(nèi)核的瀏覽器是 “先進(jìn)后出”，就是 最后添加的事件 先執(zhí)行。2010-07-07