DOMContentLoaded和load

DOMContentLoaded

如果页面中没有脚本，浏览器会在解析完文档时就触发DOMContentLoaded事件。如果页面中存在脚本，脚本会阻塞文档的加载，而脚本的加载需要等前面的css加载完成。

在任何情况下DOMContentLoaded都不会等待图片（音频、视频）等资源加载完成。

load

页面上的所有资源（图片、音频、视频等）加载完成后才会触发load事件。一般地，load事件会在DOMContentLoaded之后触发。

为什么将css放在头部，将js文件放在尾部

在面试的过程中，经常会有人在回答页面的优化中提到将js放到body标签底部，原因是因为浏览器生成Dom树的时候是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染。那么问题来了，既然Dom树完全生成好后页面才能渲染出来，浏览器又必须读完全部HTML才能生成完整的Dom树，script标签不放在body底部是不是也一样，因为dom树的生成需要整个文档解析完毕。

现代浏览器为了更好的用户体验,渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。假如我们将js放在header，js将阻塞解析dom，dom的内容会影响到First Paint，导致First Paint延后。所以说我们会将js放在后面，以减少First Paint的时间，但是不会减少DOMContentLoaded被触发的时间。

原文链接