页面加载顺序:
- 开始解析HTML文档结构
- 加载外部样式表及JavaScript脚本
- 解析执行JavaScript脚本
- DOM渲染完成
- 加载未完成的资源(图片)
- 页面加载完成
页面加载过程中触发的事件:
document.onreadystatechange
document.onreadystatechange = function() { // 文档加载状态改变事件处理
if (document.readyState === "loading") { // document加载中
console.log(document.readyState);
}
if (document.readyState === "interactive") { // 互动文档加载完成,文档解析完成,但是如图像,样式表和框架等子资源仍在加载中
console.log(document.readyState);
}
if (document.readyState === "complete") { // 文档和所有子资源加载完成,load事件即将被触发
console.log(document.readyState);
}
}
readyState属性描述了文档的加载状态,整个加载过程中document.readyState会不断变化,每次变化都触发readystatechange事件。
也可以用事件监听器去绑定:
document.addEventListener("readystatechange", function() {
console.log(document.readyState);
});
2.document的DOMContentLoaded事件
DOM树渲染完成时候触发DOMContentLoaded事件,此时可能外部资源还在加载。jQuery中的ready事件就是实现的这个事件。
3.window的load事件
当所有的资源全部加载完成后就会触发window的load事件。