资源加载监控需用捕获阶段的document.addEventListener('error', handler, true)区分资源失败与JS错误，并结合performance.getEntries()反推未触发error的失败资源，同时确保监控脚本轻量、前置、无阻塞。
资源加载监控不是加个 window.addEventListener('error') 就完事——它必须区分错误类型、捕获时机、上报方式，否则你看到的“失败率 3%”可能是跨域脚本的假阳性，也可能是 CDN 节点彻底挂掉的真实告警。
怎么捕获静态资源加载失败（script/img/link）
不能只靠 window.onerror，它对资源加载失败基本无效（尤其跨域时只报 Script error.）。真正可用的是捕获阶段的 error 事件：
- 必须用
document.addEventListener('error', handler, true)，第三个参数true表示捕获阶段，否则子元素（如<img alt="HTML怎么做资源加载监控_html静态资源加载性能监控【面试必备】" >）抛出的错误会被中间节点拦截 - 判断是否为资源加载失败：检查
e.target是否存在，且'src' in e.target || 'href' in e.target - 排除干扰：过滤掉
e.target === window（这是 JS 运行时错误，归window.onerror管） - 注意：该监听会收到所有资源错误，包括内联
<style></style>解析失败（e.target.localName === 'style'），但无法捕获 CSS@import失败
如何用 performance.getEntries() 补全“未触发 error 事件”的失败
performance.getEntries() 返回的是已加载完成的资源列表，它本身不报告失败，但能帮你反推“哪些该加载却没出现”：
- 只在
window.addEventListener('load', ...)里调用，确保所有资源加载通道已关闭（否则异步import()的模块可能还没计入） - 过滤出
entryType === 'resource'的条目，按name（即 URL）去重后，和页面中所有<script src></script>、<img src alt="HTML怎么做资源加载监控_html静态资源加载性能监控【面试必备】" >、<link href>的 URL 集合做差集 - 差集结果就是疑似失败资源——但要注意：动态插入的资源（如 JS 里
document.createElement('script').src=...）不会出现在 HTML 源码里，得靠运行时收集 - 该方法无法识别 HTTP 200 但内容为空/损坏的资源（比如 CDN 返回了 200 状态码但 body 是 HTML 错误页）
监控脚本自身不能拖慢首屏，怎么写才安全
监控代码如果放错位置或写法不当，反而会让 FCP 延迟几十毫秒：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 必须放在
最开头，用内联<script></script>，且体积严格控制在1.5KB以内（压缩后） - 禁止在回调里做任何 DOM 操作（如
document.querySelector）、禁止发同步 XHR，一律用navigator.sendBeacon()上报 - 避免监听
resource类型的PerformanceObserver——它会在每次资源加载后分配新对象，低端机内存压力陡增；只监听paint和navigation - 低端设备降级：检测
navigator.hardwareConcurrency 时，跳过 <code>longtask统计，只保FCP和TTFB
怎么区分真实失败和网络抖动导致的临时 stall
视频/音频的 stalled 事件常被误当作加载失败，但它只是“请求发出去了还没回”，和 error 有本质区别：
- 监听
stalled同时检查video.networkState：若为HTMLMediaElement.NETWORK_NO_SOURCE，说明 URL 根本不可达，是真失败；若为NETWORK_LOADING，只是卡顿 - 连续 2 次
stalled间隔，且 <code>video.buffered.length === 0，大概率是网络中断，可触发备用源切换 - 不要把
stalled和waiting混用：waiting是缓冲区空了等数据，stalled是根本没收到响应包，后者需查 DNS/TCP 层 - 对普通
<script></script>或<img alt="HTML怎么做资源加载监控_html静态资源加载性能监控【面试必备】" >，没有stalled事件，只能靠超时兜底：用setTimeout+clearTimeout包裹加载逻辑，阈值设为 8s（业务可容忍上限）
最难的不是知道该监听什么，而是让监控逻辑比它要监控的东西更早、更轻、更沉默——上线前用 Lighthouse 跑一遍，确认 “Diagnostics > Reduce JavaScript execution time” 里没有你的监控脚本名字。
