第一版理解笔记:
首先理解这两个代表的是什么意思：
ready：表示文档结构已加载完成（不包含图片等非文字媒体文件）
onload：表示页面包含图片等文件在内的所有元素都加载完成
即先ready后onload
参考链接：https://segmentfault.com/a/1190000008933191
image
image
更新（了解根本原因）：
首先要了解documet.readyState(document的加载状态)
该属性的变化会触发document.readyStateChange事件
存在三种状态：
- loading：document仍在加载中
- interactive: 文档已解析完成（不包括图片、css等资源）-> （DOMContentLoaded事件即将被触发）
- complete：文档和所有资源完成加载（load事件即将触发）
document.onreadystatechange = function() {
console.log(document.readyState)
if (document.readyState === 'complete') {
console.log('初始化DOM 加载解析完成')
}
}
DOMContentLoaded事件
tips: jquery将DOMContentLoaded事件封装为ready事件
document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM完全加载以及解析'); // 但不包括css 图片等资源
});
load事件
// 监听方法1：
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
// 监听方法2：
window.onload = (event) => {
console.log('page is fully loaded');
};
观察页面整体加载顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面加载执行顺序</title>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOMContentLoaded:' + '初始化DOM加载并解析')
})
window.addEventListener('load', function(event) {
console.log('load:' + 'window 所有资源加载完成')
})
document.onreadystatechange = function() {
console.log('readyState:' + document.readyState)
}
window.addEventListener('beforeunload', function(event) {
console.log('即将关闭')
event.returnValue = "\o"
})
window.addEventListener('unload', function(event) {
console.log('即将关闭1')
})
</script>
</head>
<body>
<div>
测试中
</div>
</body>
</html>
// 打印顺序结果为：
// readyState:interactive
// DOMContentLoaded:初始化DOM加载并解析
// readyState:complete
// load:window 所有资源加载完成
// 点击关闭页面时的打印顺序：
// 打印出 即将关闭 —> 页面弹出是否确认离开 -> 确认 -> 即将关闭1
网友评论