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

复制代码代码如下: <!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需刷新才能执行]

复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>iframe的onload在Chrome/Opera中执行两次</title> </head> <body> <script> var ifr = document.createElement('iframe'); ifr.>>>详细阅读

本文标题：js中用事实证明cssText性能高的问题

地址：http://www.17bianji.com/kaifa2/JS/24803.html

1/2 1