一七七、window.performance API使用介绍

window.performance 是一个用于获取网页性能信息的接口，提供了一些 API 来测量网页和资源加载的效率。这些 API 对优化用户体验和监测网页性能非常有用。

1. performance.now()

• 介绍：返回一个高精度的时间戳，单位为毫秒，表示从页面加载到调用 performance.now() 的时间。与 Date.now() 不同的是，performance.now() 的精度更高，并且不会受到系统时间调整的影响。

const start = performance.now();
// 模拟一些操作
for (let i = 0; i < 1000000; i++) {}
const end = performance.now();
console.log(`操作耗时: ${end - start} 毫秒`);

2. performance.mark()** 和 **performance.measure()

• 介绍：performance.mark() 用于创建一个命名标记点，performance.measure() 用于在两个标记点之间测量时间间隔。

performance.mark("start-operation");
// 模拟一些操作
for (let i = 0; i < 1000000; i++) {}
performance.mark("end-operation");

performance.measure("operation-duration", "start-operation", "end-operation");

const measures = performance.getEntriesByType("measure");
console.log(measures[0].name, measures[0].duration); // 打印操作名称和耗时

3. performance.getEntriesByType()

performance.getEntriesByType() 是 Web 性能 API 中的一个方法，用于获取特定类型的性能条目。这些性能条目可以提供关于页面加载和资源使用的详细计时信息，帮助开发者分析和优化页面性能。

语法

performance.getEntriesByType(type)

• type：一个字符串，指定要获取的性能条目类型。支持的类型包括：
  • "navigation"：与页面导航相关的性能条目，如加载时间等。
  • "resource"：与页面加载的外部资源相关的条目，如图片、脚本、样式表等。
  • "mark"：用户自定义的标记，由 performance.mark() 创建。
  • "measure"：用户自定义的测量，由 performance.measure() 创建。
  • "paint"：与页面绘制相关的条目，如 first-paint（首次绘制）和 first-contentful-paint（首次内容绘制）。
  • "longtask"：与运行超过 50 毫秒的长任务相关的条目，可能表明性能瓶颈。

返回值

返回一个包含 PerformanceEntry 对象的数组，每个对象包含该类型的性能事件的信息，如名称、类型、开始时间和持续时间。

示例及解释

1. 获取导航计时条目

// 获取所有导航类型的性能条目
const navigationEntries = performance.getEntriesByType("navigation");

if (navigationEntries.length > 0) {
  const navigation = navigationEntries[0];
  console.log("导航类型:", navigation.type); // "navigate", "reload" 等
  console.log("页面加载时间:", navigation.loadEventEnd - navigation.startTime, "毫秒");
}

解释：这个示例获取 navigation 类型的性能条目，提供有关页面导航（如加载开始和结束）的详细信息。

2. 获取资源加载条目

// 获取所有资源类型的性能条目
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(resource => {
  console.log("资源名称:", resource.name);
  console.log("开始获取时间:", resource.fetchStart);
  console.log("响应结束时间:", resource.responseEnd);
  console.log("总加载时间:", resource.responseEnd - resource.startTime, "毫秒");
});

解释：该示例获取所有资源加载条目，提供详细的加载时间信息，可用于识别慢加载的外部资源（如图片和脚本）。

3. 获取用户自定义标记

// 创建性能标记
performance.mark("开始处理");

// 执行某些任务
// ...

// 创建另一个标记
performance.mark("处理结束");

// 测量两个标记之间的时间
performance.measure("处理时间", "开始处理", "处理结束");

// 获取所有标记条目
const markEntries = performance.getEntriesByType("mark");

markEntries.forEach(mark => {
  console.log("标记名称:", mark.name);
  console.log("开始时间:", mark.startTime, "毫秒");
});

解释：使用 performance.mark() 创建自定义标记，并使用 performance.getEntriesByType("mark") 获取它们。这对于测量代码执行的特定部分非常有用。

4. 获取用户自定义测量

// 获取所有测量条目
const measureEntries = performance.getEntriesByType("measure");

measureEntries.forEach(measure => {
  console.log("测量名称:", measure.name);
  console.log("持续时间:", measure.duration, "毫秒");
});

解释：这个示例获取通过 performance.measure() 创建的自定义测量条目，每个条目包含两个标记之间的时间差。

5. 获取绘制时间条目

// 获取所有绘制类型的性能条目
const paintEntries = performance.getEntriesByType("paint");

paintEntries.forEach(paint => {
  console.log("绘制名称:", paint.name); // 例如 "first-paint", "first-contentful-paint"
  console.log("开始时间:", paint.startTime, "毫秒");
});

解释：绘制时间条目提供页面首次绘制和首次内容绘制的时间点，用于分析页面的感知加载性能。

6. 获取长任务条目

// 获取所有长任务条目
const longTaskEntries = performance.getEntriesByType("longtask");

longTaskEntries.forEach(task => {
  console.log("长任务名称:", task.name || "匿名任务");
  console.log("开始时间:", task.startTime, "毫秒");
  console.log("持续时间:", task.duration, "毫秒");
});

解释：长任务条目记录运行时间超过 50 毫秒的任务，可以帮助开发者识别并优化性能瓶颈。

应用场景

• 页面性能优化：利用这些性能条目，开发者可以识别性能瓶颈并优化页面加载速度。
• 资源监控：分析哪些资源加载较慢，优化这些资源的加载方式。
• 用户体验改善：测量和优化页面的关键渲染路径，确保用户能尽快看到页面内容。

performance.getEntriesByType() 是一个非常有用的工具，可以帮助开发者获取丰富的性能数据，提升网页的加载和运行效率。

4. performance.getEntriesByName()

• 介绍：根据条目名称获取性能条目。

performance.mark("example-mark");
const entries = performance.getEntriesByName("example-mark");
console.log(entries); // 打印与 "example-mark" 相关的所有条目

5. performance.clearMarks()** 和 **performance.clearMeasures()

• 介绍：清除特定名称或所有的标记和测量条目。

performance.mark("test-mark");
console.log(performance.getEntriesByName("test-mark").length); // 输出 1
performance.clearMarks("test-mark");
console.log(performance.getEntriesByName("test-mark").length); // 输出 0

6. performance.timing（已废弃，推荐使用 PerformanceNavigationTiming）

• 介绍：提供与网页加载过程相关的各种时间点信息，如页面开始加载的时间、DOMContentLoaded 事件的时间等。

const timing = performance.timing;
console.log("页面加载耗时:", timing.loadEventEnd - timing.navigationStart);

注意：performance.timing 已废弃，建议使用 PerformanceNavigationTiming API。

7. performance.navigation（已废弃）

• 介绍：提供导航类型（如重新加载或前进/后退导航）及其相关信息。

const navigation = performance.navigation;
console.log("导航类型:", navigation.type);

注意：performance.navigation 也已废弃，推荐使用 PerformanceNavigationTiming。

8. performance.memory（仅限 Chrome 和部分浏览器）

• 介绍：提供内存使用的详细信息（如 JavaScript 堆的大小和使用量）。

if (performance.memory) {
  console.log("总堆大小:", performance.memory.totalJSHeapSize);
  console.log("已使用堆大小:", performance.memory.usedJSHeapSize);
}

9. performance.getEntries()

• 介绍：获取所有性能条目，可以结合其他方法进一步筛选。

const allEntries = performance.getEntries();
allEntries.forEach(entry => {
  console.log(`名称：${entry.name}, 类型：${entry.entryType}, 耗时：${entry.duration}`);
});

10. PerformanceObserver

• 介绍：一个观察者，用于异步监听性能条目的生成情况。

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log(`新生成的条目：${entry.name}, 类型：${entry.entryType}`);
  });
});
observer.observe({ entryTypes: ["mark", "measure"] });

performance.mark("observed-mark");

11.PerformanceNavigationTiming

是一种性能条目接口，专门用于提供有关网页导航的详细计时信息。这是对传统的 performance.timing 接口的改进，提供更精确和可靠的性能数据。

使用示例：获取导航计时信息

// 获取所有导航条目
const [navigation] = performance.getEntriesByType("navigation");

if (navigation) {
  console.log("网页导航类型:", navigation.type); // "navigate", "reload", "back_forward", or "prerender"
  
  // 记录一些常用的时间点
  console.log("开始时间 (navigationStart):", navigation.startTime);
  console.log("重定向时间 (redirectStart - redirectEnd):", navigation.redirectStart, navigation.redirectEnd);
  console.log("DNS 查找开始 (domainLookupStart):", navigation.domainLookupStart);
  console.log("DNS 查找结束 (domainLookupEnd):", navigation.domainLookupEnd);
  console.log("TCP 连接开始 (connectStart):", navigation.connectStart);
  console.log("TCP 连接结束 (connectEnd):", navigation.connectEnd);
  console.log("请求开始 (requestStart):", navigation.requestStart);
  console.log("响应开始 (responseStart):", navigation.responseStart);
  console.log("响应结束 (responseEnd):", navigation.responseEnd);
  
  // 记录页面加载的主要阶段
  console.log("DOM 解析完成 (domContentLoadedEventStart):", navigation.domContentLoadedEventStart);
  console.log("DOM 内容加载完成 (domContentLoadedEventEnd):", navigation.domContentLoadedEventEnd);
  console.log("页面完全加载 (loadEventStart):", navigation.loadEventStart);
  console.log("页面加载完成 (loadEventEnd):", navigation.loadEventEnd);

  // 计算总加载时间
  const totalLoadTime = navigation.loadEventEnd - navigation.startTime;
  console.log("总页面加载时间:", totalLoadTime, "毫秒");
}

解释

1. 获取导航条目：使用 performance.getEntriesByType("navigation") 获取导航类型的性能条目，通常是一个数组，导航条目位于数组的第一个元素 navigation 中。
2. 导航类型：navigation.type 属性返回导航的类型，如 "navigate" 表示新导航，"reload" 表示页面重新加载。
3. 主要计时点：
   • navigationStart：导航开始时间。
   • redirectStart 和 redirectEnd：重定向开始和结束的时间（如果没有重定向，这两个值将为 0）。
   • domainLookupStart 和 domainLookupEnd：DNS 查找开始和结束时间。
   • connectStart 和 connectEnd：TCP 连接开始和结束时间。
   • requestStart 和 responseEnd：HTTP 请求开始时间和响应结束时间。
   • domContentLoadedEventStart 和 domContentLoadedEventEnd：DOM 内容加载事件的开始和结束时间。
   • loadEventStart 和 loadEventEnd：页面加载事件的开始和结束时间。

应用场景

• 页面性能分析：开发者可以使用这些数据来优化网页加载速度，确定哪个环节耗时最多（如 DNS 解析、TCP 连接等）。
• 监测重定向：可以分析重定向带来的性能开销，并优化重定向流程。
• 用户体验优化：分析 DOMContentLoaded 和 load 事件的时间，确保用户能尽快看到页面内容。

PerformanceNavigationTiming 提供了比 performance.timing 更丰富的计时信息，并且更符合现代浏览器的性能优化需求。