HTML页面呈现流程
- 浏览器将获取到的HTML代码解析成DOM树，其中的每个Tag标签都是一个节点。DOM树中包含所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
- 浏览器将CSS样式解析成样式结构体，该过程中会去掉浏览器不能识别的样式，如IE会去掉-moz开头的样式。
- DOM Tree和样式结构体组合后构建Render Tree.
Render Tree和DOM Tree的区别：
- Render Tree能识别样式，其中的每个Node都有自己的style。
- Render Tree不包含隐藏的节点，比如display:none的节点，还有head节点。因为这些节点不用于呈现，而且会影响呈现。visibility:hidden;占有空间，会包含在其中。
- Render Tree中每个节点都称为盒模型。
- 一旦Render Tree构建完毕，浏览器就会根据Render Tree来绘制页面了。
重绘和回流
当Render Tree中的一部分因为元素的规模尺寸，布局等改变而需要重新构建(页面布局或几何属性改变时就需要回流)，就称为回流reflow。也称重排。
每个页面至少需要一次回流，就是在页面加载的时候。
在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘repaint。
当Render Tree中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不影响布局，如background-color，则就称重绘。
回流必将引起重绘，而重绘不一定引起回流。回流的代价要比重绘高很多。
浏览器的处理
浏览器会维护一个队列，将所有会引起回流，重绘的操作放入这个队列，等队列中的操作到了一定数量或到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
当你请求一些属性时，浏览器为了给你最精确的值，就会提前flush队列。
如何减少回流，重绘
本质是减少对Render Tree的操作，合并多次多DOM和样式的修改，并减少对style信息的请求，尽量利用好浏览器的优化策略。
- 直接改变className，如果动态改变样式，使用cssText.
let box = document.getElementById('box');
// 不好
box.style.backgroundColor = 'red';
box.style.width = '10px';
// 正确
box.style.cssText += 'background-color:red;width:10px;';
cssText可以使用累加，这样原来的cssText不会被删除；
cssText（假如不为空）在IE中最后一个分号会被删掉，因此，上面cssText累加的方法在IE中是无效的。可以在前面添加一个分号来解决这个问题：box.style.cssText += ';background-color:red;width:10px;';
- 让要操作的元素进行“离线处理”，处理完后一起更新。
- 使用
DocumentFragment进行缓存操作，引发一次回流和重绘。
<ul id="list"></ul> // 向ul里插入li
let listNode = document.getElementById('list');
let frag = document.createDocumentFragment();
for (let i = 0; i < 10; i++) { // 将frag当作ul进行操作
let li = document.createElement('li');
li.innerHTML = 'List item ' + i;
frag.appendChild(li);
}
listNode.appendChild(frag); // 把DocumentFragement挂到它的父节点上
- 使用
display:none;技术，只引发两次回流和重绘。 - 使用
cloneNode(true or false)和replaceChild技术，引发一次回流和重绘。
- 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存。
- 让元素脱离动画流，减少回流的Render Tree的规模。
var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));
除了页面在首次加载时必然经历回流和重绘，还有以下行为会触发这个过程：
- DOM元素的添加，修改，删除(reflow+repaint)
- 仅修改DOM元素的字体颜色(只有repaint)
- 应用新的样式或修改任何影响元素外观的属性
- resize浏览器窗口、滚动页面
- 读取元素的某些属性(offsetLeft，offsetTop，offsetHeight，offsetWidth，scrollTop... ...)
参考资料：
http://www.css88.com/archives/4996
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
