用脚本进行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对这个方法的使用，转而使用另一种更高效的方法来提高渲染性能的。
