在讨论页面渲染性能的时候，经常会听到这几个词“重绘” “回流” “重排”。
回流和重排都是Reflow的不同翻译(叫法)重绘对应Repaint，重新绘制的意思。 webkit浏览器的渲染过程
Gecko(firefox)浏览器的渲染过程
从图上可以看出来我们熟知的Reflow的说法源于ff,webkit这个过程称之为layout(计算布局),意思大概差不多吧。
浏览器的工作大致流程
从这个过程中可以了解到浏览器渲染主要有这么几步
解析HTML/XHTML/SVG 生成DOM tree,解析CSS生成CSS rule tree，解析script脚本
浏览器引擎通过DOM tree和css rule tree来构造render tree
调用系统的GUI绘图
几个值得关注的点：
render tree不完全包含dom tree的内容，
head或者display:none的元素不会出现在render tree中reflow/layout
reflow/layout必定会repaint但repaint不一定会reflow/layoutcss rule tree的生成过程
-
Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。
参考:
如果对这块知识感兴趣的话，建议去读下这篇文章，比较长，讲的很细致，比如Gecko和webkit在渲染上的一些差异，生成树(dom tree/css render tree)的一些具体算法什么的。