HTML文档生命周期钩子在不同浏览器生命周期状态下的触发点-html教程-PHP中文网

是，domcontentloaded在chrome 80+、firefox 70+、safari 14+中触发时机基本一致，均在html解析完成、dom树构建完毕后立即触发，不等待图片、css或iframe加载，差异仅源于同步脚本阻塞及浏览器对第三方脚本的并发策略微调。

html文档生命周期钩子在不同浏览器生命周期状态下的触发点

DOMContentLoaded 触发时机在 Chrome/Firefox/Safari 中是否一致

是，只要脚本执行顺序和资源加载方式相同，DOMContentLoaded 在现代浏览器（Chrome 80+、Firefox 70+、Safari 14+）中触发时机基本一致——都在 HTML 解析完成、DOM 树构建完毕后立即触发，不等待 <img>、<link rel="stylesheet"> 或 <iframe></iframe> 加载。

但实际差异常来自外部干扰：

未加 defer 或 async 的同步脚本会阻塞 HTML 解析，推迟 DOMContentLoaded；不同浏览器对脚本下载/执行的并发策略略有差异（如 Safari 对第三方域名脚本更保守），导致触发时间偏移几十毫秒
某些 CDN 或监控 SDK 插入的内联脚本若含 document.write，可能重写 DOM，强制浏览器重启解析流程——此时 DOMContentLoaded 会延后，且各浏览器对 document.write 的容错行为不完全统一
IE11 及更早版本不支持 DOMContentLoaded，必须降级用 document.onreadystatechange 监听 interactive 状态，而该状态在 IE 中可能比现代浏览器更早或更晚达到

load 事件在图片加载失败时还触发吗

触发。只要页面主文档（HTML）加载完成，且所有通过 HTML 声明的资源（包括 <img src="xxx">、<link href="xxx">、<iframe src="xxx"></iframe>）的请求已结束（无论成功或 404/timeout），load 就会触发。

这意味着：

<img src="404.jpg"> 会触发 load（因为请求已完成，只是响应码非 200）
但若图片 URL 被 DNS 拦截、被防火墙丢包、或因 CORS 被浏览器静默终止（如跨域图片无 crossorigin 属性），部分浏览器（如旧版 Edge）可能不将该请求计入“资源加载完成”，导致 load 不触发 —— 这属于边缘兼容性问题，现代浏览器已收敛
如果某张图片设置了 loading="lazy"，它不属于初始渲染必需资源，load 不等待它；但一旦浏览器决定加载它（比如滚动进入视口），它的单独 load 事件仍会触发

pageshow 和 pagehide 在 PWA 和 iOS Safari 中的可用性边界

pageshow 和 pagehide 在 PWA（尤其是 standalone 模式）和 iOS Safari 中存在明确限制，不是“不触发”，而是触发条件变窄。

Wechat Article Html

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

下载

关键事实：

iOS Safari 对 <iframe></iframe> 内嵌页面不触发 pagehide / pageshow，哪怕 iframe 是同源的；这是 WebKit 的已知行为，无法绕过
PWA 的 standalone 模式下，用户从桌面图标启动时，首次 pageshow 的 event.persisted 为 false；但按 Home 键切到后台再切回，第二次 pageshow 才可能为 true —— 这取决于系统是否真的将页面保留在内存中，而非 JS 控制
pagehide 在 iOS Safari 中可能延迟触发（甚至在页面已不可见后数百毫秒才发出），因此不适合做即时数据 flush；应改用 beforeunload + navigator.sendBeacon() 保证发送
Android Chrome 的 PWA 中，pageshow 的 persisted 判断更可靠，但若用户主动“清空最近任务”，页面会被销毁，后续 pageshow 仍是全新加载

readystatechange 的 interactive 状态为什么不能替代 DOMContentLoaded

因为 interactive 是一个瞬态中间状态，不是稳定锚点：它表示 HTML 解析完成、DOM 构建完毕，但脚本、样式表、图片等仍在加载 —— 而这个状态在多数现代浏览器中持续时间极短（常低于 1ms），addEventListener("readystatechange", ...) 很可能注册不及就跳过了。

更麻烦的是：

IE10 及以下会多次触发 readystatechange（如从 loading → interactive → complete），但现代浏览器只在状态变更时触发，且 interactive 可能一闪而过
即使监听到了 interactive，此时 CSSOM 可能尚未构建完成，getComputedStyle() 返回的值不可靠，offsetHeight 等布局属性大概率是 0
DOMContentLoaded 是单次、确定性事件，语义明确；而 interactive 并不保证 DOM 已可安全操作 —— 比如某个 <script></script> 标签刚好在 interactive 后立即执行并修改 DOM，你监听到的那一刻 DOM 其实还没“稳住”