高性能WEB开发:DOM编程

Posted 古兰精

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高性能WEB开发:DOM编程相关的知识,希望对你有一定的参考价值。

  我们知道,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);

  结果第一次运行的时间居然是第二次的千倍!

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要慢很多,因为每次都要查询)。

var lis0 = document.getElementsByTagName(li);
var str0 = ‘‘;
for(var i = 0; i < lis0.length; i++) { 
    str0 += lis0[i].innerHTML;
}

var lis1 = document.getElementsByTagName(li);
var str1 = ‘‘;
for(var i = 0, len = lis1.length; i < len; i++) { 
    str1 += lis1[i].innerHTML;
}

  我们看看性能提升能有多少?1: 0.974ms        2: 0.664ms

  当集合的长度大的时候,性能提升还是很明显的。

3、最后介绍两个原生DOM方法,querySelector()和querySelectorAll()

  相信大家都不陌生,前者返回一个数组(注意,它们的返回值不像HTML集合一样会动态变化),后者返回匹配的第一个元素。好吧,其实并不是所有时候它的性能都优于前者的HTML集合遍历。

var lis1 = document.getElementsByTagName(li);
var lis2 = document.querySelectorAll(li);
// 1: 0.038ms    
// 2: 3.957ms

  但是因为它是类似CSS的选择方法,所以在做组合选择的时候,效率会提升,又方便。比如做如下的组合查询:

var elements = document.querySelectorAll(#menu a);
var elements = document.querySelectorAll(div.warning,div.notice);

 

以上是关于高性能WEB开发:DOM编程的主要内容,如果未能解决你的问题,请参考以下文章

你可能不知道的JavaScript代码片段和技巧(下)

你可能不知道的JavaScript代码片段和技巧(上)

操作DOM会影响WEB应用的性能

DOM编程的性能问题

电子书 JavaScript DOM编程艺术.pdf

react性能优化