HTML怎么做资源加载监控_html静态资源加载性能监控【面试必备】-html教程-PHP中文网

资源加载监控需用捕获阶段的document.addEventListener('error', handler, true)区分资源失败与JS错误，并结合performance.getEntries()反推未触发error的失败资源，同时确保监控脚本轻量、前置、无阻塞。

html怎么做资源加载监控_html静态资源加载性能监控【面试必备】

资源加载监控不是加个 window.addEventListener('error') 就完事——它必须区分错误类型、捕获时机、上报方式，否则你看到的“失败率 3%”可能是跨域脚本的假阳性，也可能是 CDN 节点彻底挂掉的真实告警。

不能只靠 window.onerror，它对资源加载失败基本无效（尤其跨域时只报 Script error.）。真正可用的是捕获阶段的 error 事件：

必须用 document.addEventListener('error', handler, true)，第三个参数 true 表示捕获阶段，否则子元素（如）抛出的错误会被中间节点拦截
判断是否为资源加载失败：检查 e.target 是否存在，且 'src' in e.target || 'href' in e.target
排除干扰：过滤掉 e.target === window（这是 JS 运行时错误，归 window.onerror 管）
注意：该监听会收到所有资源错误，包括内联解析失败（e.target.localName === 'style'），但无法捕获 CSS @import 失败

performance.getEntries() 返回的是已加载完成的资源列表，它本身不报告失败，但能帮你反推“哪些该加载却没出现”：

只在 window.addEventListener('load', ...) 里调用，确保所有资源加载通道已关闭（否则异步 import() 的模块可能还没计入）
过滤出 entryType === 'resource' 的条目，按 name（即 URL）去重后，和页面中所有 <script src></script>、、的 URL 集合做差集
差集结果就是疑似失败资源——但要注意：动态插入的资源（如 JS 里 document.createElement('script').src=...）不会出现在 HTML 源码里，得靠运行时收集
该方法无法识别 HTTP 200 但内容为空/损坏的资源（比如 CDN 返回了 200 状态码但 body 是 HTML 错误页）

监控代码如果放错位置或写法不当，反而会让 FCP 延迟几十毫秒：

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

必须放在最开头，用内联 <script></script>，且体积严格控制在 1.5KB 以内（压缩后）
禁止在回调里做任何 DOM 操作（如 document.querySelector）、禁止发同步 XHR，一律用 navigator.sendBeacon() 上报
避免监听 resource 类型的 PerformanceObserver——它会在每次资源加载后分配新对象，低端机内存压力陡增；只监听 paint 和 navigation
低端设备降级：检测 navigator.hardwareConcurrency 时，跳过 longtask 统计，只保 FCP 和 TTFB

视频/音频的 stalled 事件常被误当作加载失败，但它只是“请求发出去了还没回”，和 error 有本质区别：

监听 stalled 同时检查 video.networkState：若为 HTMLMediaElement.NETWORK_NO_SOURCE，说明 URL 根本不可达，是真失败；若为 NETWORK_LOADING，只是卡顿
连续 2 次 stalled 间隔 ，且 video.buffered.length === 0，大概率是网络中断，可触发备用源切换
不要把 stalled 和 waiting 混用：waiting 是缓冲区空了等数据，stalled 是根本没收到响应包，后者需查 DNS/TCP 层
对普通 <script></script> 或，没有 stalled 事件，只能靠超时兜底：用 setTimeout + clearTimeout 包裹加载逻辑，阈值设为 8s（业务可容忍上限）