页面渲染过程

Author Avatar
饶英俊（Royin） 2月 11, 2022

浏览器解析页面过程

  1. 浏览器获取到 HTML 文件，将各个标记解析成对应 DOM 节点以构建 DOM 树
  2. 解析【1】的过程中，如果遇到 CSS 文件，则并行下载
  3. 当 CSS 文件下载完毕，解析对应 CSS 样式生成对应 CSSOM 树，该过程不会阻塞 DOM 的解析，但会阻塞页面渲染
  4. 解析【1】的过程中，如果遇到 Javascript 文件，则串行下载
  5. 当 Javascript 文件下载完毕，将会解析该脚本文件并执行，该过程会阻塞 DOM 的解析和页面渲染
  6. 如果【1】的 DOM 树构建完成，触发 document 的 DOMContentLoaded 事件
  7. 结合 CSSOM 树和 DOM 树生成 Render Tree，根据 Render Tree 进行布局及绘制，将内容呈现到页面
  8. 页面完全加载后（CSS 文件、Javascript 文件、图片等），触发 window 的 load 事件

注意事项

  • 多个 CSS 文件下载是并行的，优先解析下载好的文件。样式的最终呈现与下载顺序无关，与优先级有关

    • 如果多个 CSS（文件）样式规则优先级相同则合并样式，否则生效规则依据样式的优先级决定
    • CSS（文件）的下载不会阻塞其后的 Javascript 的下载，但会阻塞 Javascript 的执行

  • 多个 Javascript 文件的下载与解析执行均是串行的，会阻塞页面其他动作。此处不包括使用 async 和 defer 的情况

该博客版权归饶英俊（Royin）所有，严禁抄袭，欢迎转载。如有反馈或建议等可通过邮箱联系我
本文链接：https://raoyingjun.github.io/2022/02/11/%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B/