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