HTML Native Lifecycle（生命周期） 通常指浏览器在加载和处理网页时经历的事件和阶段。虽然 HTML 本身是一种标记语言，缺乏像 JavaScript 那样的生命周期钩子，但 HTML 生命周期事件实际上是通过 JavaScript 与 DOM（文档对象模型）交互来管理的。
当浏览器加载网页时，它会从服务器接收 HTML 文件并开始解析它。在此阶段，浏览器创建 DOM 树（文档对象模型）并将 HTML 转换为可操作的 DOM 对象。
严格来说，HTML 解析是页面加载过程中的一个重要阶段，但不属于传统意义上的“生命周期事件”范畴，因为它无法通过 JavaScript 直接捕获或监听。然而，从更广泛的角度来看，HTML 解析是整个页面生命周期中不可或缺的一部分，这使其成为讨论 HTML 生命周期的关键组成部分。
这个过程是浏览器内部的，所以开发者不能直接监听这个阶段。然而，他们可以通过优化 HTML 结构和最小化阻塞资源（例如 JavaScript 文件）来提高解析速度。
当浏览器解析 HTML 时，它会遇到外部资源。根据资源类型、加载方式（同步或异步）和优先级，浏览器决定如何继续加载和渲染页面。这种行为直接影响页面的渲染顺序以及用户可见内容的加载时间。
不同的资源类型有不同的加载行为，影响页面解析和渲染：
CSS 加载：当浏览器遇到 时标签，它会暂停页面渲染，直到 CSS 文件完全加载和解析。 CSS 被视为渲染阻塞资源，因为如果没有 CSS 文件，页面布局和样式就无法正确渲染。
JavaScript 加载：默认情况下，当浏览器遇到 <script> 时，标签，它会停止 HTML 解析，直到 JavaScript 文件被加载并执行。这称为同步加载。同步加载的 JavaScript 会阻止 HTML 解析，从而影响 DOMContentLoaded 和加载事件的时间。</script>
总体而言，加载外部资源与页面生命周期密切相关，因为外部资源加载会影响解析、渲染以及关键生命周期事件（例如 DOMContentLoaded 和加载）的触发。外部资源加载时间越短，生命周期事件触发越快。
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 可能会降低用户体验，因此仅应在绝对必要时使用它，例如未保存数据的情况。
当页面完全卸载时（例如，当页面关闭、刷新或导航离开时），会触发卸载事件。与 beforeunload 不同，unload 事件不能阻止用户离开页面。主要用于执行最终的清理任务，例如清除临时数据、取消异步请求、释放内存等。
unload 事件无法提示用户，与 beforeunload 不同。相反，它用于关闭 WebSocket 连接、将数据保存到本地存储或清除计时器等操作。
卸载事件的一个特定应用是在页面卸载之前发送分析数据。 navigator.sendBeacon(url, data) 方法可用于在后台发送数据，而不会延迟页面卸载。例如：
if (document.readyState === 'complete') {
// The page is fully loaded; perform page operations
}
当 sendBeacon 请求完成时，浏览器可能已经离开文档，因此无法检索服务器响应（出于分析目的，响应通常为空）。
HTML 解析构成了页面生命周期的基础，但它本身并不是 JavaScript 可监听的生命周期事件。 DOMContentLoaded 事件在 DOM 树完全构建时触发，而 load 事件在页面上的所有资源完全加载后触发。 beforeunload 事件提示用户确认导航离开页面，unload 事件用于页面卸载期间的资源清理。这些事件为开发人员提供了对页面加载和卸载过程的控制，有助于改善用户体验和页面性能。
等等，HTML 有生命周期吗？ 是用于 Web 托管、异步任务和 Redis 的下一代无服务器平台：
多语言支持
免费部署无限个项目
无与伦比的成本效率
简化的开发者体验
轻松的可扩展性和高性能
在文档中探索更多信息！
在x上关注我们：@leapcellhq
在我们的博客上阅读
以上是等等，HTML 有生命周期吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
