． 什么是回流／重排？什么是重绘？如果是像我一样的前端小白，那可能对回流和重绘的理解没有那么深入。 在认识回流和重绘之前，我们先认识一下一个页面加载的时候，会发生什么？
页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style Rules一起构建出了Render Tree，对于Render Tree的理解：Render Tree和DOM Tree类似，但是Render Tree能够识别样式，在Render Tree上，每一个node（节点）都有自己的Style（样式），但隐藏的节点或是不会用于显示的部分不会包含在Render Tree上。
上图是一个页面在浏览器中渲染（Webkit）的过程。其中的Layout就是布局，页面第一次被加载时或是当Render Tree改变需要重新布局时，就产生了回流（reflow）／重排（relayout）。当Render Tree中的一部分(或全部)的node（节点）因为元素的规模尺寸、布局方式、显示隐藏等改变，浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的过程，也就是重新构造渲染树 ,这个过程叫做回流（reflow）／重排（relayout）。每个页面至少发生一次回流／重排，就是页面第一次被加载时。
重绘(replaint)：当页面中的元素只是外观或风格被改变不影响布局，比如更换背景色background-color，这个过程就是重绘。
| 影响回流（reflow）／重排（relayout）的因素 | 影响重绘(replaint)的因素 |
|---|---|
| 元素的布局和几何属性改变时就会触发reflow。1.页面初始渲染；2.添加/删除可见DOM元素；3.改变元素位置 ----- 定位属性及浮动（position,float）；4.改变元素尺寸（宽、高、内外边距、边框等） ----- 盒子模型相关属性（height ,padding ,margin , display ,border-width ,min-height）；5.改变元素内容（文本或图片等）（text-align , line-height ,vertival-align ,overflow , font-size,font-family,font-weight）；6.改变窗口尺寸；7.获取元素的offsetWidth、offsetHeight、clientWidth、clientHeight、width、height、scrollTop、scrollHeight，请求了getComputedStyle(), 或者 IE的 currentStyle | 页面中的元素更新外观或风格相关的属性时就会触发重绘，如:background，color，visibility， border-style ，border-radius outline-color，cursor，text-decoration， box-shadow |
． 回流／重排和重绘的区别，记住一点，回流必将引起重绘，而重绘不一定会引起回流。例如：只有颜色改变的时候就只会发生重绘而不会引起回流。
回流（reflow）的成本比重绘(replaint)的成本高得多。为什么呢？因为DOM Tree里的每个结点都会有回流（reflow）方法，一个结点的回流（reflow）很有可能导致子结点，甚至父点以及同级结点的回流（reflow）。定位相关，个人推荐使用absolute绝对定位，减少页面产生的回流，代码优化的方法就是尽量减少回流，或者用重绘来替代回流。为什么使用absolute？因为absolute让元素脱离文档流，这样只会让这个元素产生回流，页面的其他元素不会受到影响也产生回流。
我是前端新手王老四，关于前端，我们一直在路上．．．
