一、渲染过程
参考文章：
谷歌 Web 开发最佳实践手册（4.1.1）：创建对象模型 http://blog.jobbole.com/68018/
谷歌 Web 开发最佳实践手册（4.1.2）：渲染树结构、布局和绘制 http://blog.jobbole.com/68208/
谷歌 Web 开发最佳实践手册（4.1.3）：阻塞渲染的CSS http://blog.jobbole.com/68253/
谷歌 Web 开发最佳实践手册（4.1.4）：使用JavaScript增加交互 http://blog.jobbole.com/68268/
浏览器处理过程中的每一个步骤：
- 处理HTML脚本，生成DOM树
- 处理CSS脚本，生成CSSOM树 （DOM和CSSOM是独立的数据结构）
- 将DOM树和CSSOM树合并为渲染树
- 对渲染树中的内容进行布局，计算每个节点的几何外观
- 将渲染树中的每个节点绘制到屏幕中
在我们运行脚本时还没有完成 CSSOM 的下载和创建会怎么样？
浏览器会延迟脚本的执行，直到它完成了 CSSOM 的下载和构建，当我们在等待时，DOM 的构建也被阻塞了！
二、回流、重绘
参考文章：
高性能WEB开发(8) - 页面呈现、重绘、回流 http://www.blogjava.net/BearRui/archive/2010/05/10/web_performance_repaint_relow.html
回流与重绘
1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注：从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。
什么操作会引起重绘、回流
其实任何对render tree中元素的操作都会引起回流或者重绘，比如：- 添加、删除元素(回流+重绘)
- 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
- 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)
- 对style的操作(对不同的属性操作，影响不一样)
- 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)