repaint&reflow

HTML页面呈现流程

HTML 页面呈现的流程

1. 浏览器将获取到的HTML代码解析成DOM树，其中的每个Tag标签都是一个节点。DOM树中包含所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
2. 浏览器将CSS样式解析成样式结构体，该过程中会去掉浏览器不能识别的样式，如IE会去掉-moz开头的样式。
3. DOM Tree和样式结构体组合后构建Render Tree.

Render Tree和DOM Tree的区别：

• Render Tree能识别样式，其中的每个Node都有自己的style。
• Render Tree不包含隐藏的节点，比如display:none的节点，还有head节点。因为这些节点不用于呈现，而且会影响呈现。visibility:hidden;占有空间，会包含在其中。
• Render Tree中每个节点都称为盒模型。

4. 一旦Render Tree构建完毕，浏览器就会根据Render Tree来绘制页面了。

重绘和回流

当Render Tree中的一部分因为元素的规模尺寸，布局等改变而需要重新构建(页面布局或几何属性改变时就需要回流)，就称为回流reflow。也称重排。

每个页面至少需要一次回流，就是在页面加载的时候。
在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘repaint。

当Render Tree中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不影响布局，如background-color，则就称重绘。

回流必将引起重绘，而重绘不一定引起回流。回流的代价要比重绘高很多。

浏览器的处理

浏览器会维护一个队列，将所有会引起回流，重绘的操作放入这个队列，等队列中的操作到了一定数量或到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

当你请求一些属性时，浏览器为了给你最精确的值，就会提前flush队列。

如何减少回流，重绘

本质是减少对Render Tree的操作，合并多次多DOM和样式的修改，并减少对style信息的请求，尽量利用好浏览器的优化策略。

1. 直接改变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;';

2. 让要操作的元素进行“离线处理”，处理完后一起更新。

• 使用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技术，引发一次回流和重绘。

3. 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存。
4. 让元素脱离动画流，减少回流的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