Dom编程优化

文章由LinuxBoy分享于2019-04-01 06:04:39热评（68）

Dom编程优化

对Dom的访问代价是昂贵，在富网页应用中通常是性能的瓶颈，所以对Dom的优化十分重要。

一.访问和修改Dom元素

浏览器通常要求JavaScript和Dom实现保持独立的。例如，在Internet Explorer 中，被称为JScript的JavaScript 实现位于库文件jscript.dll 中，而DOM 实现位于另一个库mshtml.dll（内部代号Trident）。所以用JavaScript访问Dom元素是需要一定的代价。人们通常这样形容Dom访问，javaScript和Dom相当于两个独立的小岛，这两个小岛中间有座桥连起来，JavaScript每次访问Dom都要过一次桥，过桥就要收取一定的过桥费。所以要尽量减少访问Dom的次数，那么如何做到呢？请看下面的例子。

　　function innerHTMLLoop() {
　　　　for (var count = 0; count < 15000; count++) {
　　　　　　document.getElementById('here').innerHTML += 'a';
　　　　}
　　}

上面这个函数的作用是对id是here这个Dom节点，进行了15000次修改，在这个函数中，对Dom节点进行了15000次访问。再看下面的函数。

　　function innerHTMLLoop() {

var text="";
　　　　for (var count = 0; count < 15000; count++) {
　　　　　　 text+= 'a';
　　　　}

document.getElementById('here').innerHTML=text;
　　}

上面这个函数和第一个函数实现的是完全一样的功能，但是它对Dom的访问只有一次，性能是大大提高。

现在来比较一下document.createElement和innerHTML。

document.createElement是每次创建一个节点，然后加入到父节点中。innerHTML是用字符串拼接成一系列Dom节点然后在插入到目标节点中。如果在一个性能苛刻的操作中更新一大块HTML 页面，innerHTML 在大多数浏览器中执行更快。但对于大多数日常操作而言，其差异并不大，所以你应当根据代码可读性，可维护性，团队习惯，代码风格来综合决定采用哪种方法。

另外HTML集合用于存放Dom节点类数组对象，例如document.getElementsByTagName,getElementsByClass等函数得到的就是集合。它的使用也是非常昂贵的。考虑下面的例子

　　var alldivs = document.getElementsByTagName_r('div');
　　for (var i = 0; i < alldivs.length; i++) {
　　　　document.body.appendChild(document.createElement('div'))
　　}

上面的例子表面上是想倍增div的数量，但实际上是个死循环，因为div的长度是动态变化的，也就是说alldivs.length不是一个常量，它会每次根据div的数量变化，这样也就是每次要访问Dom节点，我们之前说过访问Dom的代价是昂贵的。所以最好的方法是将length用一个变量缓存起来，例如len=alldivs.length。

二.重绘和重排

我们都知道在页面刚加载的时候，浏览器会进行页面渲染，其实这就是一次绘制和排列的过程。绘制的是页面，排列的是Dom节点，一般来说绘制是根据color，background，opacity等css属性，而排列则根据width,height,margin,padding等能影响页面Dom元素位置变换的css属性。那么既然知道了什么是重绘和重排，就应该知道什么时候会重会和重排。也就是当你改变某些css属性时。

一般来说重排的影响是远大于重绘的，重排时浏览器会重新计算所有元素的位置和尺寸，重新排列。这个过程可以说是相当耗时间的，所以要尽量避免重排。考虑下面例子

　　var el = document.getElementById('mydiv');
　　el.style.borderLeft = '1px';
　　el.style.borderRight = '2px';
　　el.style.padding = '5px';

上面例子三次改变了el的css属性，而这三次都产生的重排。再看下面代码

var el = document.getElementById('mydiv');

el.style.cssText="border-left:1px;border-right：2px;padding:5px";

上面代码实现的是和第一例子一样的功能，但是它只产生的一次重排，大大提高了性能。

三.事件托管

　　当页面中存在大量元素，而且每个元素有一个或多个事件句柄与之挂接（例如onclick）时，可能会影响性能。连接每个句柄都是有代价的，无论其形式是加重了页面负担（更多的页面标记和JavaScript 代码）还是表现在运行期的运行时间上。所以事件托管是很有用的。

每个事件发生时会经历捕获，到达目标，冒泡，三个阶段。例如：

　当用户点击了“menu #1”链接，点击事件首先被<a>元素收到。然后它沿着DOM 树冒泡，被<li>元素收到，然后是<ul>，接着是<div>，等等，一直到达文档的顶层，甚至window。如果需要在每个li上加监听事件，那么可以加到ul上，因为每次点击li都会冒泡到ul上。

总结：

DOM 访问和操作是现代网页应用中很重要的一部分。但每次你通过桥梁从ECMAScript 岛到达DOM 岛时，都会被收取“过桥费”。为减少DOM 编程中的性能损失，请牢记以下几点：

最小化DOM 访问，在JavaScript 端做尽可能多的事情

在反复访问的地方使用局部变量存放DOM 引用.　　

　小心地处理HTML 集合，因为他们表现出“存在性”，总是对底层文档重新查询。将集合的length 属性缓存到一个变量中，在迭代中使用这个变量。如果经常操作这个集合，可以将集合拷贝到数组中。
注意重绘和重排版；批量修改风格，离线操作DOM 树，缓存并减少对布局信息的访问。

使用事件托管技术最小化事件句柄数量。

本文永久更新链接地址：

推荐文章：

Dom编程优化