网页加载时触发的事件及顺序

当我们打开网页，网页加载过程大致为

• 解析HTML文档结构
• 加载外部样式表及JavaScript脚本
• 执行JavaScript脚本
• DOM树渲染完成
• 加载未完成的外部资源（如图片，音频等）
• 页面加载完成

对于以上过程，发生的事件有

document readystatechange事件

　　readyState 属性描述了当前文档的加载状态，在整个加载过程中 document.readyState会不断变化，每次变化都会触发readystatechange事件。

　　readyState 有以下状态：

• uninitialized - 还未开始载入
• loading - 载入中
• interactive - 互动文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载，文档与用户可以开始交互
• complete - 载入完成

DOMContentLoaded事件

      DOMContentLoaded事件是docoment对象上的事件。指的是DOM已经加载完毕。

　  DOM树渲染完成时触发DOMContentLoaded事件，此时外部资源可能并未加载完成。

window.load事件

     load事件是window对象上的事件。指的是网页资源已经加载完毕（包括但不限于DOM、图片、音频、脚本、插件资源以及CSS）

　 所有的资源全部加载完成会触发window 的 load事件。