回流(reflow)与重绘(repaint)

回流与重绘

一、页面显示过程

1、生成dom树，包括display：none；的节点

2、在dom树的基础上根据节点的集合属性如宽高边距等生成render树

3、在render树上继续渲染颜色背景样式等

回流：当render树的一部分或者全部因为节点的集合属性等发生改变需要重建时则会回流

重绘：简而言之就是重新渲染，当因为颜色等情况改变但是整体的布局不会改变的时候我们就只需要重回

因此重绘的代价要比回流小，因此在改代码时要尽量避免回流

二、什么会引起回流

1. 页面渲染初始化
2. DOM结构变化，比如删除了某个节点；
3. render树变化，比如减少了padding；
4. 窗口resize事件触发
5. 改变字体大小
6. 最复杂的一种：获取某些属性，引发回流 很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。 但是除了render树的直接变化。 当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了
   1. 这些属性包括
   2. offsetTop, offsetLeft, offsetWidth, offsetHeight
   3. scrollTop/Left/Width/Height
   4. clientTop/Left/Width/Height
   5. width,height
   6. 调用了getComputedStyle(), 或者 IE的 currentStyle

总结：回流时一定会伴随着重绘，但是重绘时是不一定会回流的

三、如何减少回流

1. 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
2. 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
3. 避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
4. 将复杂的元素绝对定位或固定定位，使它脱离文档流。否则回流代价十分高

四、网易的问题：display:none和visibility:hidden会不会引起回流和重绘

答：display:none；不占据物理空间，因此涉及了dom树的操作，所以会引起重绘和回流

visibility:hiden;元素虽然不可见但是却占据物理空间，因此不影响dom树的改变，所以只会引起回流。