從大前端的角度來(lái)講每個(gè)頁(yè)面都有生命周期，iOS有view生命周期，web頁(yè)面同樣也有生命周期；
so, 問(wèn)題來(lái)啦，web生命周期我們?cè)趺幢O(jiān)測(cè)呢？
答：生命周期會(huì)固定執(zhí)行某一些方法（函數(shù)），我們只要監(jiān)聽(tīng)函數(shù)就可以啦
生命周期執(zhí)行函數(shù)順序：
1、DOMContentLoaded-頁(yè)面開(kāi)始加載
2、load-頁(yè)面完全加載
3、beforeunload-頁(yè)面離開(kāi)前
4、unload-頁(yè)面完成離開(kāi)
同時(shí)您可以直接監(jiān)聽(tīng)readystatechange -監(jiān)聽(tīng)頁(yè)面加載的狀況
1、DOMContentLoaded-頁(yè)面開(kāi)始加載
瀏覽器已經(jīng)完全加載了HTML、DOM樹(shù)已經(jīng)構(gòu)建完畢， 但是像是圖片、資源和樣式表等外部資源可能并沒(méi)有下載完畢
DOMContentLoaded注意事項(xiàng):
A. HTML頁(yè)面時(shí)遇到了js標(biāo)簽，將無(wú)法繼續(xù)構(gòu)建DOM樹(shù)。 UI渲染線程與JS引擎是互斥的，當(dāng)JS引擎執(zhí)行時(shí)UI線程會(huì)被掛起，必須立即執(zhí)行腳本
B. HTML頁(yè)面時(shí)遇到了外部腳本js,也會(huì)暫停DOM樹(shù)構(gòu)建，所以 DOMContentLoaded 也會(huì)等待外部腳本;
C.因此為了不阻塞DOM樹(shù)的構(gòu)建和頁(yè)面的渲染，
2、load-頁(yè)面完全加載
瀏覽器已經(jīng)加載了所有的資源（圖像，樣式表等）
3、beforeunload-頁(yè)面離開(kāi)前
如果用戶即將離開(kāi)頁(yè)面或者關(guān)閉窗口時(shí),可以詢問(wèn)用戶是否保存了更改以及是否確定要離開(kāi)頁(yè)面
4、unload-頁(yè)面完成離開(kāi)
用戶離開(kāi)頁(yè)面的時(shí)候，window對(duì)象上的unload事件會(huì)被觸發(fā)， 我們可以做一些不存在延遲的事情，比如關(guān)閉彈出的窗口，可是我們無(wú)法阻止用戶轉(zhuǎn)移到另一個(gè)頁(yè)面上
5、額外可以監(jiān)聽(tīng)readystatechange：監(jiān)聽(tīng)頁(yè)面加載的狀況
A.loading 加載中
B.interactive 互動(dòng) - 文檔已經(jīng)完成加載，文檔已被解析，但是諸如圖像，樣式表和框架之類(lèi)的子資源仍在加載
C.complete - 文檔和所有子資源已完成加載。狀態(tài)表示 load 事件即將被觸發(fā)
監(jiān)聽(tīng)方法
document.addEventListener('DOMContentLoaded', function () {
console.log('頁(yè)面開(kāi)始加載------DOMContentLoaded');
});
window.onload = function() {
console.log('頁(yè)面完全加載------onload');
this.getWindowWidthHeight();
};
window.onbeforeunload = ()=>{
console.log('頁(yè)面離開(kāi)前------onbeforeunload');
};
window.onunload = ()=>{
console.log('頁(yè)面完成離開(kāi)------onunload');
};
document.addEventListener('readystatechange', function () {
console.log('頁(yè)面當(dāng)前狀態(tài)-----readyState=',document.readyState);
});
結(jié)果:
頁(yè)面開(kāi)始加載------DOMContentLoaded
頁(yè)面當(dāng)前狀態(tài)-----readyState= complete
頁(yè)面完全加載------onload
H5系列
Web前端基礎(chǔ)篇-HTML-01-BOM瀏覽器對(duì)象模型
Web前端基礎(chǔ)篇-HTML-02-HTML的生命周期
Web前端基礎(chǔ)篇-HTML-03-事件處理系統(tǒng)
Web前端基礎(chǔ)篇-HTML-04-HTML 渲染流程
Web前端基礎(chǔ)篇-HTML5-05-最全本地存儲(chǔ)總結(jié)
Web前端基礎(chǔ)篇-HTML5-06-離線緩存AppCache
Web前端基礎(chǔ)篇-HTML5-07-瀏覽器緩存機(jī)制
