首先要感谢 EtherDream 的不同观点,在 巧用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需刷新才能执行] |