性能 API 应用：如何通过监测页面卸载时间分析跳转效率-H5教程-PHP中文网

页面卸载时间虽非performance api直接指标，但通过unloadeventstart与unloadeventend（同源时有效）可间接评估卸载开销；差值过大（>100ms）表明前页存在阻塞，影响跳转效率。

性能 api 应用：如何通过监测页面卸载时间分析跳转效率

页面卸载时间本身不是 Performance API 直接暴露的独立指标，但它隐含在 navigation timing 的关键节点中，是分析跳转效率的重要间接依据。真正影响跳转效率的，是前一页“卸载”是否及时完成，以及后一页“导航启动”是否无缝衔接。我们不测“卸载耗时”，而是通过前后页面的时间戳关系判断跳转是否顺畅。

关注 unloadEventStart 和 unloadEventEnd

这两个字段记录了前一个页面触发 unload 事件的起止时间，仅当前后页同源时有效。如果它们存在且数值合理（比如差值在几毫秒内），说明前页卸载流程轻量、无阻塞；若差值过大（如超过100ms），往往意味着前页有同步脚本、未释放的资源或未清理的监听器拖慢了卸载过程，进而拉长整体跳转延迟。

检查 unloadEventStart > 0：确认浏览器确实执行了 unload 流程
计算 unloadEventEnd - unloadEventStart：评估前页卸载开销
对比 navigationStart - unloadEventEnd：该间隔越小，说明新页面启动越及时；若超过 50ms，可能存在主线程卡顿或事件队列积压

用 getEntriesByType('navigation') 替代已弃用的 performance.navigation

旧 API window.performance.navigation.type 已被移除，无法再区分刷新、前进/后退等行为。现代方式是读取 navigation entry 中的 type 字段：

'navigate'：用户点击链接、调用 location.href 等主动跳转
'reload'：F5 或 location.reload()
'back_forward'：浏览器前进/后退按钮操作
'prerender'：预渲染场景（较少见）

不同跳转类型对卸载行为的影响不同：back_forward 通常复用前页状态，unload 可能被跳过；而 navigate 必然触发完整 unload 流程。结合 type 判断，才能准确归因跳转延迟来源。

CodeSnippets

CodeSnippets是一款把代码片段库和 AI 编程聊天结合起来的开发者工具。

下载

识别卸载阻塞的典型信号

以下现象常指向卸载阶段存在问题：

页面跳转后，控制台出现 [Deprecation] unload event listener was registered but not removed 警告
使用 beforeunload 但未正确清理定时器、WebSocket 或 IndexedDB 连接
navigation entry 中 unloadEventStart === 0，却存在明显跳转卡顿——可能因跨域导致 unload 信息不可见，需转向 long task 分析
PerformanceObserver 捕获到跳转前最后一段 long task，持续时间 > 50ms

搭配 PerformanceObserver 监控卸载前长任务

卸载阻塞往往源于跳转前的 JS 执行卡顿。可通过 PerformanceObserver 主动监听：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.duration > 50 && entry.startTime + entry.duration > performance.now() - 200) {
      console.warn('跳转前存在长任务，可能影响卸载效率:', entry);
    }
  });
});
observer.observe({ entryTypes: ['longtask'] });

这类任务会推迟 unload 事件触发，也延缓新页面 navigationStart，是跳转变慢的常见根因。