每个前端在第一次写一个完整功能的页面，都可能会是这个样子滴~
我们都会被告知，css要放到head里面，js要放到body尾部前面。当然都能说出一二，但是我们还是有必要了解一下到底是为啥。
这里面有涉及到 DOM，CSS，JS 互相之间的一些关系，接下来会分别介绍
DOM这里有两个概念，解析与渲染。
DOM解析：就是把你所写的各种html标签，生成一个DOM TREE，可以认为就是生成了一个最原始的页面，一点样式都没有，毫无CSS修饰的那种；
DOM渲染：浏览器会把本身默认的样式+用户自己写得样式整合到一起，形成一个CSS TREE，而DOM渲染就是指DOM TREE 和 CSS TREE 结合到一起，生成一个Render TREE，呈现出一个带有样式的页面。
浏览器会有不同的线程，比如说
GUI 渲染线程
JS 线程
定时器触发线程 (setTimeout)
浏览器事件线程 (onclick)
http 异步线程
...
具体有关线程的内容，我会单独写一篇文章介绍，在这里我们只需要知道两点：
阻塞XXX是指让XXX暂停了。比如JS的执行阻塞DOM解析，就是
DOM解析 --> JS执行(此时DOM解析暂停) --> JS执行完毕 --> DOM继续解析
先看它俩之间的关系，也就是分析CSS的加载对DOM的解析和渲染的影响。
很明显，DOM自己在那解析DOM TREE 和 css样式有啥关系啊，所以css不影响DOM解析。
也很明显，DOM渲染就是要生成样式呢，肯定和css有关系啊，所以css影响DOM渲染。
结论：
JS（加载和执行） 都会阻塞 DOM 的解析，因为JS中可能会对DOM进行操作，可能改变DOM的结构，所以JS的加载和执行是会阻塞DOM解析的。
JS（加载和执行） 都会阻塞 DOM 的渲染，同上面一样，因为JS中可能对样式进行操作。
注： html中每遇到< script >标签，页面就会重新渲染一次，因为要保证标签中的JS代码拿到的都是最新的样式。
结论：
在线程那里说了，CSS的加载会阻塞JS的执行，因为CSS的渲染GUI线程和JS运行线程互斥。 但是CSS不会阻塞JS的加载（浏览器可以预先扫描并下载）
注1：
CSS、JS之间的加载是否阻塞，这里不考虑，因为现代的浏览器都会预先偷看文档，并且下载。
注2：
这里的JS引入方式不包括async和defer
结论：
CSS的加载阻塞JS的运行，不阻塞JS的加载
例1：
加载test.css是不会影响header的解析的，只影响渲染
例2：
加载test.css阻塞了test.js的运行，test.js的运行阻塞了header的解析和渲染，所以，看似test.css既阻塞了header的渲染，又阻塞了header的解析。
原文：https://www.cnblogs.com/chris-oil/p/14231117.html