Performance Timeline API 通过 performance.getEntriesByType("navigation") 和 ("resource") 分别获取导航与资源性能明细，需在 load 事件后稍延迟调用以确保数据完整，注意跨域限制、缓冲区大小及隐私模式影响。
用 Performance Timeline API 获取所有导航和资源加载性能明细，核心是调用 performance.getEntriesByType()，并分别传入 "navigation" 和 "resource" 类型。注意需在页面加载完成（如 load 事件后）或稍晚时机获取，否则可能拿不到完整数据。
获取导航性能明细（Navigation Timing）
导航性能反映页面加载全过程，包括重定向、DNS 查询、TCP 连接、SSL 协商、请求响应和 DOM 解析等。每页仅有一个导航条目（navigation 类型），对应 PerformanceNavigationTiming 对象：
- 使用
performance.getEntriesByType("navigation")获取； - 通常返回一个数组（长度为 1），取索引
[0]即可； - 关键字段包括：
startTime、redirectStart/End、domainLookupStart/End、connectStart/End、requestStart、responseStart/End、domContentLoadedEventStart/End、loadEventStart/End等； - 推荐在
window.addEventListener("load", ...)中调用，确保导航记录已就绪。
获取资源加载性能明细（Resource Timing）
每个通过网络加载的资源（如 script、img、css、fetch 请求等）都会生成一条 resource 类型的性能条目，类型为 PerformanceResourceTiming：
- 调用
performance.getEntriesByType("resource")获取全部资源记录； - 结果是数组，每个元素含
name（URL）、initiatorType（如"script"、"img"、"xmlhttprequest"）、duration、fetchStart、connectStart/End、responseStart/End等； - 注意：跨域资源若未设置
Timing-Allow-Origin响应头，部分字段（如connectStart）会被置为 0 或0（即“模糊化”）； - 可在
load后立即获取，也可结合performance.setResourceTimingBufferSize()防止早期资源被丢弃（默认缓冲区约 150 条）。
一次性获取所有导航 + 资源明细的实用写法
可封装一个函数，在合适时机（例如 load 事件后 100ms）统一采集：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
function collectPerformanceData() {
const nav = performance.getEntriesByType("navigation")[0] || null;
const resources = performance.getEntriesByType("resource");
return { navigation: nav, resources };
}
window.addEventListener("load", () => {
setTimeout(() => {
const data = collectPerformanceData();
console.table(data.resources.slice(0, 5)); // 示例：打印前 5 个资源
console.log("Navigation:", data.navigation);
}, 100);
});
这样能避开因资源异步加载导致的漏采问题，也兼容多数现代浏览器（Chrome 60+、Firefox 60+、Edge 79+、Safari 15.4+）。
注意事项与常见问题
实际使用中容易忽略的关键点：
-
时间精度限制：部分字段在非安全上下文（HTTP）中可能被降级为毫秒级（而非微秒），且受
crossOriginIsolated和timing-allow-origin影响； -
资源动态加载：后续通过
import()、fetch()、new Image()等方式加载的资源，会实时进入 timeline，可监听performance.onresourcetimingbufferfull并调用performance.clearResourceTimings()配合扩容； -
隐私模式限制：Safari 隐私模式下，
resource条目可能被禁用或截断； -
内存占用：大量资源时
getEntriesByType("resource")返回数组较大，建议按需过滤（如.filter(r => r.initiatorType === "script")）。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
