前端性能优化之 Performance，轻松助力用户激增

2024-02-07 03:40:40

Performance API 作为前端性能优化的利器，能够帮助你快速定位和解决性能瓶颈。Performance API 提供了一系列方法和属性，允许你测量页面加载时间、脚本执行时间、网络请求时间等关键性能指标，让你可以轻松追踪性能问题。

Performance API 如何工作？

Performance API通过在浏览器中创建Performance对象来工作。Performance对象包含了有关页面加载过程的信息，包括页面加载时间、脚本执行时间、网络请求时间等。你可以使用Performance对象的方法和属性来访问这些信息。

Performance API 的核心方法

Performance API 提供了几个核心方法，包括：

getEntries()：获取所有性能条目的数组。
getEntriesByName()：获取具有给定名称的性能条目的数组。
getEntriesByType()：获取具有给定类型的性能条目的数组。
clearMarks()：清除所有性能标记。
clearMeasures()：清除所有性能测量。

Performance API 的核心属性

Performance API 还提供了几个核心属性，包括：

navigationStart：页面加载开始的时间。
unloadEventStart：卸载事件开始的时间。
unloadEventEnd：卸载事件结束的时间。
redirectStart：重定向开始的时间。
redirectEnd：重定向结束的时间。
fetchStart：获取资源开始的时间。
domainLookupStart：开始DNS查询的时间。
domainLookupEnd：完成DNS查询的时间。
connectStart：开始TCP连接的时间。
connectEnd：完成TCP连接的时间。
requestStart：开始请求的时间。
responseStart：收到第一个字节的时间。
responseEnd：收到最后一个字节的时间。
domLoading：DOM解析开始的时间。
domInteractive：DOM解析完成的时间。
domContentLoadedEventStart：DOMContentLoaded事件开始的时间。
domContentLoadedEventEnd：DOMContentLoaded事件结束的时间。
loadEventStart：load事件开始的时间。
loadEventEnd：load事件结束的时间。

如何使用 Performance API？

你可以使用Performance API来跟踪和测量网站的性能。以下是一些使用Performance API的示例：

// 获取页面加载时间
const pageLoadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;

// 获取脚本执行时间
const scriptExecutionTime = performance.timing.domContentLoadedEventEnd - performance.timing.domLoading;

// 获取网络请求时间
const networkRequestTime = performance.timing.responseEnd - performance.timing.requestStart;

// 输出性能信息
console.log(`页面加载时间：${pageLoadTime}毫秒`);
console.log(`脚本执行时间：${scriptExecutionTime}毫秒`);
console.log(`网络请求时间：${networkRequestTime}毫秒`);