你不知的DOM编程

前言：随着vue，react, angular的流行，可能如今咱们没必要常常的操做DOM，三大框架在副交互的操做中发挥着极大地优点。由于咱们知道用脚本对DOM的操做很是昂贵，本文主要探讨常规的DOM操做中你可能不知道的知识。

浏览器中的DOM

首先，咱们来了解一下什么是DOM，他为何慢？

DOM，天生就慢

文档对象模型 （DOM）是 W3C（万维网联盟）的标准，是一个独立于语言的，用于操做XML和HTML文档的程序接口。在浏览器中，主要和HTML文档打交道，尽管DOM是个与语言无关的API，可是它在浏览器中的接口倒是用JS实现的。可是一般浏览器会把DOM和JS分开来实现，好比Chrome中的DOM实现为webkit中的webCore，但js引擎是Google本身研发的V8。既然分开了，一旦二者须要产生链接，就要付出代价。

DOM 访问与修改

前面说到JS访问DOM会产生而性能上的消耗，若是去修改DOM元素则代价更为昂贵，由于它会致使浏览器从新计算页面的几何变化。 来看两端段代码：

第一段代码定义了一个普通的变量，进行循环累加，执行事件几乎为。第二段代码，每次循环会访问两次特定的元素：第一次读取这个元素的innerHTML属性，第二次重写它。能够看到它的执行时间将近2.8s，这段脚本会一直阻塞后续的执行。
看清楚了这一点，不可贵到一个效率更高的版本：

用一个局部变量包层每次更新后的内容，等待循环结束后，一次性的写入页面（尽量的把更多的工做交给js的部分来作）。能够看到快了近2000倍。
显而易见。访问DOM的次数越多，代码的运行速度越慢，所以，通用的经验作法是：减小访问DOM的次数，把运算尽可能留给JS处理。这也是Vue或者React为何要设计virtual dom 的初衷之一：把负责的DOM模型映射成JS对象，不去直接操做DOM而是经过操做JS对象，最后再进行 innerHtml 或者 append。

HTML 集合

咱们先来看一段代码：

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

乍一看，这段代码只是单纯的把页面中的div数量翻倍：遍历全部的div，每次建立一个新的div并建立到添加到body中。
但事实上，这是一个死循环：由于循环的退出条件alldivs.length在每一次循环结束后都会增长，由于这个HTML元素集合反映的是底层文档元素的实时状态。 相似于下面的HTML集合其实都会存在这样的问题：

1. document.getElementsByTagName()
2. document.getElementsByClassName()
3. document.getElementsByName()
   ....

其次上面的代码也会存在一个性能问题，就是每次都须要访问DOM对象的length属性。其实咱们也能够用一个变量缓存起来对象的length属性：

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

重绘与重排

浏览器用来显示页面的全部“组件”，有：HTML标签、js、css、图片——以后会解析并生成两个内部的数据结构：

DOM树（表示页面结构）
渲染树（表示DOM节点应该如何表示）
DOM树中的每个须要显示的节点在渲染树中至少存在一个对应的节点。
渲染树中的节点被称为“帧（frames）”或“盒（boxes）”，符合css盒模型的定义，理解页面元素为一个具备padding、margin、borders和position的盒子。
一旦渲染树构建完成，浏览器就开始显示页面元素，这个过程称为绘制（paint）。

当DOM的变化影响了元素的几何属性（宽、高）——好比改变改变了边框的宽度或者给一个段落增长一些文字致使其行数的增长——浏览器就须要从新计算元素的几何属性，一样，页面中其余元素的几何属性和位置也会所以受到影响。
浏览器会使渲染树中收到影响的部分消失，从新构建渲染树，这个过程称为“重排(reflow)”。重排完成以后，浏览器会从新将受到影响的部分绘制到浏览器中，这个过程称之为“重绘(repaint)”。

若是改变的不是元素的几何属性，如：改变元素的背景颜色，不会发生重排，只会发生一次重绘，由于元素的布局并无改变。
不论是重绘仍是重排，都是代价昂贵的操做，它们会致使web应用程序的UI反应迟钝，应当尽量的减小这类过程的发生。
重排什么时候发生？

• 添加或删除可见的DOM元素
• 元素位置的改变
• 元素尺寸的改变（padding、margin、border、height、width）
• 内容改变（文本改变或图片尺寸改变）
• 页面渲染器初始化
• 浏览器窗口尺寸改变
• 滚动条的出现（会触发整个页面的重排）

最小化重绘和重排

改变样式

一个栗子：

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

示例中，元素的三个样式被改变，并且每个都会影响元素的几何结构。在最糟糕的状况下，这段代码会触发三次重排（大部分现代浏览器为此作了优化，只会触发一次重排）。从另外一个角度看，这段代码四次访问DOM，能够被优化。

var el = document.getElementById('mydiv');  
//思路：合并全部改变而后一次性处理  
//method_1:使用cssText属性  
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';  
  
//method_2:修改类名  
el.className = 'anotherClass';

批量修改DOM

当你须要对DOM元素进行一系列操做的时候，不妨按照以下步骤：

1. 使元素脱离文档流
2. 对其应用多重改变
3. 把元素带回文档中

上面的这一套组合拳中，第一步和第三部分别会触发一次重排。可是若是你忽略了这两个步骤，那么在第二步所产生的任何修改都会触发一次重排。

在此安利三种可使DOM元素脱离文档流的方法：

1. 隐藏元素
2. 使用文档片断（document fragment）在当前DOM以外构建一个子树，再把它拷贝回文档
3. 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素

让动画元素脱离文档流

通常状况下，重排只影响渲染树中的一小部分，但也可能影响很大的一部分，甚至是整个渲染树。
浏览器所需的重排次数越少，应用程序的响应速度也就越快。
想象这样一种状况，页面的底部有一个动画，会推移页面整个余下的部分，这将是一次代价昂贵的大规模重排！用户也势必会感受到页面一卡一卡的。
所以，使用如下步骤能够避免页面中的大部分重排：

1. 使用绝对定位让页面上的动画元素脱离文档流
2. 动画展现阶段
3. 动画结束时，将元素恢复定位。

IE的:hover

从IE7开始，IE容许在任何元素上使用:hover这个css选择器。
然而，若是你有大量元素使用了:hover，你会发现，贼喇慢！

关于

做者：monkeyWang

本人主页：https://monkeywangs.github.io/

微信公众号：会不按期推送前端技术文章，欢迎关注