DOMContentLoaded与load的区别

一、DOMContentLoaded的含义

1. DOMContentLoaded字面上理解是：dom内容加载完毕，实际上是：HTML文档被加载和解析完成（此时会触发DOMContentLoaded事件）。

2. 怎么理解“HTML文档被加载和解析完成”

   直观感受是：打开一个网页，首先展示的是空白页，过一会展示的是页面内容，此时的页面是可以正常交互，那么此时页面的HTML文档是加载和解析完成的

   原理上是：浏览器下载文档 -> 浏览器解析文档（解析文档的步骤：
   1、 HTML -> DOM, CSS -> CSSOM;
   2、 DOM + CSSOM => Render Tree(渲染树);
   3、 Layout(根据渲染树计算出节点在页面中的大小和位置);
   4、 Paint(将节点绘制到浏览器上)） -> 加载和执行javascript会阻塞浏览器解析文档

3. DOMContentLoaded事件触发的确切时间

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

二、load事件

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