事件DOMContentLoaded和load的区别

参考：https://www.cnblogs.com/caizhenbo/p/6679478.html

DOM文档加载的步骤为：

        1.解析HTML结构。

        2.加载外部脚本和样式表文件。

        3.解析并执行脚本代码。

        4.DOM树构建完成。//DOMContentLoaded

        5.加载图片等外部文件。

        6.页面加载完毕。//load

        在第4步，会触发DOMContentLoaded事件；在第6步，触发load事件。

DOMContentLoaded

顾名思义，就是dom内容加载完毕。那什么是dom内容加载完毕呢？我们从打开一个网页说起。当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。

在这里我们可以明确DOMContentLoaded所计算的时间，当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。

load:

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