浏览器渲染页面的流程

85 阅读1分钟

今天学习的知识总结一下

概览: 构建DOM → 构建CSSOM → 构建渲染树 → 布局 → 绘制

JS如果没有额外的设置,默认要登CSSOM构建完成;

若JS文件对DOM或CSSOM进行修改,那后三步将会再运行一次;

  1. 请求得到HTML文件的时候,开始解析HTML文件以构建DOM
  2. 解析遇到link标签,需要请求CSS文件
  3. 在请求CSS文件的同时,继续解析HMTL。
  4. 遇到script标签,需要请求JS文件(根据是否设置defer或async决定是否会阻塞HMTL的解析)
  5. 遇到图片的时候下载图片资源,但不会阻塞HTML解析,直到DOM构建完成。
  6. 等待解析CSS文件,构建CSSOM