首先要感谢 EtherDream 的不同观点,在 巧用 CSSText 属性批量操作样式 一篇中由于他的质疑态度使我做了进一步的测试。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
测试 2 使用 cssText 一行搞定测试代码:
测试 1,测试 2 都分别添加 1000 个 div 到页面上。 测试 1 使用以下三行代码 测试 2 使用 cssText 一行搞定
来源: