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被触发的时间。