> html本機生命週期（LifeCycle）
>
加載外部資源作為瀏覽器解析HTML，它遇到了外部資源。根據資源類型，加載方法（同步或異步）以及優先級，瀏覽器決定如何繼續加載和渲染頁面。此行為直接影響頁面的渲染順序和用戶可見的內容的負載時間。
不同的資源類型具有獨特的加載行為，會影響頁面解析和渲染：
總體而言，加載外部資源與頁面生命週期緊密相關，因為外部資源加載會影響解析，渲染以及關鍵生命週期事件（例如Domcontentloaded和Load）的觸發。較短的外部資源加載時間，觸發了更快的生命週期事件。
readyState和readystatechange是兩個關鍵的瀏覽器屬性和事件，用於跟踪文檔和網絡請求（例如AJAX請求）的狀態。它們幫助開發人員了解網頁加載過程的不同階段，並在這些階段執行相應的操作。它們主要用於文檔加載和網絡請求（例如 XMLHttpRequest）的上下文中。
document.readyState屬性代表文檔的當前狀態，有三個可能的值，對應不同的文檔加載階段：
使用 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 事件是 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');
}
});
輸出順序：
不會阻止 DOMContentLoaded 事件的腳本包括：
當整個頁面（包括樣式、圖像和其他資源）完全加載時，在 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>
beforeunload 事件在頁面即將被卸載之前觸發（例如，當用戶導航到另一個頁面、關閉選項卡或刷新頁面時）。此事件允許開發人員提示用戶確認是否確實要離開頁面。它通常用於提醒用戶保存未保存的數據或提醒他們潛在的數據丟失。
瀏覽器允許在此事件期間顯示一條短消息，詢問用戶是否確定要離開頁面。例如，當用戶在未保存的表單中輸入內容時，開發人員可以使用 beforeunload 來防止頁面意外關閉或刷新。
現代瀏覽器不顯示自定義提示消息。相反，它們顯示標準化的警告消息。這是一個例子：
loading interactive complete
當用戶嘗試離開頁面時，此事件會觸發確認對話框，詢問他們是要離開還是留在頁面上。
出於安全和用戶體驗方面的考慮，瀏覽器會忽略大多數自定義消息，而是顯示通用對話框。過度使用 beforeunload 可能會降低用戶體驗，因此僅應在絕對必要時使用它，例如未保存數據的情況。
將觸發卸載事件。與前加載不同，卸載事件不能阻止用戶離開頁面。它主要用於執行最終的清理任務，例如清除臨時數據，取消異步請求和發佈內存。
>與前加載不同，卸載事件無法提示用戶。相反，它用於操作，例如關閉WebSocket連接，將數據保存到本地存儲或清除計時器。
>卸載事件的一個特定應用是在頁面卸載之前發送分析數據。 Navigator.SendBeacon（URL，數據）方法可用於在後台發送數據，而無需延遲頁面卸載。例如：
if (document.readyState === 'complete') {
// The page is fully loaded; perform page operations
}
>
概括我們是等等，HTML 有生命週期嗎？，您是託管Node.js項目的最佳選擇。
leapcell是用於Web託管，異步任務和REDIS的下一個無服務器的平台：
使用node.js，python，go或Rust開發。
>無與倫比的成本效率
簡化的開發人員經驗
>
輕鬆的可伸縮性和高性能在文檔中探索更多！ > 在 X 上追蹤我們：@等等，HTML 有生命週期嗎？HQ 閱讀我們的部落格
以上是等等，HTML 有生命週期嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
