高性能JavaScript之DOM编程

我们知道。DOM是用于操作XML和HTML文档的应用程序接口，用脚本进行DOM操作的代价非常昂贵。

有个贴切的比喻。把DOM和JavaScript（这里指ECMScript）各自想象为一个岛屿，它们之间用收费桥梁连接，ECMAScript每次訪问DOM。都要途径这座桥，并交纳“过桥费”,訪问DOM的次数越多，费用也就越高。因此。推荐的做法是尽量降低过桥的次数，努力待在ECMAScript岛上。我们不可能不用DOM的接口，那么。如何才干提高程序的效率？

1、DOM訪问与改动

訪问DOM元素是有代价的（“过桥费”你懂的）。改动元素代价更是昂贵。由于它会导致浏览器又一次计算页面的几何变化（重排和重绘）。

当然最坏的情况是在循环中訪问或者改动元素，看以下两段代码：

var times = 200;

// 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: 5.538ms

2: 0.111ms

第一段代码的问题在于，每次循环迭代，该元素都会被訪问两次：一次读取innerHTML的值，还有一次重写它。也就是说。每次循环都在过桥（重排和重绘将在下一篇解说）！结果充分表明，訪问DOM的次数越多，代码的执行速度越慢。因此。能降低DOM訪问的次数则尽量降低，尽量留在ECMAScript这端处理。

2、HTML集合 & 遍历DOM

操作DOM还有一个耗能点就是遍历DOM。一般我们会收集一个HTML集合，比方用getElementsByTagName()，或者用document.links等，我想大家对此都不陌生。收集的结果是一个相似数组的集合。它处于一种“实时状态”实时存在，这意味着当底层文档对象更新时。它也会自己主动更新。怎么讲？非常easy举个栗子：

<body>

 <ul id='fruit'>

 <li> apple </li>

 <li> orange </li>

 <li> banana </li>

 <li> stabery </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>

而这正是低效之源！

非常easy，跟数组的优化操作一样，缓存个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);

后来反思了一下，意思大概是这样：

console.time(2);

var lis2 = document.getElementsByTagName('li');

var a = [];

for(var i = 0, len = lis2.length; i < len; i++)

 a[i] = lis2[i];

 str2 += a[i].innerHTML;

console.timeEnd(2);

这样确实有非常显著的区别哦：

1: 2.615ms

2: 0.164ms

3、querySelector()和querySelectorAll()

本节的最后介绍两个原生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编程的所有内容。希望大家能够理解，对大家的学习有所帮助。