回流（reflow）与重绘（repaint）

最近项目排期不紧，因而看了一下以前看了很久也没看明白的chrome调试工具的timeline。可是很遗憾，虽然大概懂了每一项是作什么的，可是用起来并不能驾轻就熟。因此今天的重点不是timeline，而是我在看timeline的时候发现的reflow.reflow,回流。什么是回流呢？看了好多文章都提到回流与重绘会影响页面性能，每次这两个都会被同时说起，关系就好像KFC边上必定会有MC同样亲密的让人摸不到头脑。而后看了许多资料以后终于有了本身的认知，先列出个人参考文章

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/comment-page-1/

http://www.css88.com/archives/4991

http://www.css88.com/archives/4996

下面的内容是我看过这些资料以后本身的一些理解及总结。

一.明确概念

首先咱们要明确页面在文档加载完成以后到彻底显示中间的过程是1.根据文档生成DOM树（包括display:none的节点）2.在DOM树基础上根据节点的几何属性（margin/padding/width/height等)生成render树（不包括display:none、head节点但会包含visibility:hidden节点）3.在render树基础上进行进一步渲染包括color,outline等样式

reflow:当render树中的一部分或者所有由于大小边距等问题发生改变而须要重建的过程叫作回流

repaint:当元素的一部分属性发生变化，如外观背景色不会引发布局变化而须要从新渲染的过程叫作重绘

二.什么会引发回流

这个问题其实很简单，什么引发的，看定义不就能够了？

问题是引发的缘由可能会不少

笼统来讲当页面的布局和几何属性发生变化的时候就会引发回流。具体来讲大概分别5大类：

1.首当其冲天然是dom树结构变化，好比你删除或者添加某个node.

2.元素几何属性变化，包括margin,padding,height,width,border等

3.页面渲染初始化

4.获取某些属性。虽然浏览器引擎可能会针对重排作了优化，好比Opera，它会等到有足够 数量的变化发生，或者等到必定的时间，或者等一个线程结束，再一块儿处理，这样就只发生一次重排。但除了render树的直接变化，当获取一些属性时，浏览器为取得 正确的值也会触发回流。这样就使得浏览器的优化失效了。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。因此，在屡次使用这些值时应进行缓存。（这段我是直接引用的。。。）

5.浏览器窗口发生变化-resize事件发生时

以上，其实理解起来很容易。所谓的render树就是识别了几何属性的dom数，好像咱们画人体的时候，dom树是先肯定都有什么好比四肢，头部，身体，其余器官等；而render树则是肯定这我的的高矮胖瘦，头发是否盖眼睛等，若是咱们在绘画过程当中发现脖子长了那就惨了，脖子下面都要重画。这就是回流了。若是发现只是手指画的有问题也仍是要回流但咱们只须要重画手指。（固然，我说的是手就是手，没什么特别造型的时候）；当咱们的render树完事了，也就是人体大概轮廓咱们都画好了，就能够上色了，换个发色这种咱们叫重绘。

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!'));

　　如今咱们大概都能得出的结论是：回流比重绘的代价要高，至于具体的花销跟render树有多少节点须要从新构建有关。

　　还有就是，回流必定会伴随着重绘，可是重绘不必定会引发回流。

3、咱们要如何避免

从上面的实例代码中能够看到一共七行代码引发了6次左右的回流、重绘（上面的代码我大老远从别的页面拿过来固然不仅是就用那一次，哈哈），并且咱们刚刚还知道了回流花销真是不小，那么浏览器是否是真的每次js语句引发了回流他就执行一下呢？恩，后面的内容我是看的参考资料的：等队列中的操做到了必定的数量或者到了必定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让屡次的回流、重绘变成一次回流重绘。

可是尽管浏览器挺机智地帮咱们优化了代码，咱们本身做死也是没救的，好比你去请求

1. offsetTop, offsetLeft, offsetWidth, offsetHeight

2. scrollTop/Left/Width/Height

3. clientTop/Left/Width/Height

4. width,height

5. 请求了getComputedStyle(), 或者 IE的 currentStyle

浏览器为了给你返回一个比较精确的答案，他会提早flush队列，由于队列中可能会有影响这些值的操做。

因此咱们能够作的是： 

1.将那些改变样式的操做集合在一次完事，直接改变className或者cssText

2.让要操做的元素进行离线处理，处理完事之后再一块儿更新

（1）使用DocumentFragment进行缓存操做，引起一次回流和重绘

课外延伸：

DocumentFragment 节点不属于文档树，继承的 parentNode 属性老是 null。

不过它有一种特殊的行为，该行为使得它很是有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的全部子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操做。

其实他就是一个游离在DOM树外面的容器，因此你在把它插入文档节点以前，随便给他增删节点都不会引发回流

（2）使用display:none,只引起两次回流和重绘。道理跟上面的同样。由于display:none的元素不会出如今render树

（3）使用cloneNode和replaceChild技术，引起一次回流和重绘（这条其实没太明白）

3.不要常常访问会引发浏览器flush队列的属性，非要高频访问的话建议缓存到变量；

4.将须要屡次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其余元素。例若有动画效果的元素就最好设置为绝对定位；

5.尽可能不要使用表格布局，若是没有定宽表格一列的宽度由最宽的一列决定，那么极可能在最后一行的宽度超出以前的列宽，引发总体回流形成table可能须要屡次计算才能肯定好其在渲染树中节点的属性，一般要花3倍于同等元素的时间。

4、总结

别人这个地方都是列了一下实验结果，鉴于个人timeline还用不明白就不献丑了。

若有错误之处，欢迎指正。

最后再强调一下，以上内容参考了文章开头列出的资料，若有雷同，那很正常。。。