WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload
簡言
理解WEB頁面的生命周期，文檔加載事件及順序對WEB開發有十分的重要意義。如果不理解，在元素未加載就提前操作元素，則得不到想要的結果。而如果頁面完全加載完成后，再進行操作，則又會影響用戶體驗。
一般來說，大多數的操作我們都應該放在DOMContentLoaded事件中執行。采用如下形式：
document.addEventListener('DOMContentLoaded', function () {alert("DOMContentLoaded"); });當初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成加載。
說明
理解WEB頁面的生命周期，文檔加載事件及順序對WEB開發有十分的重要意義。用過JQuery都知道，我們大多將代碼寫在$(document).ready()中，當文檔加載完成后，就會執行該函數。如果不這樣做，在文檔未加載完成之前操作DOM，就得不到想要的結果。
演示程序
<!DOCTYPE HTML> <html> <head><meta charset="utf-8"><title>42度空間-Html頁面的生命周期,DOMContentLoaded,load,beforeunload,unload</title> </head> <body> <div id="main"></div> <iframe src="http://res.42du.cn/static/html/iframe.html" height="35" onload="append('iframe onload')"></iframe> <div><img src="http://res.42du.cn/up/201802/cbbtiga6.jpg?cache=none" onload="append('image onload')"></div> <script>var output = "";function print() {document.getElementById("main").innerHTML = output;}function append(data) {output = data " <br />";}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> </body> </html>從演示程序運行結果，得出一般瀏覽器的加載順序如下：
- 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度空間-在線演示程序
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初学servlet之使用web.xml配
- 下一篇： 1.原生js封装的获取某一天是当年的第几