js之DOM深入学习总结

╰半夏微凉° 2022-06-16 09:11 164阅读 0赞

# [js之DOM深入学习总结][js_DOM] #

标签： [dom][][js][]

### html标签和dom节点的区别是什么？ ###

html是一门标记语言，它告诉我们这个页面有什么内容。但行为操作是要通过Dom交互来实现的。我们不能认为只要存在html标签，这个标签就是一个dom了。html标签要通过浏览器解析才能变成dom节点，当我在地址栏中输入一个url的时候，浏览器开始加载页面，我们就能看到内容，在这个过程中，有一个dom节点构建的过程，节点是以树的形式组织的。当页面中的所有html标签都转化为dom节点之后，就叫做dom树构建完毕，我们简称为domReady.其中浏览器是通过渲染引擎将html标签转化为dom节点。渲染引擎的职责是：把请求到的内容显示到浏览器屏幕上。

### 浏览器渲染引擎的基本渲染流程 ###

页面渲染的基本流程：   
解析HTML文档构建DOM树——构建渲染树——渲染树布局——绘制渲染树   
详细过程：   
第一步：浏览器将获取到的HTML文档解析成DOM树，HTML文档中的每个元素都对应DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏的元素，还有用JS动态添加的元素等。   
第二步： DOM树和样式结构体（解析样式信息，包括外部的css文件、style标签中的样式）组合后构建render树, 与DOM树的不同在于：render树能识别样式，render 树中每个节点都有自己的样式，而且 render 树不包含隐藏的节点 (比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render 树中。注意visibility:hidden隐藏的元素还是会包含到 render树中的，因为visibility:hidden会影响布局(layout)，会占有空间。渲染树由一些包含有各种属性的矩形组成，他们将会按照正确的顺序显示到屏幕上；   
第三步：布局渲染树（布局DOM节点），执行布局的过程，将确定每个节点在屏幕上的确切坐标；   
第四步：绘制渲染树（绘制DOM节点，即遍历渲染树），使用UI后端层来绘制每个节点

关于更详细的渲染流程，推荐阅读：[前端必读：浏览器内部工作原理][Link 1]

window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发.

DOMContentLoaded 事件   
这个事件在许多Webkit浏览器以及IE9上都可以使用, 此事件会在DOM文档准备好以后触发, 包含在[HTML5][]标准中. 对于支持此事件的浏览器, 直接使用DOMContentLoaded事件是最简单最好的选择.但是IE6,7,8都不支持DOMContentLoaded事件.所以目前所有的hack方法都是为了让IE6,7,8支持DOM Ready事件.

doScroll : 微软的文档指出doScroll必须在DOM主文档准备完毕时才可以正常触发. 所以通过doScroll判断DOM是否准备完毕.   
注意：单纯使用readyState属性是无法判断出Dom Ready事件的. interactive状态过早(DOM没有稳定), complete状态过晚(图片加载完毕).

## 高性能JavaScript之DOM编程 ##

文档对象模型(DOM)是一个独立于语言的，用于操作XML和HTML文档的应用程序接口，用脚本进行DOM操作的代价很昂贵，它是Web应用中最常见的性能瓶颈。有个贴切的比喻，把DOM和[JavaScript][]（这里指ECMScript）各自想象为一个岛屿，它们之间用收费桥梁连接，ECMAScript每次访问DOM，都要途径这座桥，并交纳”过桥费”。访问DOM的次数越多，费用也就越高。因此，推荐的做法是尽量减少过桥的次数，努力待在ECMAScript岛上。

### DOM访问与修改 ###

访问DOM元素是有代价的，即前面提到的”过桥费”。修改元素则更为昂贵，因为它会导致浏览器重新计算页面的几何变化（重排和重绘）。   
当然，最坏的情况是在循环中访问或者修改元素，尤其是对HTML元素集合循环操作。   
Demo:

<body>
    <div id="box"></div>
    <script type="text/javascript"> var times = 20000; //测试1 console.time(1); for(var i=0;i<times;i++){ document.getElementById("box").innerHTML+='a'; } console.timeEnd(1);//1: 5961.652ms //测试2 console.time(2); var str = ''; for(var i=0;i<times;i++){ str += 'a';//这里用局部变量存储修改中的内容，然后在循环结束后一次性写入 } document.getElementById("box").innerHTML += str; console.timeEnd(2);//2: 14.720ms </script>
    </body>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20

在所有浏览器中，修改后的版本都运行得更快。   
[测试][Link 2]代码1的问题在于：每次循环迭代，该元素都会被访问两次：一次读取innerHTML的值，另一次重写它，也就是说，每次循环都在”过桥”！结果显而易见，访问DOM的次数越多，代码的运行速度越慢。因此，减少访问DOM访问的次数，把运算尽量留在ECMAScript这端处理。

## 重绘和重排 ##

浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部[数据结构][Link 3]：

*  DOM树(表示页面结构)
 *  渲染树(表示DOM节点如何显示)

DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的DOM元素(disply值为none) 在渲染树中没有对应的节点）。渲染树中的节点被称为”帧”或”盒”,符合CSS模型的定义，理解页面元素为一个具有内边距，外边距，边框和位置的盒子。一旦DOM和渲染树构建完成，浏览器就开始显示（绘制”paint”）页面元素。

当DOM的变化影响了元素的几何属性（宽或高）–比如改变边框宽度或给段落增加文字，导致行数增加–浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排(reflow)。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘(repaint)。

并不是所有的DOM变化都会影响几何属性，比如改变一个元素的背景色并不会影响元素的宽和高，在这种情况下，只会发生一次重绘(不需要重排)，因为元素的布局并没有改变。重绘和重排都是代价昂贵的操作，它们会导致Web应用程序的UI反应迟钝，所以，应当尽可能减少这类过程的发生。   
特别注意： 重排必将引起重绘，而重绘不一定会引起重排。   
重排和重绘的代价究竟有多大？我们再回到上面那个例子上，我们发现千倍的时间差并不是由于”过桥”一手造成的，每次”过桥”其实都伴随着重排和重绘，而耗能的绝大部分也正是在这里!   
Demo:

<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <script type="text/javascript"> var times = 20000; // 测试1 每次过桥+重排+重绘 console.time(1); for(var i = 0; i < times; i++) { document.getElementById('box1').innerHTML += 'a'; } console.timeEnd(1);//7226.836ms // 测试2 只过桥 console.time(2); var str = ''; for(var i = 0; i < times; i++) { var tmp = document.getElementById('box2').innerHTML;//过桥 str += 'a'; } document.getElementById('box2').innerHTML = str; console.timeEnd(2);//57.384ms // 测试3 console.time(3); var str1 = ''; for(var i = 0; i < times; i++) { str1 += 'a'; } document.getElementById('box3').innerHTML = str1; console.timeEnd(3);//3.735ms </script>
    </body>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
        
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31

从上面这个例子看出：多次访问DOM对于重排和重绘来说，耗时简直不值一提。

### 重排何时发生？ ###

重排发生会导致重新构造渲染树，以下情况会发生重排：

*  添加或删除可见的DOM元素
 *  元素位置改变
 *  元素尺寸改变(包括：外边距、内边距、边框宽度、宽度、高度等属性改变)
 *  内容改变(例如：文本改变或图片被另一个不同尺寸的图片替代)
 *  页面渲染器初始化
 *  浏览器窗口尺寸改变–resize事件发生时

### 渲染树变化的排队与刷新 ###

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。浏览器把所有会引起重排、重绘的操作放入一个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的重排、重绘就变成一次重排重绘。   
浏览器虽然进行一定优化处理，然而，你可能会（经常是不知不觉）强制刷新队列并要求计划任务立即执行，这样浏览器的优化作用就失效了。获取布局信息的操作会导致队列刷新，比如以下方法：

*  offsetTop, offsetLeft, offsetWidth, offsetHeight
 *  scrollTop, scrollLeft, scrollWidth, scrollHeight
 *  clientTop, clientLeft, clientWidth, clientHeight
 *  getComputedStyle() (currentStyle in IE)

以上属性和方法需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的”待处理变化”并触发重排以返回正确的值。我们在实际编码中，应该尽可能避免使用上述属性和方法，它们都会刷新渲染队列，即使你是在获取最近未发生改变的或者与最新改变无关的布局信息。

### 最小化重绘和重排 ###

看下面这个例子：

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

示例中有三个样式属性被改变，每一个都会影响元素的几何结构。最糟糕的情况下，会导致浏览器触发三次重排。大部分现代浏览器都为此做了优化，只会触发一次重排。如果在上面代码执行时，有其他代码请求布局信息，这会导致请求布局信息，这会导致触发三次重排。而且，这段代码四次访问DOM，可以被优化。一个能够达到同样效果且效率更高的方式是：合并所有的改变然后一次处理，这样只会修改DOM一次。

#### 使用cssText属性 ####

修改代码如下：

var el = document.getElementById('myDiv');
    el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
       
        
         1
         2
        
       
        
         1
         2

使用cssText属性会覆盖已经存在的样式信息，如果想保留现有样式，可以把它附加在cssText字符串后面：

var el = document.getElementById('myDiv');
    el.style.cssText += 'border-;eft: 1px;'
       
        
         1
         2
        
       
        
         1
         2

#### 修改CSS的class名称 ####

另一个一次性修改样式的方法是修改CSS的class名称，而不是修改内联样式。这种方法适合于那些不依赖于运行逻辑和计算的情况。

var el = document.getElementById('myDiv');
    el.className = 'active';
       
        
         1
         2
        
       
        
         1
         2

#### 批量修改DOM ####

当需要对一个DOM元素进行一系列操作时，可以采用以下步骤：   
1、使元素脱离文档流；   
2、对元素应用多重改变；   
3、把元素带回文档中。   
在这个过程中，会触发两次重排：第一步和第三步。如果忽略这两个步骤，那么第二步所产生的任何修改都会触发一次重排。   
三种基本方法使DOM脱离文档：   
1、隐藏元素，应用修改，重新显示；   
2、使用文档片段，在当前DOM之外构建一个子树，再把它拷贝回文档；   
3、将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。

### 文档片段fragment元素的应用 ###

在文档之外创建并更新一个文档片段，然后把它附加到原始列表中。   
文档片段是个轻量级的document对象，它的设计初衷就是为了完成这类任务——更新和移动节点。文档片段的一个便利的语法特性是当你附加一个片段到节点时，实际上被添加的是该片段的子节点，而不是片段本身。只触发了一次重排，而且只访问了一次实时的DOM。

### 让元素脱离动画流 ###

用展开/折叠的方式来显示和隐藏部分页面是一种常见的交互模式。它通常包括展开区域的几何动画，并将页面其他部分推向下方。

一般来说，重排只影响渲染树中的一小部分，但也可能影响很大的部分，甚至整个渲染树。浏览器所需要重排的次数越少，应用程序的响应速度就越快。因此当页面顶部的一个动画推移页面整个余下的部分时，会导致一次代价昂贵的大规模重排，让用户感到页面一顿一顿的。渲染树中需要重新计算的节点越多，情况就会越糟。

使用以下步骤可以避免页面中的大部分重排：

*  使用绝对位置定位页面上的动画元素，将其脱离文档流
 *  让元素动起来。当它扩大时，会临时覆盖部分页面。但这只是页面一个小区域的重绘过程，不会产生重排并重绘页面的大部分内容
 *  当动画结束时恢复定位，从而只会下移一次文档的其他元素

### 小结 ###

重排和重绘是DOM编程中耗能的主要原因之一，平时涉及DOM编程时可以参考以下几点：

*  尽量不要在布局信息改变时做查询（会导致渲染队列强制刷新）
 *  同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）
 *  如果要批量添加DOM(比如要给ul添加很多li)，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排（文档片段(fragment)元素的应用）
 *  将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

[js_DOM]: http://blog.csdn.net/liujie19901217/article/details/51830102
[dom]: http://www.csdn.net/tag/dom
[js]: http://www.csdn.net/tag/js
[Link 1]: http://kb.cnblogs.com/page/129756/
[HTML5]: http://lib.csdn.net/base/html5
[JavaScript]: http://lib.csdn.net/base/javascript
[Link 2]: http://lib.csdn.net/base/softwaretest
[Link 3]: http://lib.csdn.net/base/datastructure