高性能JavaScript DOM编程
2015-08-08 13:41
489 查看
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高。因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上。我们不可能不用DOM的接口,那么,怎样才能提高程序的效率?
当然最坏的情况是在循环中访问或者修改元素,看下面两段代码:
结果第一次运行的时间居然是第二次的千倍!(chrome 版本 44.0.2403.130 m)
第一段代码的问题在于,每次循环迭代,该元素都会被访问两次:一次读取innerHTML的值,另一次重写它,也就是说,每次循环都在过桥(重排和重绘将在下一篇讲解)!结果充分表明,访问DOM的次数越多,代码的运行速度越慢。因此,能减少DOM访问的次数则尽量减少,尽量留在ECMAScript这端处理。
而这正是低效之源!很简单,跟数组的优化操作一样,缓存个length变量就ok了(读取一个集合的length比读取一个普通数组的lengh要慢很多,因为每次都要查询):
我们看看性能提升能有多少?
当集合的长度大的时候(demo是1000),性能提升还是很明显的。
而《高性能JavaScript》提出了另一个优化策略,它指出,“由于遍历数组比遍历集合快,因此如果先将集合元素拷贝到数组中,那么访问它的属性会更快”,经过测试,并没有很好地发现这个规律,所以还是不要多此一举了,测试代码如下:(有疑义欢迎与我交流探讨)
2015-08-24 update:这里我的理解有一个误区,其实应该不算拷贝数组的时间,而纯粹比较数组的访问时间和html集合的访问时间,感谢尝试爱上编程指出~
本节的最后介绍两个原生DOM方法,
但是因为它是类似CSS的选择方法,所以在做组合选择的时候,效率会提升,又方便。比如做如下的组合查询:
1、DOM访问与修改
访问DOM元素是有代价的(“过桥费”你懂的),修改元素代价更是昂贵,因为它会导致浏览器重新计算页面的几何变化(重排和重绘)。当然最坏的情况是在循环中访问或者修改元素,看下面两段代码:
var times = 15000; // code1 console.time(1); for(var i = 0; i < times; i++) { document.getElementById('myDiv1').innerHTML += 'a'; } console.timeEnd(1); // code2 console.time(2); var str = ''; for(var i = 0; i < times; i++) { str += 'a'; } document.getElementById('myDiv2').innerHTML = str; console.timeEnd(2);
结果第一次运行的时间居然是第二次的千倍!(chrome 版本 44.0.2403.130 m)
1: 2846.700ms 2: 1.046ms
第一段代码的问题在于,每次循环迭代,该元素都会被访问两次:一次读取innerHTML的值,另一次重写它,也就是说,每次循环都在过桥(重排和重绘将在下一篇讲解)!结果充分表明,访问DOM的次数越多,代码的运行速度越慢。因此,能减少DOM访问的次数则尽量减少,尽量留在ECMAScript这端处理。
2、HTML集合 & 遍历DOM
操作DOM另一个耗能点就是遍历DOM,一般我们会收集一个HTML集合,比如用getElementsByTagName(),或者用
document.links等,我想大家对此都不陌生。收集的结果是一个类似数组的集合,它处于一种“实时状态”实时存在,这意味着当底层文档对象更新时,它也会自动更新。怎么讲?很简单举个栗子:
<body> <ul id='fruit'> <li> apple </li> <li> orange </li> <li> banana </li> </ul> </body> <script type="text/javascript"> var lis = document.getElementsByTagName('li'); var peach = document.createElement('li'); peach.innerHTML = 'peach'; document.getElementById('fruit').appendChild(peach); console.log(lis.length); // 4 </script>
而这正是低效之源!很简单,跟数组的优化操作一样,缓存个length变量就ok了(读取一个集合的length比读取一个普通数组的lengh要慢很多,因为每次都要查询):
console.time(0); var lis0 = document.getElementsByTagName('li'); var str0 = ''; for(var i = 0; i < lis0.length; i++) { str0 += lis0[i].innerHTML; } console.timeEnd(0); console.time(1); var lis1 = document.getElementsByTagName('li'); var str1 = ''; for(var i = 0, len = lis1.length; i < len; i++) { str1 += lis1[i].innerHTML; } console.timeEnd(1);
我们看看性能提升能有多少?
0: 0.974ms 1: 0.664ms
当集合的长度大的时候(demo是1000),性能提升还是很明显的。
而《高性能JavaScript》提出了另一个优化策略,它指出,“由于遍历数组比遍历集合快,因此如果先将集合元素拷贝到数组中,那么访问它的属性会更快”,经过测试,并没有很好地发现这个规律,所以还是不要多此一举了,测试代码如下:(有疑义欢迎与我交流探讨)
console.time(1); var lis1 = document.getElementsByTagName('li'); var str1 = ''; for(var i = 0, len = lis1.length; i < len; i++) { str1 += lis1[i].innerHTML; } console.timeEnd(1); console.time(2); var lis2 = document.getElementsByTagName('li'); var a = []; for(var i = 0, len = lis2.length; i < len; i++) a[i] = lis2[i]; var str2 = ''; for(var i = 0, len = a.length; i < len; i++) { str2 += a[i].innerHTML; } console.timeEnd(2);
2015-08-24 update:这里我的理解有一个误区,其实应该不算拷贝数组的时间,而纯粹比较数组的访问时间和html集合的访问时间,感谢尝试爱上编程指出~
本节的最后介绍两个原生DOM方法,
querySelector()和
querySelectorAll(),相信大家都不陌生,后者返回一个数组(注意,它们的返回值不像HTML集合一样会动态变化),前者返回匹配的第一个元素。好吧,其实并不是所有时候它的性能都优于前者的HTML集合遍历。
console.time(1); var lis1 = document.getElementsByTagName('li'); console.timeEnd(1); console.time(2); var lis2 = document.querySelectorAll('li'); console.timeEnd(2); // 1: 0.038ms // 2: 3.957ms
但是因为它是类似CSS的选择方法,所以在做组合选择的时候,效率会提升,又方便。比如做如下的组合查询:
var elements = document.querySelectorAll('#menu a'); var elements = document.querySelectorAll('div.warning, div.notice');
相关文章推荐
- 如何使用Createjs来编写HTML5游戏(六)完成一个简单的打飞机游戏(上)
- 最简单简洁高效的Json数据解析
- secure crt js script /jaca script for secure crt
- JavaScript学习笔记——对象知识点
- js中三种时间循环的方法
- 【BOM操作】JavaScript中的event对象之总结
- Errors occurred during the build. Errors running builder 'JavaScript Validator' on project
- JSR 303 - Bean Validation 介绍及最佳实践
- JS小结
- js模块化开发
- js 调用打印机(可清除页眉页脚)
- 如何调试Javascript代码
- JSON.stringify可以输出格式化的JSON字符串
- 利用 Console 来学习、调试JavaScript
- js 事件
- JS学习笔记(五):关于$(function(){});里面的函数不执行问题
- js 时间戳转为日期
- JS拖动div的原理
- 原生JS焦点轮播图实现
- javascript 调用其他页面的js函数或变量的脚本