网页的解析过程

输入url -> 浏览器解析
image.png

浏览器的渲染原理

浏览器下载好资源后 浏览器内核进行解析
image.png
步骤

  1. 解析html 生成dom树
  2. 解析css生成 CSSOM (下载和渲染 不会影响dom树 影响render tree)
  3. dom树 和 生成render tree
  4. 布局(layout)

  5. 绘制(point)

    回流和重绘解析

    回流(reflow)和重绘(repoint)

    image.png
    回流(重排)
    概念 : 第一次确定节点的大小和位置,叫做布局 (layout) ,之后的节点的大小位置改变叫做回流

  6. 修改了dom

  7. 改变了布局
  8. 窗口大小

重绘
浏览器进行重新绘制
修改颜色 边框样式等

合成和性能优化

defer和async属性