在css解析、js执行时与页面阻塞的问题。

本文的CSS和JS指的是外部引入的方式，例如：
<link rel="stylesheet" href="/css/main.css">

<script src="/js/main.js"></script>

结论

具体的原因以及研究过程请参考最后的参考文章，这里只给出结论：

• CSS下载与解析不会阻塞DOM解析
• CSS下载与解析会阻碍界面的渲染
• JS下载与执行会阻塞DOM的解析
• JS下载与执行会阻碍界面的渲染
• 虽然script标签会阻碍DOM解析，但是HTML文档中通过额外的script等标签加载的外部资源，浏览器会提前进行下载。
• 如果script标签脚本准备执行时，还有CSS未下载或者解析完成，则该脚本会等待CSS解析完成后才会继续执行。

• script标签可以使用defer和async更改它的执行时机。

  • 如果script标签使用了defer，那么该脚本会在DOM解析完成之后，DOMContentLoaded事件之前被执行。
  • 如果script标签使用了async，那么该脚本在下载的过程中DOM解析依然会同步进行，但是该脚本在被下载完成时会立即执行。
  • 如果多个script标签使用了defer，那么这些脚本会依次执行，会保证顺序，而async则无法保证执行顺序。

如有错误请在评论区指出。

参考文章

• https://juejin.cn/post/6844903497599549453
• https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work