《高性能 JavaScript》第 3 章 DOM 编程

冷不防 2022-08-29 09:43 176阅读 0赞

# 第 3 章 DOM 编程 #

> 《高性能 JavaScript》—— Nicholas C. Zakas

用 JS 操作 DOM 的代价很昂贵，这通常是 web 应用的性能瓶颈。

本章讨论三类问题：

*  访问和修改 DOM 元素
 *  修改 DOM 元素的样式会导致重绘（repaint）和重排（reflow）
 *  通过 DOM 事件处理与用户的交互

## 1. 浏览器中的 DOM ##

DOM（Document Object Model，文档对象模型）就是 W3 定义的操作 XML/HTML 的接口层，  
浏览器对（DOM）接口层进行实现，我们（开发者）对接口层进行调用，  
也就是说，我们通过（DOM）接口层可以操作界面。

浏览器实现 DOM 和 ECMAScript 是不同的两个东西，  
比如 Chrome， 使用 webkit 的 WebCore 库来渲染界面，使用 V8 来实现 ECMAScript。

可以认为 webkit 和 v8 是两个不同的孤岛，  
它们之期通信是有额外的开销的。

## 2. DOM 访问与修改 ##

访问 DOM 元素是有代价的，  
修改元素代价更大，因为通常会导致重新计算页面的重绘和重排。

尤其是对 HTML 元素集合进行循环操作，如下：

// 总共读写 15000 * 2 次
    function innerHTMLLoop() {
        
      for (var count = 0; count < 15000; count++) {
        
        // 先读一次，再写一次
        document.getElementById('here').innerHTML += 'a';
      }
    }

应该尽量减少读写 DOM 的次数，把运算逻辑尽量放到 JS 中去，如下：

// 总共读写 2 次
    // 改进后，性能（花费的时间）提升几十倍
    function innerHTMLLoop2() {
        
      var content = '';
    
      for (var count = 0; count < 15000; count++) {
        
        content += 'a';
      }
    
      document.getElementById('here').innerHTML += content;
    }

### 2.1. innerHTML vs DOM方法 ###

当要修改页面区域时，有两种方式：

*  `innerHTML`
 *  `document.createElement()`

这两种方式的性能相差无几，  
在非现代浏览器中，`innerHTML` 要快一点点，  
在现代浏览器中，`document.createElement()` 要快一点点。

应该根据可读性、稳定性、团队习惯、代码风格来综合考虑使用哪种方式。

### 2.2. 克隆节点 ###

创建新的页面，除了 `document.createElement(tagName)`，  
还可以使用 `var dupNode = node.cloneNode(deep);` 克隆已有的节点。

虽然克隆节点会更有效率，但不是特别明显，只能带来百分之几的性能提升。

### 2.3. HTML 集合 ###

HTML 集合是是类数组对象，集合里的元素是 Node 节点的引用，获取集合方式：

*  `document.getElementsByName()`
 *  `document.getElementsByClassName()`
 *  `document.getElementsByTagName()`
 *  `document.images` All `img` elements on the page
 *  `document.links` All `a` elements
 *  `document.forms` All forms
 *  `document.forms[0].elements` All fields in the first form on the page
 *  等等

它们都会返回 `HTMLCollection` 对象。

HTML集合是实时的，  
也就是说，当底层文档对象更新时，它也会自动更新。

HTML集合对象一直与文档保持着连接，  
如 `length`， 每次获取集合对象的元素个数时，会重新在整个页面查询一次以获取最新的个数。

#### 2.3.1. 昂贵的集合 ####

集合是实时的，如下代码：

var alldivs = document.getElementsByTagName('div');
    
    // 每次执行 alldivs.length 
    // 都会重新执行一次 `document.getElementsByTagName('div')` 获取最新的 length
    for (var i = 0; i < alldivs.length; i++) {
        
      // 往页面不断插入新元素
      document.body.appendChild(document.createElement('div'))
    }

上面的代码是个死循环。

比较如下操作：

// 慢
    // 每次访问 length 都会重新查询所有 div
    function loopCollection() {
        
      var coll = document.getElementsByTagName('div');
    
      for (var count = 0; count < coll.length; count++) {
        
        /* do nothing */
      }
    }
    
    // 快
    // 缓存 length，比上面代码快 几倍 ~ 几十倍
    function loopCacheLengthCollection() {
        
      var coll = document.getElementsByTagName('div'),
          len = coll.length;
    
      for (var count = 0; count < len; count++) {
        
        /* do nothing */
      }
    }
    
    
    function toArray(coll) {
        
      for (var i = 0, a = [], len = coll.length; i < len; i++) {
        
        a[i] = coll[i];
      }
      return a;
    }
    
    // 快
    // 将集合元素拷贝到数组，比上面代码快一点点，因为访问数组元素比访问类数组元素快
    function loopCopiedArray() {
        
      var coll = document.getElementsByTagName('div');
      var arr = toArray(coll);
    
      for (var count = 0; count < arr.length; count++) {
        
        /* do nothing */
      }
    }

#### 2.3.2. 使用局部变量缓存集合元素 ####

当遍历 HTML 集合时，优化原则如下：

*  缓存集合对象： 把集合存储在局部变量中
 *  缓存 `length` 属性： 把 `length` 缓存在循环外部
 *  缓存集合元素： 把多次访问的集合元素放到局部变量中

代码如下：

// 慢
    function collectionGlobal() {
        
      var coll = document.getElementsByTagName('div'),
          len = coll.length,
          name = '';
    
      for (var count = 0; count < len; count++) {
        
        name = document.getElementsByTagName('div')[count].nodeName;
        name = document.getElementsByTagName('div')[count].nodeType;
        name = document.getElementsByTagName('div')[count].tagName;
      }
    
      return name;
    };
    
    // 较快
    // 比上面代码快 几倍 ~ 几十倍，缓存集合对象，缓存 length 属性
    function collectionLocal() {
        
      var coll = document.getElementsByTagName('div'),
          len = coll.length,
          name = '';
    
      for (var count = 0; count < len; count++) {
        
        name = coll[count].nodeName;
        name = coll[count].nodeType;
        name = coll[count].tagName;
      }
    
      return name;
    };
    
    // 最快
    // 比上面代码快一点点，缓存集合对象，缓存 length 属性，缓存多次访问的集合元素
    function collectionNodesLocal() {
        
      var coll = document.getElementsByTagName('div'),
          len = coll.length,
          name = '',
          el = null;
    
      for (var count = 0; count < len; count++) {
        
        el = coll[count];
        name = el.nodeName;
        name = el.nodeType;
        name = el.tagName;
      }
    
      return name;
    };

### 2.4. 遍历 DOM ###

DOM API 提供了很多方法来访问指定部分的文档结构，你可以根据情况选择高效的方式。

#### 2.4.1. 遍历子节点 ####

`childNodes`、`nextSibling` 都可以用于遍历子节点，代码如下：

上面的代码，执行速度差不多。

#### 2.4.2. Element 节点 ####

`div`、`p`、`a` 等等这些标签都是 `Element` 节点

`Element` 节点继承 `Node` 节点，  
而文本节点、注释节点也继承 `Node` 节点。

有时，我们需要剔除掉非 `Element` 节点，DOM 提供了一些方法

<table> 
 <thead> 
  <tr> 
   <th>返回 <code>Element</code> 节点</th> 
   <th>返回 <code>Node</code> 节点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>children</code></td> 
   <td><code>childNodes</code></td> 
  </tr> 
  <tr> 
   <td><code>childElementCount</code></td> 
   <td><code>childNodes.length</code></td> 
  </tr> 
  <tr> 
   <td><code>firstElementChild</code></td> 
   <td><code>firstChild</code></td> 
  </tr> 
  <tr> 
   <td><code>lastElementChild</code></td> 
   <td><code>lastChild</code></td> 
  </tr> 
  <tr> 
   <td><code>nextElementSibling</code></td> 
   <td><code>nextSibling</code></td> 
  </tr> 
  <tr> 
   <td><code>previousElementSibling</code></td> 
   <td><code>previousSibling</code></td> 
  </tr> 
 </tbody> 
</table>

返回 `Element` 节点的方法更快，因为少了非 `Element` 节点

#### 2.4.3. 选择器 API ####

通过 CSS 选择器查找 DOM 元素比原生 DOM 方法要快，如下：

var errs = [],
        divs = document.getElementsByTagName('div'),
        classname = '';
    
    for (var i = 0, len = divs.length; i < len; i++) {
        
      classname = divs[i].className;
    
      if (classname === 'notice' || classname === 'warning') {
        
        errs.push(divs[i]);
      }
    }
    
    // 比上面要快几倍
    var errs = document.querySelectorAll('div.warning, div.notice');

`querySelectorAll()` 返回 `NodeList` 对象（快照），  
不是 HTML 集合，所以不会对应实时的文档结构。

## 3. 重绘与重排 ##

页面资源（HTML、JS、CSS、图片等）下载完毕后，浏览器会解析并生成两个内部结构：

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

DOM树中需要显示的节点（非隐藏节点）在渲染树中有对应的节点。

渲染树中的节点称为 帧（frames）或盒（boxes），  
盒（boxes）跟 CSS 盒模型一样，有 padding、margins、 borders、position，

一旦DOM树和渲染树构建完毕，浏览器就会把页面元素显示（绘制 paint）出来。

当DOM元素的变化影响到其几何形状（宽、高），  
浏览器会重新计算 该元素及受其影响的其他元素 的几何形状和位置，  
并使渲染树中受影响的部分失效，并重新构造渲染树，这个过程称为 重排（reflow），  
重排之后，浏览器会重新绘制受影响的部分到屏幕上，这个过程称为 重绘（repaint）。

如果元素改变的是背景色（并不会影响其宽高），则只需要重绘即可。

重绘和重排是非常昂贵的，会导致 UI 反应迟钝，所以尽量减少此类过程。

### 3.1. 重排何时发生 ###

当页面布局或元素几何形状发生“变化”时，会发生重排：

*  增删可见的元素
 *  改变元素位置
 *  改变元素尺寸（ margin, padding, border thickness, width, height）
 *  改变元素内容（改变文本，改变图片尺寸）
 *  页面初始化渲染
 *  改变浏览器窗口大小

改变的部分 所对应的渲染树部分 会重新进行计算，  
有些改变会导致整个页面重排，如出现滚动条。

### 3.2. 重排队列与刷新 ###

由于每次重排都会消耗计算能力，浏览器把多个（导致重排的）“变化”放到队列里，然后批量执行。  
也就是说，创建缓冲区，缓存“变化”，缓冲区满后再执行计算，最后重排一次即可。

但当你查询布局信息时会导致刷新缓冲区（让缓冲区中的“变化”立马重排）：

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

以上属性和方法需要返回的最新的布局信息。

所以尽量把这些操作放到最后执行，即延迟访问布局信息。

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

合并所有修改，然后一次处理：

#### 3.3.1. 改变样式 ####

var el = document.getElementById('mydiv');
    
    // 单独处理影响性能
    el.style.borderLeft = '1px';
    el.style.borderRight = '2px';
    el.style.padding = '5px';
    
    // 合并处理
    el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
    
    // 或者设置样式类
    el.className = 'active';

#### 3.3.2. 批量处理DOM的变化 ####

当你要对一个DOM元素进行多次修改时，你可以通过下面的步骤来减少重排和重绘：

1.  让元素脱离文档流
2.  对运行进行修改
3.  将元素返回文档中

这个过程之后只有第1步、第2步会会硬气重排，  
如果不怎么做，第2步中的每个修改都可能会引起重排。

有三种基本的方法：

1.  隐藏元素，然后修改元素，最后显示出来
2.  使用文档片段
3.  克隆元素，然后修改克隆元素，最后用克隆的元素替换掉原始元素

示例：

### 3.4. 缓存布局信息 ###

获取布局信息（如 offsets, scroll values, computed style values）  
会是重排缓冲区刷新（计算队列里所有“变化”并重排）。

如果多次获取布局信息，可以缓存到局部变量中：

// inefficient
    myElement.style.left = 1 + myElement.offsetLeft + 'px';
    myElement.style.top = 1 + myElement.offsetLeft + 'px';
    if (myElement.offsetLeft >= 500) {
        
      stopAnimation();
    }
    
    // 高效
    var current = myElement.offsetLeft;
    current++;
    myElement.style.left = current + 'px';
    myElement.style.top = current + 'px';
    if (current >= 500) {
        
     stopAnimation();
    }

### 3.5. 使动画元素脱离文档流 ###

在页面通常使用 展开/折叠 的（动画）方式来 显示/隐藏 元素，  
如果处理不好会导致很大的区域（甚至整个页面）的重排。

用以下的方式，可以避免页面大块区域的重排：

1.  通过绝对定位让元素脱离文档流
2.  在元素上应用动画效果
3.  恢复元素的定位属性

### 3.6. 事件委托 ###

避免在“同类型”的元素上挨个绑定事件处理器。

每个事件有三个阶段：

1.  捕获 （根元素 -> 目标元素）
2.  在目标元素上触发
3.  冒泡 （目标元素 -> 根元素）

事件发生时，该事件都会传播祖先元素上。

在祖先元素上绑定事件处理器，在处理器中判断目标元素是否是指定元素：

// 阻止所有链接直接打开页面
    document.onclick = function(e) {
        
      var target = e.target;
    
      if (target.nodeName !== 'A') {
        
        return;
      }
    
      e.preventDefault();
    
      handleUnsafeLinks(target.href);
    };

## 4. 总结 ##

在现代web应用中，操作DOM是很重要的一部分，每次通过 JS 与 DOM 通信都会有开销，  
为了降低DOM编程的性能开销，请记住以下几点：

*  最小化 DOM 操作，尽量把业务逻辑放在 JS 这一块做完，然后再操作 DOM
 *  用局部变量存储经常访问的 DOM 的引用
 *  HTML集合是实时的，缓存HTML集合的 `length`，或者将其拷贝到数组，进而对数组进行操作
 *  尽量使用更高效的 API，如 `querySelectorAll()`、`firstElementChild`
 *  注意重排和重绘；批量处理样式更新，“离线”操作DOM树，缓存并最小化访问布局信息
 *  使动画元素绝对定位，使用拖拽代理
 *  使用事件委托来最小化事件处理函数的绑定