谈谈load事件与DOMCurrentLoaded事件的区别

前面的话

前面两篇内容介绍关于浏览器的渲染原理，这篇文章接着谈谈load事件与DOMCurrentLoaded事件。

提出问题

• 打开Chrome浏览器的network面板，下面有两个数值，这两个数值代表什么？
• 我们常说的将css文件放在头部，将js文件放在尾部，这样有利于页面的性能优化，为什么呢？
• 在用jquery的时候，我们一般都会将函数调用写在ready方法内，这是什么原理？

给出定义

DOMCurrentLoaded事件：就是dom内容加载完毕（即HTML文档被加载和解析完毕）触发的事件。

什么是HTML文档加载和解析完毕？

这个情况就是平时我们看到的：打开一个网页时，首先是空白的，过一会就会看到内容展示出来，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才能显示在页面。其中从页面空白到展示出页面的内容，会触发DOMCurrentLoaded时间，这段时间就是HTML文档被加载和解析完成。

有时HTML的解析会被中断，这是因为JavaScript会阻塞dom的解析。当解析过程中遇到< script>标签时，便会停止HTML的解析 转去处理脚本，如果脚本是内联的，浏览器会先去执行这段内联脚本，如果是外链的，那么会先去加载脚本，然后执行，在处理完脚本之后，浏览器才会继续解析HTML文档。（前面一篇文章已经详细的说过JavaScript是解析器阻塞资源，HTML会被js阻塞）

同时JavaScript的执行会受到标签前面的css文件的影响。如果在标签前面有css文件，需要样式文件加载并解析完毕后才执行脚本。原因就是JavaScript可以查询对象的样式。

总结：DOMCurrentLoaded所计算的时间分两种情况

• 当HTML文档中没有< script>脚本时，浏览器解析完文档便可触发DOMCurrentLoaded事件
• 当HTML文档中有< script>脚本时，则脚本会阻塞文档的解析，而脚本要等位于脚本前面的css加载完毕才能执行。最后接着解析HTML， 完毕后触发DOMCurrentLoaded事件。

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

问题解决

通过上面的解释，想必上面两个问题很容易回答了吧。

• 两个时间分别就是DOMCurrentLoaded和load事件完成的时间
• 将css放在头部，js放在尾部原因:避免js阻塞浏览器对HTML文档的解析，影响页面的渲染，从而影响用户体验。
• 我们在 jQuery 中经常使用的 $(document).ready(function() { // …代码… }); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() { // …代码… }); 监听的是 load 事件。在用jquery的时候，我们一般都会将函数调用写在ready方法内，就是页面被解析后，我们就可以访问整个页面的所有dom元素，可以缩短页面的可交互时间，提高整个页面的体验。

补充：其实现代浏览器为了更好的用户体验,渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。