js中用事實(shí)證明cssText性能高的問(wèn)題
更新時(shí)間：2011年03月13日 23:49:29 作者：
首先要感謝 EtherDream 的不同觀點(diǎn)，在 巧用cssText屬性批量操作樣式 一篇中由于他的質(zhì)疑態(tài)度使我做了進(jìn)一步的測(cè)試。
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>事實(shí)證明cssText在多數(shù)瀏覽器中性能較高</title>
</head>
<body>
<input type="button" value="測(cè)試1" onclick="test1()"/> ||
<input type="button" value="測(cè)試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('耗時(shí)：' + (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('耗時(shí)：' + (d2-d1));
}
</script>
</body>
</html>
測(cè)試1，測(cè)試2都分別添加1000個(gè)div到頁(yè)面上。
測(cè)試1 使用以下三行代碼
復(fù)制代碼 代碼如下:
ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';
測(cè)試2 使用cssText一行搞定
復(fù)制代碼 代碼如下:
sty.cssText = 'width:50px;height:50px;background-color:red;';
測(cè)試1，測(cè)試2都分別添加1000個(gè)div到頁(yè)面上。
測(cè)試1 使用以下三行代碼
復(fù)制代碼 代碼如下:
ary[j].style.width = '50px';
ary[j].style.height = '50px';
ary[j].style.backgroundColor = 'gold';
測(cè)試2 使用cssText一行搞定
復(fù)制代碼 代碼如下:
sty.cssText = 'width:50px;height:50px;background-color:red;';
測(cè)試代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
easyui combogrid實(shí)現(xiàn)本地模糊搜索過(guò)濾多列
本篇文章主要介紹了easyui combogrid實(shí)現(xiàn)本地模糊搜索過(guò)濾多列，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
下面小編就為大家?guī)?lái)一篇js數(shù)字舍入誤差以及解決方法(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
javascript實(shí)現(xiàn)動(dòng)態(tài)加載CSS
最近在做自己的小框架的按需加載模塊，那么就需要做到異步動(dòng)態(tài)加載css文件。仔細(xì)研究了一番，得到了如下解決方案，分享給大家。2015-01-01
JSONP是JSON with padding(填充式JSON或參數(shù)式JSON)的簡(jiǎn)寫，是應(yīng)用JSON的一種新方法，常用于務(wù)器與客戶端跨源通信，在后來(lái)的Web服務(wù)中非常流行。本文將詳細(xì)介紹JSONP，下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript實(shí)現(xiàn)消息對(duì)話框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)消息對(duì)話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
JS生成隨機(jī)數(shù)的多種方法匯總(不同范圍、類型的隨機(jī)數(shù))
js產(chǎn)生隨機(jī)數(shù)通常是使用javascript的Math.random()函數(shù),下面這篇文章主要給大家介紹了關(guān)于JS生成隨機(jī)數(shù)的多種方法(不同范圍、類型的隨機(jī)數(shù))的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
本文主要介紹了js判斷PC端與移動(dòng)端跳轉(zhuǎn)的方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
flash javascript之間的通訊方法小結(jié)
不用getURL和fsCommand方法個(gè)國(guó)外的通信方法，值得一看2008-12-12
這篇文章給大家詳細(xì)介紹了Promise中的then鏈機(jī)制用法,每一次 .then都會(huì)返回一個(gè)新的promise實(shí)例,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析
這篇文章主要介紹了JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο罄^承功能的5種常見實(shí)現(xiàn)方法原理與操作技巧,需要的朋友可以參考下2018-07-07