PHP页面加载成功,页面加载时触发的事件及顺序

前言

页面加载时，大致可以分为以下几个步骤：开始解析HTML文档结构

加载外部样式表及JavaScript脚本

解析执行JavaScript脚本

DOM树渲染完成

加载未完成的外部资源(如 图片)

页面加载成功

那么在这整个过程中触发了哪些常用的事件呢？

document readystatechange事件

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

readyState有以下状态：

loading / 加载document 仍在加载。

interactive / 互动文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

complete / 完成T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

比如说在步骤2的时候对应 interactive 步骤5之后对应complete ，都会触发readystatechange事件。

PS:文档，图片等加载时的readyState 和 XMLHttpRequest.readyState 是不一样的。要注意区分

document DOMContentLoaded事件

DOM树渲染完成时触发DOMContentLoaded事件，此时可能外部资源还在加载。 jquery中的ready事件就是同样的效果

window load事件

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

doucment 的load事件无法触发，但是MDN上却有这个事件？求大神指导！！！

实例

测试页面加载时，事件触发次序

测试页面加载时，事件触发次序

测试页面加载时，事件触发次序

console.log('resolve body JavaScript');

window.addEventListener('load',function(){

console.log('window load');

})

document.addEventListener('readystatechange',function(){

console.log('document ' + document.readyState);

})

document.addEventListener('DOMContentLoaded',function(){

console.log('document DOMContentLoaded');

}) //document 没有load事件?? document.addEventListener('load',function(){

console.log('document load');

})

在chrome中的日志输出如下：

resolve body JavaScript --> document interactive --> document DOMContentLoaded --> document complete --> window load

完全符合预期有木有。所以在只需要文档结构加载完成就可以执行的脚本，可以监听DOMContentLoaded ；需要所有内容都加载完成才能执行的脚本，要监听window.onload 或者 document.readyState === 'complete'。