原来 HTML 也有生命周期

说起“生命周期”，你可能第一反应是 Vue、React 这样的前端框架。但你有没有想过：HTML 页面，其实也有自己的生命周期！

虽然 HTML 本身没有框架那样的生命周期钩子，但浏览器在加载、解析、渲染、交互、关闭整个页面过程中，其实经历了一整套完整的流程，而且我们可以通过一些原生事件精确监听这些“节点”。

今天就来拆解一下：HTML 的生命周期，到底是怎么回事？

1. HTML 的“出生”：从请求到解析

当用户在地址栏输入一个 URL 或点击一个链接，浏览器会向服务器发送 HTTP 请求。服务器返回 HTML 文件后，浏览器开始执行 从头到尾的读取和解析。

这个阶段包含：

生命周期阶段名词对应：

HTML载入开始 ≈ HTML生命周期的诞生

HTML 不是直接显示在页面上的，它会被浏览器解析成一个结构化的 DOM 树（文档对象模型），这个过程叫做“构建 DOM”。

与此同时，CSS 也被解析并构建成 CSSOM 树。

等到 DOM 和 CSSOM 都准备好后，合成一棵叫 Render Tree 的渲染树，准备开始绘制。

生命周期事件：DOMContentLoaded

document.addEventListener("DOMContentLoaded", function () {
  console.log("DOM 已构建完成（不等样式图像）");
});

这个事件表示：HTML 已经完全解析完毕，DOM 树构建完成，但此时图片、样式表等静态资源可能还没加载完。

这时页面进入了“可视化”生命周期：

这一阶段就像 HTML 的“成长”阶段：从代码变成真实可见的页面。

生命周期事件：window.onload

window.onload = function () {
  console.log("页面所有资源加载完毕（包括图片、样式等）");
};

这个事件意味着：整个页面，包括所有静态资源都已加载完成。

当页面渲染完毕，用户开始滚动、点击、输入，这时页面进入了一个相对“稳定但活跃”的阶段。

JS 脚本也在这个时候开始大量运行，比如：

这个阶段，就是 HTML 生命周期中的“成熟期”。

当用户关闭标签页、刷新页面或跳转到其他链接，页面就会被卸载。

生命周期事件： beforeunload 和 unload

window.addEventListener("beforeunload", function (e) {
  e.preventDefault(); // 有些浏览器需要显式调用
  e.returnValue = "确定离开吗？"; // 显示提示（部分浏览器支持）
});

window.addEventListener("unload", function () {
  console.log("页面即将卸载，可做清理工作");
});