HTML怎么做页面生命周期_html页面生命周期事件顺序【建议收藏】-html教程-PHP中文网

DOMContentLoaded在HTML解析完成、DOM树构建完毕后立即触发，此时可安全操作DOM（如querySelector、事件绑定），但图片、CSS等资源可能未加载；load则需等待所有资源（图片、样式表、iframe等）加载完才触发，延迟高且易被阻塞，故DOMContentLoaded更常用。

html怎么做页面生命周期_html页面生命周期事件顺序【建议收藏】

DOMContentLoaded 是你操作 DOM 最早且最安全的时机；load 等所有资源（图片、CSS、iframe）加载完才触发，通常没必要等；beforeunload 是唯一能弹出确认对话框的出口，但现代浏览器已屏蔽自定义文案。

DOMContentLoaded 什么时候触发？为什么它比 `load` 更常用

它在 HTML 解析完成、DOM 树构建完毕后立即触发，此时 document.querySelector、addEventListener 等都能正常工作，但 <img>、外部 CSS、字体等可能还没加载完。

常见错误现象：document.getElementById("myImg").naturalWidth 返回 0 —— 因为图片还没加载，这不是 DOMContentLoaded 的问题，是资源未就绪。

适合做：绑定事件监听器、初始化 UI 组件、读取表单字段、调用 getBoundingClientRect()（只要不依赖图片尺寸或渲染后样式）
不适合做：获取 <img> 的宽高、依赖 computedStyle 中由外部 CSS 决定的值（比如 background-image 加载后的实际尺寸）
性能影响：几乎无延迟，比 load 快得多，尤其在页面含大量图片或第三方资源时

`load` 事件到底等什么？哪些资源它不等

load 监听的是 window，它等待的是整个页面及其所有依赖资源：所有 <img>、<link rel="stylesheet">、<script src></script>、<iframe></iframe>，甚至 <object></object> 和 <embed></embed> 的加载完成。

但它不等待：通过 fetch() 或 XMLHttpRequest 发起的异步请求、Service Worker 安装、setTimeout 定时器、Web Worker 启动。

典型使用场景：需要准确读取 <img>.naturalWidth 或 <canvas></canvas> 绘制前确保背景图已加载
注意兼容性：window.addEventListener("load", handler) 和 window.onload = handler 效果相同，但后者会覆盖前一个赋值；推荐用 addEventListener
风险点：如果某个图片 404 或 CDN 慢，load 会卡住，用户交互可能被阻塞数秒

`beforeunload` 怎么写才有效？为什么有时不弹窗

它只在用户主动触发导航行为（刷新、关闭标签页、输入新 URL、点击链接）时触发，且仅当页面有“有效用户交互”后才允许弹窗 —— 比如用户点过按钮、输过文字、切换过 tab，纯自动脚本调用 location.href 不算。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

错误示例：window.addEventListener("beforeunload", () => "离开？") —— 现代 Chrome/Firefox/Safari 已忽略返回字符串，不会显示自定义文案，只弹系统默认提示。

正确写法：只需给 event.returnValue 赋任意真值，例如 event.returnValue = true，浏览器就会弹默认确认框
必须条件：该事件监听器需在用户首次交互（如 click、input）之后注册，否则部分浏览器直接忽略
容易踩的坑：在 SPA 中，用 history.pushState 切换路由不算“离开页面”，beforeunload 不会触发；要监听路由变化得靠框架自己的钩子（如 React Router 的 useBlocker）

`unload` 还能用吗？替代方案是什么

unload 在页面卸载过程中触发，但此时 DOM 已不可靠 —— 元素可能已被销毁，console.log 可能不输出，fetch() 会被静默取消。Chrome 自 2019 年起已禁用 unload 中的大多数 API，Firefox 也逐步限制。

它曾经用于发统计、清理 Web Worker，但现在基本失效。

不要依赖 unload 做关键清理，比如 localStorage 写入可能丢失
替代方案：pagehide（更可靠，支持 persisted 属性判断是否进 bfcache）、visibilitychange（监听页面可见性）、或在 beforeunload 中同步保存关键状态
真正需要“离开即上报”的场景，优先用 navigator.sendBeacon()，它在 beforeunload 中也能异步发出请求且不阻塞卸载

最易被忽略的一点：DOMContentLoaded 不保证 CSSOM 构建完成，如果脚本里调用了 getComputedStyle(el).color，而对应样式来自尚未解析完的外部 CSS 文件，结果可能是初始值而非最终样式 —— 这种情况得用 document.fonts.ready 或监听 style 标签的 load 事件来补救。