• css放在头部，将js文件放在尾部的好处

首先需要理解，浏览器渲染原理。

当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析，解析完成之后，会生成DOM。如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置，并将其绘制在浏览器上。

当解析过程中遇到<script>标签的时候，便会停止dom解析过程，转而去处理脚本，如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后执行。在处理完脚本之后，浏览器便继续解析HTML文档。

假如我们将js放在header，js将阻塞解析dom，dom的内容会影响到dom树的绘制，导致dom绘制延后。所以说我们会将js放在后面，以减少dom绘制的时间，但是不会减少DOMContentLoaded被触发的时间。

• DOMContentLoaded 与 load的区别

上面既然提到了这点，就自然要和load来进行比较，DOMContentLoaded事件其实就是dom内容加载完毕。举个例子来说我们在打开一个网页的时候，一开始页面是空白的，什么都看不到，一段事件之后页面展示出内容，但是还是有一些图片资源看不到，此时页面是可以进行正常的交互的，再过一段时间之后，页面上所有的资源都加载完成，继而整个页面加载完成。从页面空白到展示出页面内容的过程就会触发DOMContentLoaded事件，而这段事件就是HTML文档被加载和解析完成。

而页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，页面的load事件会在DOMContentLoaded被触发之后才触发。

我们在 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件，而$(document).load(function() { // ...代码... }); 监听的是 load 事件。

参考：查看链接