高性能JavaScript DOM编程

时间 2019-11-18

标签高性能 javascript dom 编程栏目 JavaScript 繁體版

原文原文链接

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

一、DOM访问与修改

访问DOM元素是有代价的（“过桥费”你懂的），修改元素代价更是昂贵，由于它会致使浏览器从新计算页面的几何变化（重排和重绘）。html

固然最坏的状况是在循环中访问或者修改元素，看下面两段代码：java

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

1: 2846.700ms
2: 1.046ms

第一段代码的问题在于，每次循环迭代，该元素都会被访问两次：一次读取innerHTML的值，另外一次重写它，也就是说，每次循环都在过桥（重排和重绘将在下一篇讲解）！结果充分代表，访问DOM的次数越多，代码的运行速度越慢。所以，能减小DOM访问的次数则尽可能减小，尽可能留在ECMAScript这端处理。编程

二、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），性能提高仍是很明显的。app

而《高性能JavaScript》提出了另外一个优化策略，它指出，“因为遍历数组比遍历集合快，所以若是先将集合元素拷贝到数组中，那么访问它的属性会更快”，通过测试，并无很好地发现这个规律，因此仍是不要画蛇添足了，测试代码以下：（有疑义欢迎与我交流探讨）dom

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