proformance api 使用

Performance API 介绍

Performance API 是浏览器提供的 高精度性能监控接口，用于测量网页和应用的性能，包括 页面加载时间、资源加载情况、JavaScript 执行时间 等。

Performance API 主要用于：

• 分析页面加载时间（如 performance.timing）
• 监测资源加载情况（如 performance.getEntriesByType('resource')）
• 测量代码执行耗时（如 performance.now()）
• 创建自定义性能指标（如 PerformanceObserver）

Performance API 主要功能

1. **performance.now()**（高精度时间戳）

返回当前时间戳（相对于页面加载），单位是 毫秒（ms），精确到微秒（小数点后三位）。

const start = performance.now();
// 运行某些代码
const end = performance.now();
console.log(`代码执行耗时: ${end - start}ms`);

适用于测量函数执行时间，比 Date.now() 精度更高。

2. performance.timing（页面加载时间分析）

performance.timing（已废弃，推荐 PerformanceNavigationTiming） 记录页面从加载到完成的各个关键时间点。

console.log(performance.timing);

重要字段：

• navigationStart：导航开始时间（用户点击链接或地址栏输入 URL 的时间）
• responseStart：服务器开始响应时间
• responseEnd：服务器响应完成时间
• domContentLoadedEventEnd：DOM 加载完成时间
• loadEventEnd：页面完全加载完成时间

计算页面关键时间

const timing = performance.timing;
console.log(
  `DNS 查询时间: ${timing.domainLookupEnd - timing.domainLookupStart}ms`
);
console.log(`TCP 连接时间: ${timing.connectEnd - timing.connectStart}ms`);
console.log(`HTTP 请求时间: ${timing.responseEnd - timing.requestStart}ms`);
console.log(
  `白屏时间（FP）: ${timing.responseStart - timing.navigationStart}ms`
);
console.log(
  `DOMContentLoaded 时间: ${
    timing.domContentLoadedEventEnd - timing.navigationStart
  }ms`
);
console.log(
  `页面完全加载时间: ${timing.loadEventEnd - timing.navigationStart}ms`
);

---

3. performance.getEntriesByType()（资源加载时间）

获取所有资源（如 CSS、JS、图片）的加载情况。

const resources = performance.getEntriesByType("resource");
resources.forEach((resource) => {
  console.log(`资源: ${resource.name}`);
  console.log(`加载时间: ${resource.responseEnd - resource.startTime}ms`);
});

可以用于分析页面卡顿、慢加载资源。

---

4. PerformanceObserver（监听性能事件）

PerformanceObserver 可以监听某些性能事件（如 longtask、paint）。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("发生长任务:", entry);
  });
});
observer.observe({ entryTypes: ["longtask"] });

适用于监控长任务（如主线程阻塞）。

---

Performance API 适用场景

• 优化页面加载速度
• 监测用户交互体验
• 分析 JavaScript 代码执行性能
• 查找性能瓶颈

可以从开发者工具查看