如何利用Performance API在HTML中识别网页性能瓶颈点？

本文共计1068个文字，预计阅读时间需要5分钟。

要定位80%以上的加载瓶颈，可以直接查看以下两种性能数据：

查 navigation 条目确认首屏关键路径耗时

页面加载慢，不能只盯着“白屏时间”，得拆解成 TTFB、DNS、TCP、SSL、响应体传输、DOM 解析、样式计算等阶段。这些全在 navigation 条目里，但必须用现代接口读取。

• performance.getEntriesByType('navigation') 返回数组，取 [0] 即可；performance.timing 已废弃，别再用
• 重点关注 responseStart - navigationStart（TTFB），超过 800ms 就该查后端或 CDN
• domContentLoadedEventEnd - responseEnd 反映 DOM 解析+同步 JS 执行耗时，若 > 300ms，检查是否含未拆分的大型 inline 脚本
• loadEventEnd - domContentLoadedEventEnd 高说明有大量异步资源（图片、iframe）拖慢整体完成，需结合 resource 条目交叉验证

扫 resource 条目揪出拖慢首屏的“慢资源”

很多性能问题不是代码写的差，而是某个第三方脚本或字体加载卡了 2 秒——它不会报错，但会把 FCP 推后整整一拍。