重绘与回流的定义

• 重绘：当前元素的样式(背景颜色、字体颜色等)发生改变的时候，我们只需要把改变的元素重新的渲染一下即可，重绘对浏览器的性能影响较小，所以 一般不考虑。 　　发生重绘的情形：改变容器的外观风格等，比如background：black等。改变外观，不改变布局，不影响其他的dom。

• 回流：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手.一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.  

浏览器渲染过程　　

渲染：就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程 

浏览器解析HTML的基本过程：

1. 用户输入网址，浏览器向服务器发出请求，服务器返回html文件

2. 浏览器载入html代码，发现标签内有一个标签引用外部css文件

3. 浏览器又发出css文件的请求，服务器返回这个css文件

4. 浏览器继续载入html中的部分的代码，并且css文件已经拿到手了，可以渲染页面

5. 浏览器在代码中发现一个标签引用关了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码

6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来渲染这部分代码

7. 浏览器发现了一个包含一行javascript代码的script标签，赶快运行它

8. javascript脚本执行了这条语句，命令浏览器隐藏代码中某个,杯具了，突然就少了一个元素，浏览器不得不重新渲染这部分代码

9. 终于等到的到来，浏览器泪流满面 

10. 等等，还没完，用户点了一个界面中的“换肤”按钮，javascript让浏览器换了一个标签中的css的路径

11. 浏览器召集了在座的各位：”大伙需要收拾下行李，咱得重新来过”，浏览器向服务器请求了新的css文件，重新渲染页面当页面的布局发生变化时，浏览器会回过头来重新渲染，这就是页面变慢的原因。

 触发回流的操作

1. 调整窗口大小（Resizing the window）

2. 改变字体（Changing the font）

3. 增加或者移除样式表（Adding or removing a stylesheet）

4. 内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in an input box）

5. 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)

6. 操作 class 属性（Manipulating the class attribute）

7. 脚本操作 DOM（A script manipulating the DOM）

8. 计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）

9. 设置 style 属性的值 （Setting a property of the style attribute）

10. fixed定位的元素,在拖动滚动条的时候会一直回流

资料出处:

http://blog.sina.com.cn/s/blog_8dace7290102wezv.html

http://www.cnblogs.com/jyybeam/p/5776667.html

微信公众号

本文链接：