页面阻塞

[Lawguancong]

阻塞分析

• js script（js线程 > GUI线程）
• iframe
• css @import
• http请求头阻塞（非tcp）
• useLayoutEffect callback 中代码执行会阻塞浏览器绘制（在Mutation DOM前，执行这个钩子）

结论

• css加载不会阻塞DOM树的解析
• css加载会阻塞DOM树的渲染
• css加载会阻塞后面js语句的执行
• css 文件没下载并解析完成之前，后续的 js 脚本不能执行。
• css 文件的下载和解析不会影响 DOM 的解析，但是会阻塞 DOM 的渲染。因为 CSSOM Tree 要和 DOM Tree 合成 Render Tree 才能绘制页面。
• css 文件的下载不会阻塞前面的 js 脚本执行。
• js 文件的下载和解析会阻塞 GUI 渲染进程，也就是会阻塞 DOM 和 CSS 的解析和渲染。
• js 文件的下载不会阻塞前面 HTML 和 CSS 的解析（有些js下载完后直接解析js，会阻塞html&css解析）
• JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。
• 浏览器遇到 script且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。
• 不管是下载 js 文件还是 css 文件，都会阻塞下面页面的渲染，但不会阻塞前面的渲染
  所以，你现在明白为何script最好放底部，link最好放头部，如果头部同时有script与link的情况下，最好将script放在link上面了吗？

1DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。
2然而，由于Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后，才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的。
3由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

因为你加载css的时候，可能会修改下面DOM节点的样式， 如果css加载不阻塞render树渲染的话，那么当css加载完之后， render树可能又得重新重绘或者回流了，这就造成了一些没有必要的损耗。 所以干脆就先把DOM树的结构先解析完，把可以做的工作做完，然后等你css加载完之后， 在根据最终的样式来渲染render树，这种做法性能方面确实会比较好一点。

参考链接
https://juejin.cn/post/6844903667733118983
https://segmentfault.com/a/1190000018130499