JavaScript的加载、解析与执行会阻塞文档的解析，也就是说，在构造DOM时，HTML解析器若是遇到了JavaScript，那么它会暂停文档的解析，将控制权交给JavaScript引擎，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果我们想首屏渲染的越快，就越不应该在首屏就加载js文件，这也是建议将script标签放在body标签底部的原因。当然，并不说script标签必需放在底部，因为可以给script标签添加defer或者async属性。

CSS 阻塞文档解析

理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，
然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，
如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。

所以如果浏览器尚未完成 CSSOM 的下载和构建，
而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。
也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。

为什么js放在底部，css放在顶部

浏览器会在下载完成全部css之后才对整个页面进行渲染，因此最好的方式是将css放在页面最上面，让浏览器尽快启动下载css。

JavaScript则相反，浏览器在加载JavaScript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此JavaScript最好放在页面最下面。但如果页面解析时就需要用到JavaScript，这是放在最底部就不合适了。

CSS和JS引入位置说明

1、CSS资源尽量放在head部分

因为CSS解析和DOM解析可以同时进行，所以CSS资源放在头部不会影响DOM解析，而且放在头部也会优先开始加载CSS样式，在渲染DOM的时候也已经知道了自己的样式，所以一次就可渲染成功。如果将CSS放在底部，那么会优先渲染DOM，而浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，也就是说渲染引擎会边解析、边渲染、边布局显示，已尽快减少白屏时间，所以随着CSS规则树的构建，还需要对之前渲染树重新渲染，可能会导致回流和页面跳动。

2、JS资源尽量放在body结束标签之前

JS放在body标签结束之前，首先可以确保能取到需要操作的DOM对象，也可缩短因JS阻塞而造成的白屏时间，提升用户体验。因为如果把JS放在head部分，JS运行会阻塞DOM树和CSS树构建，导致白屏时间延长，影响用户体验。

3、CSS资源尽量优先于JS资源引入

因为JS在运行时，如果需要操作CSS，但该CSS还没有下载和构建，则首先会阻塞JS线程，然后开启新线程去下载解析构建CSS规则树，再执行JS代码。