《现代JavaScript高级教程》Performance API: 提升网页性能的利器

动漫里的人物
116 阅读5分钟
点击在线阅读，体验更好链接
现代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});
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} 毫秒);
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} 毫秒);
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}`);</code></pre><h4>3.4 分析代码执行时间</h4><p>通过使用 Performance API 的 now() 方法，我们可以测量代码的执行时间。这对于优化关键代码块的性能非常有帮助，可以找出代码执行中的瓶颈，从而进行优化。</p><p><strong>示例代码：</strong></p><pre><code class="javascript">const startTime = performance.now();
   
   // 执行一些耗时的操作
   
   const endTime = performance.now();
   const executionTime = endTime - startTime;
   
   console.log(`代码执行时间: ${executionTime} 毫秒`);</code></pre><h3 id="item-0-6">结论</h3><p>Performance API 是浏览器提供的一个强大工具，可用于测量和优化网页的性能。通过使用 Performance API 提供的属性和方法，我们可以准确地测量网页加载时间、资源使用情况和代码执行时间等关键指标。这些指标可以帮助我们了解网页的性能瓶颈，并采取相应的优化措施。</p><p>在实际应用中，我们可以根据性能优化的需求使用 Performance API，从而提升网页的加载速度、响应时间和用户体验。</p><h3 id="item-0-7">参考资料</h3><ul><li><a target="_blank" href="https://link.segmentfault.com/?enc=KWWV1Eo17OP91yV5KlhWYw%3D%3D.ipw%2B6%2FoW63VWyZmGu5%2BZMtRACqNu11s5vK5dk6PlHWliOMUM8KY3l3R%2FSSR1Srndi82XgATmYO60rz8%2BBIcAxQ%3D%3D">MDN Web Docs: Performance API</a></li><li><a target="_blank" href="https://link.segmentfault.com/?enc=Gu48D1rGR%2BPpB3lDqURSvQ%3D%3D.GUBS2DOiLW%2By5eqRj6r1OZnV6nPnF79JK00u%2B4dffUjlLaAXI4aLOZDdZ94UmRh6SHmehJZpjDG0TupMNY9%2B3SSCb8%2B9Uu%2FhqB6Xed7VbpFpA4I6QQO058VdFj%2FK3hgy">Google Developers: Measuring Performance with the User Timing API</a></li><li><a target="_blank" href="https://link.segmentfault.com/?enc=2mEET7DID4LUI887P4hJ9A%3D%3D.ymrzwVlLXGTqacCKflB%2FjjVAFah4EGvBSaLT5x0v58GpKZyeorJnVw%2FsJG2XS%2FSv">W3C: High Resolution Time Level 2</a></li><li><a target="_blank" href="https://link.segmentfault.com/?enc=p6v%2Fc6cQIG%2BJAfCzBL6iYA%3D%3D.n2KTZkln1Hz1lmgEy5IFAJiPP2MbC%2BDWOmAttbLGOL5kiJ8GK8yZZ2f7id%2BQ4mPfkx5Fb2X5JmHdiYK1J5x54GwRdof10thFATMkUg0uHwAY%2FjzcsPA9dxTFqeaUja1e">Google Developers: Measuring Performance in a Web Page</a></li></ul>
avatar
文章
阅读
粉丝