第一版理解筆記:
首先理解這兩個代表的是什么意思：
ready：表示文檔結(jié)構(gòu)已加載完成（不包含圖片等非文字媒體文件）
onload：表示頁面包含圖片等文件在內(nèi)的所有元素都加載完成
即先ready后onload
參考鏈接：https://segmentfault.com/a/1190000008933191
image
image
更新（了解根本原因）：
首先要了解documet.readyState(document的加載狀態(tài))
該屬性的變化會觸發(fā)document.readyStateChange事件
存在三種狀態(tài)：
- loading：document仍在加載中
- interactive: 文檔已解析完成（不包括圖片、css等資源）-> （DOMContentLoaded事件即將被觸發(fā)）
- complete：文檔和所有資源完成加載（load事件即將觸發(fā)）
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事件
// 監(jiān)聽方法1：
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
// 監(jiān)聽方法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>頁面加載執(zhí)行順序</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('即將關(guān)閉')
event.returnValue = "\o"
})
window.addEventListener('unload', function(event) {
console.log('即將關(guān)閉1')
})
</script>
</head>
<body>
<div>
測試中
</div>
</body>
</html>
// 打印順序結(jié)果為：
// readyState:interactive
// DOMContentLoaded:初始化DOM加載并解析
// readyState:complete
// load:window 所有資源加載完成
// 點擊關(guān)閉頁面時的打印順序：
// 打印出 即將關(guān)閉 —> 頁面彈出是否確認離開 -> 確認 -> 即將關(guān)閉1
