浏览器渲染过程

40 阅读1分钟
  1. HTML代码转化成DOM Tree
  2. CSS代码转化成CSSOM Tree(CSS Object Model)
  3. 结合DOM和CSSOM,生成一棵渲染树Render Tree(render tree能识别样式,render tree中每个node都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。)
  4. 生成布局(flow),将所有渲染树进行平面合成(!此步骤再次触发即回流)
  5. 将布局绘制(paint)在屏幕上(!此步骤再次触发即重绘)