浏览器渲染

开局一张图,下面全靠编..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

你可能感兴趣的:(浏览器渲染)