第三章 DOM编程

用脚本进行DOM操作的代价很昂贵，它是富web应用中最常见的性能瓶颈。

1. 浏览器中的DOM

浏览器常会将DOM和js分开存放

2. 天生就慢

将dom和js文件相互独立存放意味着什么？

简单理解：两个相互独立的功能只要通过接口彼此连接，就会产生消耗。

有个贴切的比喻：把dom和js各自想象为一个岛屿，它们之间用收费桥梁连接。js每次访问dom,都要途径这座桥，并缴纳“过桥费”。访问DOM的次数越多，费用也就越高。因此，推荐的做法是尽可能减少过桥的次数，努力待在js的岛上。

3. DOM访问与修改

访问DOM元素是有代价的，修改元素则更为昂贵，因为它会导致浏览器重新计算页面的几何变化。

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

换一种效率更高的方法

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

4. innerHTML 对比 DOM 方法

innerHTML比原生的createElement()要更快一些。

5. 节点克隆

element.cloneNode(element表示已有节点)

6. HTML集合

HTML 集合是包含了DOM节点引用的类数组对象

以下方法的返回值就是一个类数组对象

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()

document.images
document.links(所有 a 元素)
document.forms
document.form[0].elements

事实上，HTML集合一直与文档保持着连接，每次你需要最新的信息时，都会重复执行查询的过程，哪怕只是获取集合里的元素个数(即访问集合的length属性)也是如此。这正是低效之源。

7. 遍历 DOM

当你需要从多种方案中选择时，最好为特定操作选择最高效的API。

(1) 选择器API

主要介绍 querySelectorAll()

var elements = document.querySelectorAll('#menu a');

elements包含一个引用列表，指向位于id = '#menu'的元素之中的所有 a 元素。它会返回一个NodeList，包含着匹配节点的类数组对象。

querySlector()用来获取第一个匹配的节点。

相比于下面这段代码：

var elements = document.getElementById('menu').getElementsById('a');

这段代码中， elements返回的是一个HTML集合，而使用querySelectorAll将返回一个NodeList，可以极大提高性能。

8. 重绘与重排

浏览器下载完页面中所有组件之后，会解析并生成两个内部数据结构
DOM树：表示页面结构
渲染树：表示DOM节点如何显示

DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)，一旦dom和渲染树构建完成，浏览器就开始绘制页面元素

当DOM的变化影响了元素的几何属性(高和宽)，浏览器会重新计算元素的几何属性，受其影响的的其他元素的几何属性也会重新计算。

浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

改变颜色只会引起重绘，因为其没有改变元素的几何属性。

重排和重绘有昂贵的代价，所以，尽可能减少。

有些改变会触发整个页面的重排，例如，当滚动条出现时。

(1) 渲染树变化的排队与刷新

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。

(2) 最小化重绘和重排

书中给出的方案是：合并多次对dom和样式的修改，然后一次性处理掉。

我觉得，我们应该禁止去直接操作dom，如果要操作，请使用class的方法，增加class来实现对dom的修改。

书中还推荐了createDocumentFragment()方法来进行文档存储，再一次性插入文档中，减少重排。

不过，我建议大家也停止使用这个方法，就是因为createDocumentFragment()开销太大，它会产生很多我们根本用不到的属性，也正是因为这个原因，Vue2才废除了Vue1对这个方法的使用，转而使用另一种更高效的方法来提高渲染性能的。