乐趣区

关于前端:现代JavaScript高级教程Performance-API-提升网页性能的利器

jiezi
点击在线浏览，体验更好 链接
古代 JavaScript 高级小册 链接
深入浅出 Dart 链接
古代 TypeScript 高级小册 链接

Performance API: 晋升网页性能的利器

引言

在古代 Web 开发中，性能优化是一个要害的方面。用户冀望疾速加载的网页，而慢速的加载和响应工夫可能导致用户散失和不良的用户体验。为了满足用户的需要，咱们须要精确地测量和剖析网页的性能，并采取相应的优化措施。

Performance API 是浏览器提供的一组接口，能够让开发者测量和监控网页的性能体现。它提供了丰盛的属性和办法，能够帮忙咱们理解网页加载的工夫、资源的应用状况、代码执行的性能等要害指标。本文将具体介绍 Performance API 的属性和 API，探讨其利用场景，并提供相干的代码示例和援用材料链接。

1. Performance API 简介

Performance API 是 Web API 的一部分，旨在提供与浏览器性能相干的信息和指标。它通过提供一组属性和办法，使开发者可能测量和剖析网页的性能，以便进行性能优化。

Performance API 的外围对象是 performance，它代表了网页的性能信息。通过 performance 对象，咱们能够拜访各种性能指标、测量和记录时间戳、计算代码执行工夫等。

以下是一些罕用的 Performance API 属性：

  • navigation：提供了与导航相干的性能指标，如页面加载工夫、重定向次数、响应工夫等。
  • timing：提供了与页面加载和资源加载相干的性能指标，如 DNS 查问工夫、TCP 连接时间、DOM 解析工夫等。
  • memory：提供了与内存应用状况相干的性能指标，如内存限度、已应用内存、垃圾回收次数等。
  • navigationTiming：提供了更具体的页面加载工夫指标，如重定向工夫、解析 DOM 树工夫、首次渲染工夫等。

Performance API 还提供了一些办法，用于测量和记录时间戳、增加标记、计算代码执行工夫等。

2. Performance API 属性和 API

2.1 navigation

performance.navigation 属性提供了与导航相干的性能指标，能够帮忙咱们理解页面的加载工夫、重定向次数、响应工夫等。

以下是一些罕用的 navigation 属性：

  • performance.navigation.type：示意导航类型，如新页面加载、页面刷新、页面后退等。
  • performance.navigation.redirectCount：示意页面重定向的次数。

这些 navigation 属性能够用于剖析页面的导航行为和性能体现。

示例代码：

console.log(` 导航类型: ${performance.navigation.type}`);
console.log(` 重定向次数: ${performance.navigation.redirectCount}`);

2.2 timing

performance.timing 属性提供了与页面加载和资源加载相干的性能指标，能够帮忙咱们理解页面加载的各个阶段所破费的工夫。

以下是一些罕用的 timing 属性：

  • performance.timing.navigationStart：示意页面开始导航的工夫。
  • performance.timing.fetchStart：示意开始获取页面资源的工夫。
  • performance.timing.domContentLoadedEventStart：示意 DOMContentLoaded 事件开始的工夫。
  • performance.timing.loadEventStart：示意 load 事件开始的工夫。

这些 timing 属性能够用于剖析页面的加载性能，找出加载过程中的瓶颈。

示例代码：

console.log(` 导航开始工夫: ${performance.timing.navigationStart}`);
console.log(` 资源获取开始工夫: ${performance.timing.fetchStart}`);
console.log(`DOMContentLoaded 事件开始工夫: ${performance.timing.domContentLoadedEventStart}`);
console.log(`load 事件开始工夫: ${performance.timing.loadEventStart}`);

2.3 memory

performance.memory 属性提供了与内存应用状况相干的性能指标，能够帮忙咱们理解页面的内存限度、已应用内存、垃圾回收次数等信息。

以下是一些罕用的 memory 属性：

  • performance.memory.jsHeapSizeLimit：示意 JavaScript 堆的大小限度。
  • performance.memory.usedJSHeapSize：示意已应用的 JavaScript 堆大小。
  • performance.memory.totalJSHeapSize：示意 JavaScript 堆的总大小。

这些 memory 属性能够用于监控页面的内存应用状况，及时发现内存透露或适度应用内存的问题。

示例代码：

console.log(`JavaScript 堆大小限度: ${performance.memory.jsHeapSizeLimit}`);
console.log(` 已应用的 JavaScript 堆大小: ${performance.memory.usedJSHeapSize}`);
console.log(`JavaScript 堆的总大小: ${performance.memory.totalJSHeapSize}`);

2.4 navigationTiming

performance.getEntriesByType('navigation') 办法返回与页面加载工夫相干的详细信息，提供了更具体的页面加载工夫指标，如重定向工夫、解析 DOM 树工夫、首次渲染工夫等。

以下是一些罕用的 navigationTiming 属性：

  • navigationTiming.redirectTime：示意重定向工夫。
  • navigationTiming.domInteractiveTime：示意 DOM 解析实现的工夫。
  • navigationTiming.domContentLoadedTime：示意 DOMContentLoaded 事件触发的工夫。
  • navigationTiming.loadEventTime：示意 load 事件触发的工夫。

这些 navigationTiming 属性能够用于更细粒度地剖析页面加载的各个阶段所破费的工夫。

示例代码：

const entries = performance.getEntriesByType('navigation');
const navigationTiming = entries[0];

console.log(` 重定向工夫: ${navigationTiming.redirectTime}`);
console.log(`DOM 解析实现工夫: ${navigationTiming.domInteractiveTime}`);
console.log(`DOMContentLoaded 事件触发工夫: ${navigationTiming.domContentLoadedTime}`);
console.log(`load 事件触发工夫: ${navigationTiming.loadEventTime}`);

2.5 其余办法

Performance API

还提供了一些其余办法，用于测量和记录时间戳、增加标记、计算代码执行工夫等。

以下是一些罕用的办法：

  • performance.now()：返回以后工夫戳，可用于测量代码执行工夫。
  • performance.mark()：增加一个工夫戳标记，用于记录关键时刻。
  • performance.measure()：计算两个工夫戳标记之间的工夫距离。
  • performance.getEntriesByName()：获取指定名称的工夫戳标记信息。

这些办法能够帮忙咱们精确测量代码的执行工夫和要害事件的产生工夫。

示例代码：

const startTime = performance.now();

// 执行一些耗时的操作

const endTime = performance.now();
const executionTime = endTime - startTime;

console.log(` 代码执行工夫: ${executionTime} 毫秒 `);

performance.mark('start');
// 执行一些操作
performance.mark('end');

performance.measure('操作耗时', 'start', 'end');
const measurements = performance.getEntriesByName('操作耗时');
console.log(` 操作耗时: ${measurements[0].duration} 毫秒 `);

3. Performance API 利用场景

Performance API 在 Web 开发中有许多利用场景，上面是一些常见的利用场景：

3.1 性能优化

通过应用 Performance API，咱们能够测量和剖析网页的性能指标，如加载工夫、资源应用状况、代码执行工夫等。这些指标能够帮忙咱们理解网页的性能瓶颈，并采取相应的优化措施。例如，通过剖析页面加载工夫的各个阶段所破费的工夫，咱们能够找出加载过程中的瓶颈，并进行相应的性能优化。

示例代码：

const startTime = performance.timing.navigationStart;
const loadTime = performance.timing.loadEventStart - startTime;

console.log(` 页面加载工夫: ${loadTime} 毫秒 `);

3.2 监控页面资源

Performance API 能够帮忙咱们监控页面的资源应用状况，包含网络申请、DOM 元素和脚本执行等。通过剖析资源加载工夫、资源大小等指标，咱们能够找出资源使用不当或适度应用资源的问题，从而进行优化。

示例代码：

const resourceEntries = performance.getEntriesByType('resource');
resourceEntries.forEach((entry) => {console.log(` 资源 URL: ${entry.name}`);
  console.log(` 资源加载工夫: ${entry.duration} 毫秒 `);
  console.log(` 资源大小: ${entry.transferSize} 字节 `);
});

3.3 监控内存应用状况

应用 Performance API 的 memory 属性，咱们能够监控页面的内存应用状况。通过理解页面的内存限度、已应用内存、垃圾回收次数等信息，咱们能够及时发现内存透露或适度应用内存的问题，并进行优化。

示例代码：

console.log(`JavaScript 堆大小限度:

 ${performance.memory.jsHeapSizeLimit}`);
console.log(` 已应用的 JavaScript 堆大小: ${performance.memory.usedJSHeapSize}`);
console.log(`JavaScript 堆的总大小: ${performance.memory.totalJSHeapSize}`);

3.4 剖析代码执行工夫

通过应用 Performance API 的 now() 办法，咱们能够测量代码的执行工夫。这对于优化要害代码块的性能十分有帮忙，能够找出代码执行中的瓶颈，从而进行优化。

示例代码：

const startTime = performance.now();

// 执行一些耗时的操作

const endTime = performance.now();
const executionTime = endTime - startTime;

console.log(` 代码执行工夫: ${executionTime} 毫秒 `);

论断

Performance API 是浏览器提供的一个弱小工具，可用于测量和优化网页的性能。通过应用 Performance API 提供的属性和办法，咱们能够精确地测量网页加载工夫、资源应用状况和代码执行工夫等要害指标。这些指标能够帮忙咱们理解网页的性能瓶颈，并采取相应的优化措施。

在理论利用中，咱们能够依据性能优化的需要应用 Performance API，从而晋升网页的加载速度、响应工夫和用户体验。

参考资料

  • MDN Web Docs: Performance API
  • Google Developers: Measuring Performance with the User Timing API
  • W3C: High Resolution Time Level 2
  • Google Developers: Measuring Performance in a Web Page
退出移动版