高性能JavaScript DOM编程(1)


Posted in Javascript onAugust 11, 2015

我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高。因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上。我们不可能不用DOM的接口,那么,怎样才能提高程序的效率?

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);

本节的最后介绍两个原生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');

以上就是关于高性能JavaScript DOM编程的全部内容,希望大家可以理解,对大家的学习有所帮助。

Javascript 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
jQuery中prepend()方法使用详解
Aug 11 #Javascript
javascript实现数组中的内容随机输出
Aug 11 #Javascript
javascript弹出拖动窗口
Aug 11 #Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 #Javascript
javascript实现五星评价代码(源码下载)
Aug 11 #Javascript
jQuery的remove()方法使用详解
Aug 11 #Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
You might like
php中关于socket的系列函数总结
2015/05/18 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
2014自荐信的写作技巧
2014/01/28 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
观后感开头
2015/06/19 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书