Performance API：浏览器性能指标的获取与分析

好的，各位观众，朋友们，程序员界的老少爷们儿们，大家好！我是你们的老朋友，代码界的段子手，bug界的克星（自封的🤪），今天咱们来聊聊一个既重要又有点“玄乎”的话题：Performance API：浏览器性能指标的获取与分析。

这玩意儿听起来高大上，像是什么“量子力学”在前端的运用，实际上呢，它就像是给你的浏览器装了个“体检仪”，能告诉你它哪里不舒服，哪里需要“补补钙”，从而让你的网页跑得更快，飞得更高！

一、开场白：网页性能的重要性，真的只是“快”吗？

想象一下，你兴致勃勃地打开一个网页，结果等了半天，页面才慢悠悠地加载出来，图片像便秘一样一张张地挤出来，你是不是想直接关掉，然后给这个网站的开发团队寄一箱刀片？🔪

这就是网页性能的重要性！但网页性能不仅仅是“快”，它还关乎：

用户体验 (UX)： 网站速度直接影响用户体验，慢速的网站会让人感到沮丧，影响用户对品牌的印象。
搜索引擎优化 (SEO)： Google 等搜索引擎会考虑网站速度作为排名因素之一，更快的网站更容易获得更高的排名。
转化率： 研究表明，网页加载速度每慢 1 秒，转化率就会下降 7%。想想看，这可是白花花的银子啊！💰
资源消耗： 优化网页性能可以减少服务器资源消耗，降低运营成本。

所以，别再觉得网页性能优化是锦上添花，它其实是雪中送炭，是生死攸关的大事！

二、Performance API：你的浏览器“体检仪”

Performance API 是一组 Web API，它允许你访问浏览器的性能数据，包括：

页面加载时间： 从用户发起请求到页面完全加载的时间。
资源加载时间： 每个资源（如图片、CSS、JavaScript）的加载时间。
内存使用情况： 页面使用的内存大小。
CPU 使用情况： 页面占用的 CPU 资源。
First Contentful Paint (FCP)： 浏览器首次渲染任何文本、图像、非空白 canvas 或 SVG 的时间。
Largest Contentful Paint (LCP)： 视口中最大的内容元素完成渲染的时间。
First Input Delay (FID)： 用户首次与页面交互（例如点击链接、按钮等）到浏览器响应交互的时间。
Cumulative Layout Shift (CLS)： 页面上发生的意外布局偏移的总量。

这些指标就像是你的体检报告，告诉你身体的各项指标是否正常。

三、Performance API 的基本用法：代码说话，胜过千言万语

Performance API 主要通过 window.performance 对象来访问。下面是一些常用的 API：

performance.now()： 返回从页面加载开始到现在的时间，以毫秒为单位，精度很高。

const startTime = performance.now();
// 执行一些代码
const endTime = performance.now();
const duration = endTime - startTime;
console.log(`代码执行时间：${duration} 毫秒`);

就像秒表一样，精确地记录代码执行的时间。

performance.timing (已废弃，不推荐使用)： 提供页面加载过程中的各种时间点，例如 DNS 查询时间、TCP 连接时间、请求响应时间等。（虽然已经废弃，但了解一下历史也是好的）
```
// 不推荐使用，仅作了解
const timing = performance.timing;
const pageLoadTime = timing.loadEventEnd - timing.navigationStart;
console.log(`页面加载时间：${pageLoadTime} 毫秒`);
```
就像历史书一样，记录着页面加载的每一个瞬间。
performance.getEntries()： 返回一个 PerformanceEntry 对象的列表，包含所有已记录的性能事件。
```
const entries = performance.getEntries();
entries.forEach(entry => {
  console.log(entry.name, entry.entryType, entry.duration);
});
```
就像日记本一样，记录着所有性能事件的详细信息。
performance.getEntriesByType(type)： 返回指定类型的 PerformanceEntry 对象列表。常用的类型有：
- "navigation"：页面导航事件。
- "resource"：资源加载事件（图片、CSS、JavaScript 等）。
- "mark"：自定义标记事件。
- "measure"：自定义测量事件。
```
const resourceEntries = performance.getEntriesByType("resource");
resourceEntries.forEach(resource => {
  console.log(resource.name, resource.duration);
});
```
就像分类好的文件夹一样，方便你查找特定类型的性能事件。
performance.mark(markName)： 创建一个自定义标记事件，用于标记代码执行的特定时间点。
```
performance.mark("start");
// 执行一些代码
performance.mark("end");
```
就像书签一样，标记着代码执行的关键位置。

performance.measure(measureName, startMark, endMark)： 创建一个自定义测量事件，用于测量两个标记事件之间的时间间隔。

performance.mark("start");
// 执行一些代码
performance.mark("end");
performance.measure("myMeasure", "start", "end");
const measure = performance.getEntriesByName("myMeasure")[0];
console.log(`代码执行时间：${measure.duration} 毫秒`);

就像尺子一样，测量着代码执行的时间长度。

四、更高级的 API：LCP、FID、CLS，网页性能的“三大战役”

除了上面这些基本的 API，还有一些更高级的 API，可以帮助你更好地了解用户体验。这些 API 主要用于测量 Core Web Vitals 指标，也就是 Google 提出的网页性能“三大战役”：

Largest Contentful Paint (LCP)： 最大内容绘制，衡量页面主要内容的加载速度。
First Input Delay (FID)： 首次输入延迟，衡量页面对用户交互的响应速度。
Cumulative Layout Shift (CLS)： 累积布局偏移，衡量页面布局的稳定性。

这些指标对于 SEO 和用户体验都至关重要。你可以使用 PerformanceObserver API 来监听这些指标的变化。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(entry.name, entry.startTime, entry.duration);
  });
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });
observer.observe({ type: 'first-input', buffered: true });
observer.observe({ type: 'layout-shift', buffered: true });

这段代码就像一个“监听器”，时刻关注着 LCP、FID、CLS 的变化，一旦有新的数据，就会立即输出。

五、实战演练：如何利用 Performance API 优化你的网页？

光说不练假把式，接下来咱们来点实际的，看看如何利用 Performance API 来优化你的网页。

找出慢加载的资源：
```
const resourceEntries = performance.getEntriesByType("resource");
resourceEntries.sort((a, b) => b.duration - a.duration); // 按加载时间降序排序
resourceEntries.slice(0, 10).forEach(resource => { // 取加载时间最长的 10 个资源
  console.log(resource.name, resource.duration);
});
```
这段代码会找出加载时间最长的 10 个资源，你可以检查这些资源是否需要优化，例如：
- 图片： 是否需要压缩、使用合适的格式（WebP）、使用懒加载？
- CSS/JavaScript： 是否需要压缩、合并、异步加载？
- 字体： 是否需要使用 Web Font Loader、使用合适的字体格式？
测量代码执行时间：
```
performance.mark("start");
// 一段复杂的代码
performance.mark("end");
performance.measure("myCode", "start", "end");
const measure = performance.getEntriesByName("myCode")[0];
console.log(`代码执行时间：${measure.duration} 毫秒`);
```
这段代码可以测量一段代码的执行时间，你可以利用它来找出性能瓶颈，例如：
- 循环： 是否可以优化循环算法？
- DOM 操作： 是否可以减少 DOM 操作次数？
- 事件处理： 是否可以优化事件处理函数？

监控 LCP、FID、CLS：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'largest-contentful-paint') {
      console.log(`LCP: ${entry.startTime + entry.duration}`);
    } else if (entry.entryType === 'first-input') {
      console.log(`FID: ${entry.processingStart - entry.startTime}`);
    } else if (entry.entryType === 'layout-shift') {
      console.log(`CLS: ${entry.value}`);
    }
  });
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });
observer.observe({ type: 'first-input', buffered: true });
observer.observe({ type: 'layout-shift', buffered: true });

这段代码可以监控 LCP、FID、CLS 的变化，你可以根据这些指标来优化你的网页，例如：

LCP： 优化图片加载、使用 CDN、优化服务器响应时间。
FID： 优化 JavaScript 代码、减少主线程阻塞。
CLS： 避免在已有内容上方插入新内容、预留足够的空间给广告。

六、性能分析工具：事半功倍的利器

除了直接使用 Performance API，你还可以使用一些性能分析工具，它们可以更方便地帮你找出性能问题。

Chrome DevTools： Chrome 浏览器自带的开发者工具，提供了强大的性能分析功能。你可以使用 Performance 面板来录制页面加载过程，并查看详细的性能数据。
- Lighthouse： Chrome DevTools 中的一个工具，可以对网页进行全面的性能评估，并提供优化建议。
WebPageTest： 一个在线的网页性能测试工具，可以模拟不同网络环境下的页面加载情况，并生成详细的性能报告。
PageSpeed Insights： Google 提供的网页性能测试工具，可以对网页进行性能评估，并提供优化建议。

七、最佳实践：性能优化的“葵花宝典”

最后，总结一些性能优化的最佳实践，希望能帮助你打造更快的网页。

减少 HTTP 请求： 合并 CSS/JavaScript 文件、使用 CSS Sprites、使用 Data URI。
压缩资源： 压缩 HTML、CSS、JavaScript、图片。
使用 CDN： 将静态资源部署到 CDN 上，加速资源加载。
启用浏览器缓存： 设置合适的 HTTP 缓存头，利用浏览器缓存。
优化图片： 使用合适的图片格式（WebP）、压缩图片、使用懒加载。
优化 JavaScript： 减少 DOM 操作、避免使用 document.write、使用事件委托。
使用异步加载： 异步加载非关键的 CSS/JavaScript 文件。
避免重定向： 尽量避免使用重定向，减少 HTTP 请求。
优化服务器响应时间： 优化服务器代码、使用缓存、使用负载均衡。
监控性能： 使用 Performance API 或性能分析工具监控网页性能，及时发现问题。

八、总结：性能优化，永无止境

网页性能优化是一个永无止境的过程，你需要不断地学习新的技术，不断地尝试新的方法，才能打造出更快、更流畅的网页。记住，性能优化不仅仅是技术问题，更是一种态度，一种对用户体验的追求！

希望今天的分享能对你有所帮助。如果你还有其他问题，欢迎在评论区留言。下次再见！👋

发表回复 取消回复

发表回复取消回复