資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)言理解頁(yè)面的生命周期，文檔加載事件及順序?qū)﹂_發(fā)有十分的重要意義。同步的腳本最先執(zhí)行，它先于事件執(zhí)行。當(dāng)準(zhǔn)備就緒時(shí)，事件在上觸發(fā)。表示文檔的當(dāng)前狀態(tài)，可以在事件中跟蹤文檔狀態(tài)的變更。已經(jīng)解析完畢時(shí)觸發(fā)，幾乎與同時(shí)發(fā)生，但在事件之前觸發(fā)。
簡(jiǎn)言
理解WEB頁(yè)面的生命周期，文檔加載事件及順序?qū)EB開發(fā)有十分的重要意義。如果不理解，在元素未加載就提前操作元素，則得不到想要的結(jié)果。而如果頁(yè)面完全加載完成后，再進(jìn)行操作，則又會(huì)影響用戶體驗(yàn)。
一般來(lái)說(shuō)，大多數(shù)的操作我們都應(yīng)該放在DOMContentLoaded事件中執(zhí)行。采用如下形式：
document.addEventListener("DOMContentLoaded", function () {
alert("DOMContentLoaded");
});
當(dāng)初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，而無(wú)需等待樣式表、圖像和子框架的完成加載。
說(shuō)明理解WEB頁(yè)面的生命周期，文檔加載事件及順序?qū)EB開發(fā)有十分的重要意義。用過(guò)JQuery都知道，我們大多將代碼寫在$(document).ready()中，當(dāng)文檔加載完成后，就會(huì)執(zhí)行該函數(shù)。如果不這樣做，在文檔未加載完成之前操作DOM，就得不到想要的結(jié)果。
演示程序
42度空間-Html頁(yè)面的生命周期,DOMContentLoaded,load,beforeunload,unload
";
}
document.addEventListener("readystatechange", function () {
append("readyState : "+document.readyState);
});
document.addEventListener("DOMContentLoaded", function () {
append("DOMContentLoaded");
});
window.onload = function () {
append("window onload");
print();
};
append("script executed");
從演示程序運(yùn)行結(jié)果，得出一般瀏覽器的加載順序如下：
script executed
readyState : interactive
DOMContentLoaded
image onload
iframe onload
readyState : complete
window onload
從以上可以看出同步的Script總是先于其它事件執(zhí)行，而window.onload事件總是最后執(zhí)行。而image onload和iframe onload的先后順序并不確定。
結(jié)論
關(guān)于WEB頁(yè)面的生命周期，一般你應(yīng)該記住如下這些觀點(diǎn)，一些觀點(diǎn)從運(yùn)行結(jié)果中也可以得出。
同步的JavaScript腳本最先執(zhí)行，它先于DOMContentLoaded事件執(zhí)行。
當(dāng)DOM準(zhǔn)備就緒時(shí)，DOMContentLoaded事件在document上觸發(fā)。 我們可以在這個(gè)階段利用JavaScript來(lái)操作DOM元素。
所有腳本都執(zhí)行完畢，除了那些外部使用異步（async）或延遲（defer）加載的腳本
圖片和其他資源可能仍在載入過(guò)程中。
window上的onload事件，在頁(yè)面加載完所有資源后觸發(fā)。 我們很少使用它，因?yàn)橥ǔ５牟僮鞑挥玫鹊阶詈蟛艌?zhí)行。
window上的beforeunload事件，該事件在用戶準(zhǔn)備離開頁(yè)面，在unload事件之前觸發(fā)。 如果beforeunload返回一個(gè)字符串，瀏覽器會(huì)給出 用戶是否真的想離開的提示。
window上的unload事件，當(dāng)用戶最終離開時(shí)會(huì)觸發(fā)該事件。在unload的事件處理程序中，我們只能做簡(jiǎn)單的事情，不涉及延遲或詢問(wèn)用戶。 由于這個(gè)限制，它很少使用。
document.readyState表示文檔的當(dāng)前狀態(tài)，可以在readystatechange事件中跟蹤文檔狀態(tài)的變更。
loading – 文檔正在載入。
interactive – document已經(jīng)解析完畢時(shí)觸發(fā)，幾乎與DOMContentLoaded同時(shí)發(fā)生，但在DOMContentLoaded事件之前觸發(fā)。
complete – 文檔和資源加載完成時(shí)觸發(fā)，幾乎與window.onload同時(shí)發(fā)生，但在onload事件之前觸發(fā)。
一般來(lái)說(shuō)，大多數(shù)的操作我們都應(yīng)該放在DOMContentLoaded事件中執(zhí)行，而不要放在window.onload中執(zhí)行。
42度空間-在線演示程序
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92922.html
摘要：所以有可能在所有腳本執(zhí)行完畢后觸發(fā)。如果用戶即將離開頁(yè)面或者關(guān)閉窗口時(shí)，事件將會(huì)被觸發(fā)以進(jìn)行額外的確認(rèn)。狀態(tài)表示事件即將被觸發(fā)?？偨Y(jié)頁(yè)面事件的生命周期事件在樹構(gòu)建完畢后被觸發(fā)，我們可以在這個(gè)階段使用去訪問(wèn)元素。 頁(yè)面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....
摘要：所以有可能在所有腳本執(zhí)行完畢后觸發(fā)。如果用戶即將離開頁(yè)面或者關(guān)閉窗口時(shí)，事件將會(huì)被觸發(fā)以進(jìn)行額外的確認(rèn)。狀態(tài)表示事件即將被觸發(fā)?？偨Y(jié)頁(yè)面事件的生命周期事件在樹構(gòu)建完畢后被觸發(fā)，我們可以在這個(gè)階段使用去訪問(wèn)元素。 頁(yè)面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....
摘要：所以所需要的時(shí)間必然大于等于所需要的時(shí)間。頁(yè)面的生命周期主要有三個(gè)重要的事件，已經(jīng)構(gòu)建好，可以對(duì)節(jié)點(diǎn)進(jìn)行操作，所有資源加載完畢，可以對(duì)資源進(jìn)行一系列操作，比如獲取圖片寬高等基本不會(huì)用到，當(dāng)瀏覽器窗口關(guān)閉或者刷新時(shí)，會(huì)觸發(fā)事件。 DOMContentLoaded與load的區(qū)別 showImg(https://segmentfault.com/img/remote/14600000192...
摘要：簡(jiǎn)介最近對(duì)于文檔加載方法有了新的理解，因此整理成一片簡(jiǎn)記，方便以后進(jìn)行查閱。此狀態(tài)為樹構(gòu)建完成后觸發(fā)，和一樣，但在其之后觸發(fā)兼容性以上可用方法當(dāng)瀏覽器窗口，文檔或其資源將要卸載時(shí)，會(huì)觸發(fā)事件。沒(méi)有賦值時(shí)，該事件不做任何響應(yīng)。 簡(jiǎn)介 最近對(duì)于文檔加載方法有了新的理解，因此整理成一片簡(jiǎn)記，方便以后進(jìn)行查閱。先來(lái)一段Html，作為我們研究的基礎(chǔ)吧。 ...
閱讀 2448·2021-11-12 10:34
閱讀 1500·2019-08-29 16:15
閱讀 2707·2019-08-29 15:17
閱讀 1386·2019-08-23 17:09
閱讀 414·2019-08-23 11:37
閱讀 2477·2019-08-23 10:39
閱讀 515·2019-08-22 16:43
閱讀 3140·2019-08-22 14:53
