如何评估一个 JavaScript 项目的性能指标？例如 Core Web Vitals (LCP, FID, CLS)。

同学们，晚上好！很高兴今晚能和大家聊聊JavaScript项目的性能评估，尤其是围绕着那几个让人头大的“Core Web Vitals”（核心网页指标）。别担心，咱们不搞学术那一套，力求用最接地气的方式，把这些“高大上”的概念拆解成你能听懂、能上手、能解决实际问题的干货。

咱们先从一个问题开始：你觉得一个“好”的网站或应用，除了功能强大、界面美观之外，最重要的是什么？

没错，就是“快”！用户可没那么多耐心等你加载，稍微慢一点，人家就拜拜了。所以，性能优化是每个前端工程师的必修课，而评估性能，就得用到各种指标。其中，Core Web Vitals就是Google官方推荐的一套评估用户体验的关键指标。

什么是Core Web Vitals？

简单来说，Core Web Vitals就是Google用来衡量网页用户体验好坏的三大指标：

• Largest Contentful Paint (LCP)：最大内容渲染时间，衡量页面主要内容加载速度。
• First Input Delay (FID)：首次输入延迟，衡量页面交互响应速度。
• Cumulative Layout Shift (CLS)：累积布局偏移，衡量页面视觉稳定性。

这三个家伙，各有各的脾气，各有各的难搞之处。下面咱们一个一个地“攻克”它们。

1. LCP：最大内容渲染时间

想象一下，你打开一个购物网站，最想看到的是什么？当然是商品图片、标题、价格等等。LCP就是衡量这些“最大内容”的加载速度的。

• 良好LCP： 2.5秒以内
• 需要改进LCP： 2.5秒到4秒
• 较差LCP： 超过4秒

超过4秒，用户可能就直接关掉页面了，所以LCP是重中之重！

如何评估LCP？

• PageSpeed Insights： 这是Google官方提供的免费工具，输入网址，它会给你详细的性能报告，包括LCP值，以及优化建议。
• Chrome DevTools： 打开Chrome开发者工具（F12），选择“Performance”面板，录制一段时间的页面加载过程，就能看到LCP的具体数值，以及是哪个元素导致了LCP。
• Web Vitals Chrome Extension： 一个Chrome插件，直接在页面上显示LCP、FID、CLS等指标，方便快捷。
• JavaScript代码： 使用 PerformanceObserver API，在客户端代码中获取LCP信息。

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('LCP:', entry.startTime, entry.url, entry.size);
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

这段代码会监听 largest-contentful-paint 事件，并在控制台输出LCP的时间、URL和大小。

如何优化LCP？

• 优化图片： 使用合适的图片格式（WebP）、压缩图片大小、使用CDN加速图片加载。
• 优化文本： 使用字体预加载、避免阻塞渲染的CSS。
• 优化服务器响应时间： 使用CDN、缓存、优化数据库查询。
• 使用预加载和预连接： 提前加载关键资源，建立与关键服务器的连接。

<link rel="preload" href="image.webp" as="image">
<link rel="preconnect" href="https://cdn.example.com">

2. FID：首次输入延迟

FID衡量的是用户第一次与页面交互（比如点击按钮、输入文本）时，浏览器响应的延迟时间。如果延迟太长，用户会觉得卡顿，体验很差。

• 良好FID： 100毫秒以内
• 需要改进FID： 100毫秒到300毫秒
• 较差FID： 超过300毫秒

如何评估FID？

FID需要在真实用户交互中才能测量，所以不能直接用PageSpeed Insights或Chrome DevTools来测量。

• Google Search Console: 如果你的网站已经接入了Google Search Console，它会提供FID的报告。
• Web Vitals Chrome Extension： 虽然不能直接测量FID，但可以提供TBT（Total Blocking Time）指标，TBT与FID高度相关，可以作为FID的参考。
• JavaScript代码： 使用 PerformanceObserver API，结合 first-input 事件，在客户端代码中获取FID信息。

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('FID:', entry.processingStart - entry.startTime);
  }
}).observe({ type: 'first-input', buffered: true });

这段代码会监听 first-input 事件，并在控制台输出FID的时间。

如何优化FID？

• 减少JavaScript执行时间： 这是优化FID最关键的一点。将大的JavaScript任务分解成小的任务，使用 setTimeout 或 requestAnimationFrame 将任务延迟到空闲时间执行。
• 优化第三方代码： 第三方脚本可能会阻塞主线程，导致FID升高。尽量减少第三方脚本的使用，并异步加载它们。
• 使用Web Workers： 将一些耗时的任务放到Web Workers中执行，避免阻塞主线程。

// 将一个耗时的任务放到Web Worker中执行
const worker = new Worker('worker.js');
worker.postMessage({ data: 'some data' });
worker.onmessage = (event) => {
  console.log('Worker response:', event.data);
};

3. CLS：累积布局偏移

CLS衡量的是页面在加载过程中，元素的意外移动程度。想象一下，你正要点击一个按钮，结果按钮突然往下移动了，你点到了其他地方，是不是很恼火？CLS就是用来避免这种情况的。

• 良好CLS： 0.1以内
• 需要改进CLS： 0.1到0.25
• 较差CLS： 超过0.25

如何评估CLS？

• PageSpeed Insights： 提供CLS值，以及导致CLS的元素。
• Chrome DevTools： 打开Chrome开发者工具（F12），选择“Performance”面板，录制一段时间的页面加载过程，就能看到CLS的具体数值，以及是哪些元素导致了CLS。
• Web Vitals Chrome Extension： 直接在页面上显示CLS值。
• JavaScript代码： 使用 PerformanceObserver API，在客户端代码中获取CLS信息。

let clsValue = 0;
let clsEntries = [];

let observer = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      clsEntries.push(entry);
      console.log('Current CLS value:', clsValue, entry);
    }
  }
});

observer.observe({ type: 'layout-shift', buffered: true });

// 在页面卸载时，发送CLS数据到服务器
window.addEventListener('beforeunload', () => {
  console.log('Final CLS value:', clsValue, clsEntries);
  // 发送数据到服务器
});

这段代码会监听 layout-shift 事件，并在控制台输出CLS的值和相关信息。hadRecentInput 属性用于排除用户主动触发的布局偏移，只统计意外的布局偏移。

如何优化CLS？

• 为图片和视频设置尺寸： 使用 width 和 height 属性，或者使用CSS的 aspect-ratio 属性，避免图片和视频加载后引起布局偏移。

<img src="image.jpg" width="640" height="360" alt="Image">

<style>
  .video-container {
    aspect-ratio: 16 / 9;
  }
</style>
<div class="video-container">
  <video src="video.mp4"></video>
</div>

• 避免在现有内容上方插入新内容： 如果必须插入新内容，提前为新内容预留空间。
• 谨慎使用广告： 广告经常会导致布局偏移。使用稳定的广告位，并提前为广告预留空间。
• 避免字体闪烁： 使用 font-display: swap; 可以避免字体加载导致的布局偏移，但可能会导致FOIT（Flash of Invisible Text），需要权衡。

其他重要的性能指标

除了Core Web Vitals之外，还有一些其他的性能指标也需要关注：

指标名称	描述	重要性
First Contentful Paint (FCP)	首次内容渲染时间，衡量页面开始渲染内容的速度。	高
Time to First Byte (TTFB)	首字节时间，衡量服务器响应速度。	中
Total Blocking Time (TBT)	总阻塞时间，衡量页面在加载过程中，主线程被阻塞的时间。	高
Time to Interactive (TTI)	可交互时间，衡量页面完全可交互的时间。	中
Memory Usage	内存使用情况，衡量页面对用户设备内存的消耗。	中
CPU Usage	CPU使用情况，衡量页面对用户设备CPU的消耗。	中
Network Requests	网络请求数量，衡量页面需要加载的资源数量。	中
Bundle Size	JavaScript代码包大小，衡量需要下载的JavaScript代码量。	高

总结

Core Web Vitals是评估Web性能的关键指标，但它们只是冰山一角。要打造一个高性能的Web应用，需要综合考虑各种因素，并不断地进行优化和测试。

• 持续监控： 使用各种工具持续监控性能指标，及时发现问题。
• 性能预算： 为每个指标设置性能预算，避免性能退化。
• 自动化测试： 使用自动化测试工具，定期进行性能测试。
• 代码审查： 在代码审查过程中，关注性能问题。

记住，性能优化是一个持续的过程，需要不断地学习和实践。希望今天的分享对大家有所帮助！

有什么问题，现在可以提问了，我会尽力解答。

问题1： 我用PageSpeed Insights测出来的分数很高，但用户还是觉得慢，这是为什么？

这个问题问得好！PageSpeed Insights的分数，主要是基于实验室数据（Lab Data）的，也就是在模拟的网络环境和设备上测出来的。而用户体验，受到很多因素的影响，比如：

• 用户网络环境： 用户的网络速度可能比实验室环境慢很多。
• 用户设备性能： 用户的设备可能比较老旧，性能较差。
• 用户地理位置： 离服务器太远的用户，访问速度会比较慢。
• 第三方脚本： 第三方脚本可能会影响页面性能，而PageSpeed Insights可能无法完全模拟这些脚本的影响。

所以，PageSpeed Insights的分数只能作为参考，更重要的是要关注真实用户数据（Field Data），比如Google Search Console提供的Core Web Vitals报告，或者使用RUM（Real User Monitoring）工具收集用户体验数据。

问题2： 我用了CDN，图片也压缩了，LCP还是很高，还有什么其他原因吗？

CDN和图片压缩确实可以提高LCP，但还有一些其他原因可能导致LCP很高：

• 服务器响应时间（TTFB）过长： 即使使用了CDN，如果服务器响应时间过长，也会影响LCP。
• 阻塞渲染的CSS： 如果CSS文件太大，或者加载时间太长，会阻塞页面的渲染，导致LCP升高。可以尝试使用CSS代码分割、延迟加载CSS等方法来优化。
• 阻塞渲染的JavaScript： 类似于CSS，JavaScript也会阻塞页面渲染。尽量减少JavaScript的执行时间，并异步加载JavaScript。
• 字体加载： 如果页面使用了自定义字体，字体加载时间过长也会影响LCP。可以尝试使用字体预加载、优化字体文件大小等方法来优化。
• JavaScript渲染： 如果页面的主要内容是通过JavaScript动态渲染的，那么LCP可能会比较高。可以尝试使用服务端渲染（SSR）或预渲染（Prerendering）来优化。

问题3： 我用了React/Vue/Angular等框架，性能优化有什么特别需要注意的地方吗？

使用前端框架可以提高开发效率，但也可能会带来一些性能问题。以下是一些需要注意的地方：

• Bundle Size： 前端框架的代码包通常比较大，需要使用代码分割、Tree Shaking等技术来减小代码包大小。
• 渲染性能： 前端框架的渲染过程可能会比较复杂，需要使用虚拟DOM、Diff算法等技术来提高渲染性能。
• 状态管理： 不合理的状态管理可能会导致不必要的重新渲染，影响性能。需要合理地设计状态管理方案。
• 组件化： 组件化可以提高代码复用性，但也可能会导致组件嵌套过深，影响性能。需要合理地设计组件结构。
• 懒加载： 对于不需要立即渲染的组件，可以使用懒加载来提高页面加载速度。

具体来说：

• React: 使用React.memo、useMemo、useCallback等hooks来避免不必要的重新渲染。
• Vue: 使用v-once、v-memo等指令来优化静态内容。
• Angular: 使用OnPush Change Detection Strategy来减少不必要的Change Detection。

问题4： 你们公司是如何进行性能监控的？

每个公司的情况可能不一样，但我可以分享一些常见的做法：

• RUM（Real User Monitoring）： 使用RUM工具（比如New Relic、Datadog、Sentry等）收集真实用户数据，监控Core Web Vitals和其他性能指标。
• Synthetic Monitoring： 使用Synthetic Monitoring工具（比如WebPageTest、Lighthouse CI等）定期进行性能测试，模拟用户访问，发现性能问题。
• Alerting： 设置Alerting规则，当性能指标超过阈值时，自动发送通知。
• Dashboard： 创建Dashboard，可视化性能数据，方便团队成员了解性能状况。
• Performance Budget： 为每个指标设置性能预算，并在CI/CD流程中进行检查，避免性能退化。
• Code Review： 在Code Review过程中，关注性能问题，确保代码质量。

总之，性能监控是一个持续的过程，需要不断地学习和实践。希望今天的分享对大家有所帮助！