开局一张图，下面全靠编..O Yeah!
浏览器渲染过程.jpg
渲染步骤：
- 浏览解析html，生成DOM tree(深度优先)
- 解析css，生成css rule tree
- DOM tree和cssOM构造render tree
- layout(已知各个节点的css定义和从属关系，计算每个节点出现在屏幕中的位置)
- 绘制
- 显示
回流、重绘
回流：页面布局发生变化时，DOM重新构建，渲染树也会重新渲染(是否触发layout)
重绘：是否触发painting
回流触发
- 页面首次渲染
- 元素删减
- 几何属性变化(尺寸)
- 元素位置变更
- 获取元素的偏移量属性(浏览器为了保证值的正确也会回流获取最新的值)
- resize事件
transform
transform是通过创建一个RenderLayers(渲染)合成层，拥有独立的GraphicsLayers(绘图层)，每一个GraphicsLayers都有一个Graphics content进行绘制，输出位图合并展示
独立的合成层
- 有3D或者transform的css属性的层
- video、canvas元素的层
- flash
