CSS加载会造成堵塞吗（） CSS加载会造成堵塞吗？

首先我们来配置下我们的测试工具，我们Chrome浏览器测试，打开开发者工具（按下F12），选择Network，我们把网速调慢点可以更好地观察，调至自定义的「Slow」，同时消除缓存。每次测试前都会在Element页面里面，把body标签删除。

文章图片
开发者工具.png

文章图片
Slow速度配置.png html代码：

Document - 锐客网这是红色的标题呀！

CSS文件就是为了让h1里的文字变红。

文章图片
CSS文件还在下载.png

文章图片
DOM树和页面.png 但是我们把CSS文件放在body中呢？

Document - 锐客网这是红色的标题呀！

文章图片
link放在body标签里.png 综上：

如果CSS文件在head中，CSS文件不会阻塞DOM树的解析，但是会阻塞DOM树的渲染
如果CSS文件在body中，CSS文件不仅会阻塞DOM树的解析，还会阻塞DOM树的渲染

【CSS加载会造成堵塞吗（）】那么CSS加载会阻塞JS的加载吗？
我们在html的h1后加一个div，JS的功能就是在这个div中加一段字。
单独加载JS时。

Document - 锐客网这是红色的标题呀！

文章图片
单独加载JS 如上图，单独加载JS时候，大概需要花11.69s。
然后我们在JS文件前调用CSS。
html代码：

Document - 锐客网这是红色的标题呀！

文章图片
同时加载CSS和JS 如上图，CSS文件和JS文件是同时开始下载的，CSS文件已经加载完了，JS文件还未加载完。所以CSS文件会阻塞JS文件加载。
思考：
为了更好的用户感受，肯定是希望在看到网页的内容是加载好样式的，但是不一定需要一出现就已经执行了JS文件，比如可以利用在用户操作鼠标的间隙来加载JS文件（如事件绑定），所以一般来说我们会把CSS文件放在head头部，JS文件放在body尾部
参考：https://zhuanlan.zhihu.com/p/43282197