|
<!DOCTYPE HTML> 02 <html> 03 <head> 04 <meta charset="gbk"> 05 <title>事实证明cssText在多数浏览器中性能较高</title> 06 </head> 07 <body> 08 <input type="button" value="测试1" onclick="test1()"/> || 09 <input type="button" value="测试2" onclick="test2()"/> 10 <div id="container"></div> 11 <script> 12 13 var container = document.getElementById('container'); 14 function appendElement(){ 15 var ary = []; 16 container.innerHTML = ''; 17 for(var i=0;i<=2000;i++){ 18 var div = document.createElement('div'); 19 ary.push(div); 20 container.appendChild(div); 21 } 22 return ary; 23 } 24 function test1(){ 25 var ary = appendElement(); 26 var d1 = new Date; 27 for(var j=0;j<ary.length;j++){ 28 var sty = ary[j].style; 29 sty.width = '50px'; 30 sty.height = '50px'; 31 sty.backgroundColor = 'gold'; 32 } 33 var d2 = new Date; 34 alert('耗时：' + (d2-d1)); 35 } 36 function test2(){ 37 var ary = appendElement(); 38 var d1 = new Date; 39 for(var j=0;j<ary.length;j++){ 40 var sty = ary[j].style; 41 sty.cssText = 'width:50px;height:50px;background-color:red;'; 42 } 43 var d2 = new Date; 44 alert('耗时：' + (d2-d1)); 45 } 46 </script> 47 </body> 48 </html> 测试1，测试2都分别添加2000个div到页面上。 测试1 使用以下三行代码 view sourceprint?1 sty.width = '50px'; 2 sty.height = '50px'; 3 sty.backgroundColor = 'gold'; 测试2 使用cssText一行搞定 view sourceprint?1 sty.cssText = 'width:50px;height:50px;background-color:red;'; 也许你会和我一样听说或认为cssText只reflow一次，相对测试1（reflow 3次）页面渲染性能更高些。事实的确是这样，看测试结果。 IE6 IE7 IE8 IE9 Firefox Chrome Safari Opera 以上可以看出所有浏览器中当操作多个样式时style.cssText效率还是高于style.width/height/background-color。如果把数量由2000改为5000的话效果将更明显。因此当操作多个样式时更推荐使用cssText。当然以上只是记录一次测试结果，你可以多试两次。为保证每次点击测试的单一性，建议每测一次后刷新下页面。 从以上数据我们可以得到以下结果： 1，IE随着版本的提高，两者的效率越来越接近。 2，Firefox两者的性能差异较大。 3，Chrome/Safari/Opera中的两者性能差异较小，Opera中偶尔测试2的效率要低于测试1。 4，无论测试1，测试2。Firefox的效率都要低于其他浏览器很多，甚至包括IE6。这让人大跌眼镜。 |