等等，HTML 有生命週期嗎？
- Mary-Kate Olsen原創
- 2025-01-24 08:32:11779瀏覽
> html本機生命週期（LifeCycle）
>瀏覽器加載網頁時，它會從服務器接收HTML文件並開始解析。在此階段，瀏覽器會創建一個DOM樹（文檔對像模型），並將HTML轉換為可操作的DOM對象。 嚴格來說，HTML解析是頁面加載過程中的重要階段，但在傳統意義上並不屬於“生命週期事件”的類別，因為它無法通過JavaScript直接捕獲或直接聽取。但是，從更廣泛的角度來看，HTML解析是整個頁面生命週期中必不可少的一部分，使其成為有關HTML生命週期討論的關鍵組成部分。
這個過程是瀏覽器內部的，因此開發人員無法直接聆聽此階段。但是，它們可以通過優化HTML結構並最小化阻止資源（例如JavaScript文件）來提高解析速度。>
加載外部資源作為瀏覽器解析HTML，它遇到了外部資源。根據資源類型，加載方法（同步或異步）以及優先級，瀏覽器決定如何繼續加載和渲染頁面。此行為直接影響頁面的渲染順序和用戶可見的內容的負載時間。
不同的資源類型具有獨特的加載行為，會影響頁面解析和渲染：
> css loading
- > javaScript Loading
- ：默認情況下，當瀏覽器遇到a＆lt; script＆gt;標籤，它會停止HTML解析，直到加載和執行JavaScript文件為止。這被稱為同步加載。同步加載的JavaScript阻塞HTML解析，影響Domcontentload和“加載事件的時間”。
總體而言，加載外部資源與頁面生命週期緊密相關，因為外部資源加載會影響解析，渲染以及關鍵生命週期事件（例如Domcontentloaded和Load）的觸發。較短的外部資源加載時間，觸發了更快的生命週期事件。
就緒狀態和就緒狀態更改
readyState和readystatechange是兩個關鍵的瀏覽器屬性和事件，用於跟踪文檔和網絡請求（例如AJAX請求）的狀態。它們幫助開發人員了解網頁加載過程的不同階段，並在這些階段執行相應的操作。它們主要用於文檔加載和網絡請求（例如 XMLHttpRequest）的上下文中。
文檔就緒狀態
document.readyState屬性代表文檔的當前狀態，有三個可能的值，對應不同的文檔加載階段：
- loading：文檔仍在加載，並且仍在解析 HTML。 DOM 樹尚未完全構建。外部資源（如圖像和样式表）可能尚未加載或處理。
- interactive：文檔的 HTML 已完全加載和解析，並且 DOM 樹已構建。但是，樣式表、圖像和其他資源可能尚未完全加載。
- 完整：頁面上的所有資源，包括 HTML、CSS、JavaScript、圖像和子框架，均已完全加載和處理。頁面已完全準備就緒。
使用 document.readyState，開發者可以檢查文檔的加載狀態，並根據不同的狀態執行相應的操作。例如：
if (document.readyState === 'complete') { // The page is fully loaded; perform page operations }就緒狀態改變事件
readystatechange 事件在文檔的readyState改變時觸發。開發者可以監聽readystatechange事件來執行不同加載階段的特定邏輯。例如：
document.addEventListener('readystatechange', function () { if (document.readyState === 'interactive') { // The DOM tree has been completely built; DOM manipulation is now possible console.log('DOM is fully parsed'); } else if (document.readyState === 'complete') { // The entire page, including all resources, is fully loaded console.log('Page and resources are fully loaded'); } });下面是一個 HTML 示例，說明瞭如何使用 document.readyState 和 readystatechange 來跟踪不同的文檔加載階段。頁麵包含基本的HTML元素，並在不同的readyState階段顯示相應的內容或信息：
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document ReadyState Example</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } .status { font-size: 1.2em; color: #333; margin: 20px 0; } img { max-width: 100%; height: auto; } </style> <h1>Hello World</h1> <script> function updateStatus() { console.log(document.readyState); switch (document.readyState) { case 'loading': console.log('loading'); break; case 'interactive': console.log('interactive'); break; case 'complete': console.log('complete'); break; } } updateStatus(); document.addEventListener('readystatechange', updateStatus); </script>上述代碼的輸出：
loading interactive complete
DOMContentLoaded 事件
DOMContentLoaded 事件是 HTML 文檔加載過程中瀏覽器觸發的關鍵事件。這意味著HTML文檔中的所有元素已經被完全解析並且DOM樹已經構建完成。但是，圖像、樣式表和視頻等外部資源可能尚未完成加載。這是 DOMContentLoaded 和 load 事件之間的主要區別。
DOMContentLoaded 事件發生在文檔對像上，必須使用 addEventListener 捕獲：
document.addEventListener('DOMContentLoaded', () => {});當瀏覽器解析完 HTML 文檔並生成所有 DOM 節點時，會觸發 DOMContentLoaded 事件。但是，它不需要完全加載外部資源（例如圖像、視頻、樣式表或字體文件）。
例如，如果頁麵包含大圖像，則 DOMContentLoaded 事件將在圖像完全加載之前觸發。至此，DOM樹就完全構建完成了，開發者可以操作和訪問頁面上的DOM元素了。這是一個例子：
if (document.readyState === 'complete') { // The page is fully loaded; perform page operations }如果頁面上存在同步 JavaScript 文件（即沒有 async 或 defer 屬性的腳本），瀏覽器在遇到 <script> 時會暫停 HTML 解析。 tag，等待腳本執行，然後繼續解析。這將延遲 DOMContentLoaded 事件的觸發。 <br> </script>
document.addEventListener('readystatechange', function () { if (document.readyState === 'interactive') { // The DOM tree has been completely built; DOM manipulation is now possible console.log('DOM is fully parsed'); } else if (document.readyState === 'complete') { // The entire page, including all resources, is fully loaded console.log('Page and resources are fully loaded'); } });輸出順序：
- 庫已加載...
- DOM 準備好了！
不會阻止 DOMContentLoaded 事件的腳本包括：
- 具有 async 屬性的腳本
- 使用 document.createElement('script') 動態添加腳本到網頁
window.onload 事件
當整個頁面（包括樣式、圖像和其他資源）完全加載時，在 window 對像上觸發 load 事件。可以使用 onload 屬性捕獲此事件。
這是一個正確顯示圖像大小的示例，因為 window.onload 會等待所有圖像完全加載：
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document ReadyState Example</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } .status { font-size: 1.2em; color: #333; margin: 20px 0; } img { max-width: 100%; height: auto; } </style> <h1>Hello World</h1> <script> function updateStatus() { console.log(document.readyState); switch (document.readyState) { case 'loading': console.log('loading'); break; case 'interactive': console.log('interactive'); break; case 'complete': console.log('complete'); break; } } updateStatus(); document.addEventListener('readystatechange', updateStatus); </script>window.onbeforeunload 事件
beforeunload 事件在頁面即將被卸載之前觸發（例如，當用戶導航到另一個頁面、關閉選項卡或刷新頁面時）。此事件允許開發人員提示用戶確認是否確實要離開頁面。它通常用於提醒用戶保存未保存的數據或提醒他們潛在的數據丟失。
瀏覽器允許在此事件期間顯示一條短消息，詢問用戶是否確定要離開頁面。例如，當用戶在未保存的表單中輸入內容時，開發人員可以使用 beforeunload 來防止頁面意外關閉或刷新。
現代瀏覽器不顯示自定義提示消息。相反，它們顯示標準化的警告消息。這是一個例子：
loading interactive complete
當用戶嘗試離開頁面時，此事件會觸發確認對話框，詢問他們是要離開還是留在頁面上。
出於安全和用戶體驗方面的考慮，瀏覽器會忽略大多數自定義消息，而是顯示通用對話框。過度使用 beforeunload 可能會降低用戶體驗，因此僅應在絕對必要時使用它，例如未保存數據的情況。
卸載事件
當頁面完全卸載時（例如，當頁面被關閉，刷新或從遠離範圍時），將觸發卸載事件。與前加載不同，卸載事件不能阻止用戶離開頁面。它主要用於執行最終的清理任務，例如清除臨時數據，取消異步請求和發佈內存。
>與前加載不同，卸載事件無法提示用戶。相反，它用於操作，例如關閉WebSocket連接，將數據保存到本地存儲或清除計時器。
>卸載事件的一個特定應用是在頁面卸載之前發送分析數據。 Navigator.SendBeacon（URL，數據）方法可用於在後台發送數據，而無需延遲頁面卸載。例如：
if (document.readyState === 'complete') { // The page is fully loaded; perform page operations }> sendbeacon請求完成後，瀏覽器可能已經離開了文檔，因此無法檢索服務器響應（通常是為了分析目的而空的響應）。>
概括HTML解析構成了頁面生命週期的基礎，但它本身並不是JavaScript-Listenenable可依靠的生命週期事件。當DOM樹完全構造時，觸發DOMCONTENTLOAD事件，而在頁面上的所有資源都完全加載後，負載事件會觸發。 TERUNLOAD事件提示用戶確認從頁面上瀏覽導航，並在頁面卸載期間使用卸載事件進行資源清理。這些事件為開發人員提供了對頁面加載和卸載過程的控制，有助於提高用戶體驗和頁面性能。
我們是等等，HTML 有生命週期嗎？，您是託管Node.js項目的最佳選擇。
leapcell是用於Web託管，異步任務和REDIS的下一個無服務器的平台：
多語言支持
使用node.js，python，go或Rust開發。
- >免費部署無限項目
- >僅用於使用付費 - 沒有請求，沒有收費。
>無與倫比的成本效率
- >付費，沒有閒置費。 >
> 簡化的開發人員經驗
- 直觀的UI，用於輕鬆設置。
- 全自動CI/CD管道和Gitops集成。
>
輕鬆的可伸縮性和高性能- >自動縮放以輕鬆處理高分子。 >
- 零操作開銷 - 只專注於構建。
在文檔中探索更多！ >
在 X 上追蹤我們：@等等，HTML 有生命週期嗎？HQ
閱讀我們的部落格
以上是等等，HTML 有生命週期嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！