一天，小明正在网上查找资料，项目中遇到的问题需要通过查阅资料来解决，他看到一个标题很有意思，觉得这应该是他要找的答案，于是他就点了进去，结果进入网站后几秒钟的时间，网页还是一片空白，过了好久才加载完成。
为什么会出现这种情况？
说到这我们必须了解一下网站加载的整个过程了
- 首先浏览器在服务器接收HTML代码，然后开始解析HTML
- 构建DOM树，（从HTML自顶向下进行构建），并且在同时构建渲染树
- 遇到js文件加载执行，将阻塞DOM树的构建，遇到css文件，将阻塞渲染树的构建
- script标签的defer属性：构建DOM树的过程和js文件的加载异步，（并行）进行，但是js执行需要DOM树构建完成之后，script中的async属性，构建DOM树，渲染树的过程和js文件的加载和执行异步，（并行）（进行）
为什么要对css，js的放置位置进行调整？
从以上过程可以知道，当js文件放在head中时，浏览器构建DOM树的时候遇到js文件加载会阻塞，也就是说，浏览器不会加载body中的标签，一旦js文件的数量和内容比较大，那么会照成小明刚才遇到的情况，就不会给用户带来十分良好的可视化，在前端工作中，给予用户的可视化回馈十分重要
我们现在十分青睐于用进度条来描述一个过程，而对用户的可视化回馈，就是网页加载的进度条。
对于现如今有着快节奏的人们，如果一个网页打开后在两秒钟内没有反应，或者加载很慢，那么用户就会很不耐烦的关掉它，想当于被直接宣判死刑了。
应该放在哪里？
综上所述，script最好放在</body>标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现的空白的情况，可以持续给用户提供视觉反馈，会降低错误的发生
而css标签应该放在<head></head>之间，因为如果放在</body>标签的前面，那么DOM树就构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不重新渲染一下页面，这样造成资源浪费，效率也不高，如果放在 <head></head>之间，浏览器边构建边渲染，效率也会提高