JS前端性能监控5大核心指标解析

文章不知道大家是否熟悉？今天我将给大家介绍《JS如何监控前端性能？5个核心指标解析》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

前端性能监控是通过技术手段观察、记录并分析用户使用网站或应用时的体验，核心在于提升页面加载速度与交互流畅度。1. 页面加载时间可通过Performance API获取navigationStart与loadEventEnd差值计算，并通过fetch上报数据；2. 首次渲染（FP）和首次内容绘制（FCP）通过PerformanceObserver监听paint事件获取，优化关键渲染路径可改善加载感知；3. 最大内容绘制（LCP）反映最大可见元素加载时间，优化图片大小与CDN可降低LCP；4. 首次可交互时间（TTI）结合长任务判断，延迟低于5秒无长任务即为TTI；5. 输入延迟（FID）通过first-input事件获取，优化JS执行效率可减少卡顿；6. 跨域资源监控需配置CORS、Timing-Allow-Origin及crossorigin属性；7. 性能工具选择考虑功能、易用性、成本与集成能力；8. 数据用于分析瓶颈、制定策略、验证效果并持续改进。

前端性能监控，简单来说，就是通过技术手段观察、记录并分析用户在使用你的网站或应用时的体验。重点在于“体验”，包括页面加载速度、交互流畅度等等。监控这些指标，才能知道哪里慢、哪里卡，然后才能对症下药，提升用户体验。

页面加载性能的监控，是前端性能监控的重中之重。

JS实现前端性能监控的核心在于利用浏览器提供的Performance API，配合一些自定义的监控策略和上报机制。

解决方案

1. 页面加载时间（Load Time）

   这是最直观的指标。从用户输入URL到页面完全加载并呈现，总共花了多少时间？

   window.addEventListener('load', () => {
     const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
     console.log('页面加载时间：', loadTime, 'ms');
     //  上报 loadTime 到服务器
     reportMetric('load_time', loadTime);
   });
   
   function reportMetric(name, value) {
       //  这里是上报逻辑，可以用fetch或者XMLHttpRequest
       fetch('/api/metrics', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json'
           },
           body: JSON.stringify({ name, value })
       }).catch(err => console.error('上报失败:', err));
   }

   performance.timing 包含了页面加载过程中的各个时间节点，loadEventEnd 是load事件完成的时间，navigationStart 是导航开始的时间。

   • 挑战： performance.timing 在某些旧版本浏览器中可能存在兼容性问题，需要做兼容性处理。
   • 改进： 可以使用 PerformanceObserver 监听 longtask 事件，找出阻塞主线程的任务，进一步优化加载性能。

2. 首次渲染时间（First Paint, FP）和首次内容绘制时间（First Contentful Paint, FCP）

   用户看到页面出现第一个像素的时间，以及看到页面上出现任何内容（例如文本、图像）的时间。这两个指标直接影响用户对页面加载速度的感知。

   new PerformanceObserver((entryList) => {
     for (const entry of entryList.getEntries()) {
       console.log(entry.name, entry.startTime);
       if (entry.name === 'first-paint') {
         reportMetric('first_paint', entry.startTime);
       } else if (entry.name === 'first-contentful-paint') {
         reportMetric('first_contentful_paint', entry.startTime);
       }
     }
   }).observe({ type: 'paint', buffered: true });

   PerformanceObserver 可以监听 paint 事件，获取 first-paint 和 first-contentful-paint 的时间。buffered: true 表示可以获取在监听器注册之前就已经发生的事件。

   • 挑战： 某些情况下，FCP 可能受到字体加载的影响，导致FCP时间较长。
   • 思考： 如果FCP过长，可以考虑优化关键渲染路径，例如延迟加载非关键资源。

3. 最大内容绘制时间（Largest Contentful Paint, LCP）

   用户在视窗中看到的最大内容元素完成渲染的时间。LCP更能反映用户感知到的加载速度，因为它是页面上最大可见元素加载完成的时间。

   new PerformanceObserver((entryList) => {
     for (const entry of entryList.getEntries()) {
       reportMetric('largest_contentful_paint', entry.startTime);
     }
   }).observe({ type: 'largest-contentful-paint', buffered: true });

   PerformanceObserver 监听 largest-contentful-paint 事件，获取 LCP 的时间。

   • 挑战： LCP 的计算可能受到图片、视频等资源加载的影响。
   • 优化： 优化图片大小、使用CDN加速、预加载关键资源，可以有效降低LCP。

4. 首次可交互时间（Time to Interactive, TTI）

   页面首次变得可以完全交互的时间。用户可以点击按钮、填写表单等。TTI 是衡量页面可用性的重要指标。

   TTI的计算相对复杂，需要结合长任务（Long Task）来判断。

   let tti = null;
   let lastLongTaskEndTime = 0;
   
   new PerformanceObserver((entryList) => {
     for (const entry of entryList.getEntries()) {
       if (entry.duration > 50) { // Long Task 定义为耗时超过 50ms 的任务
         lastLongTaskEndTime = entry.startTime + entry.duration;
       }
     }
   }).observe({ type: 'longtask', buffered: true });
   
   window.addEventListener('load', () => {
     //  假设 TTI 是 load 事件后 5 秒内没有长任务的时间点
     setTimeout(() => {
       tti = lastLongTaskEndTime || performance.timing.loadEventEnd;
       console.log('TTI:', tti);
       reportMetric('time_to_interactive', tti);
     }, 5000);
   });

   这个例子中，我们监听 longtask 事件，记录最后一个长任务的结束时间。然后在 load 事件后，假设 5 秒内没有长任务，就认为 TTI 是最后一个长任务的结束时间，或者 loadEventEnd。

   • 挑战： TTI 的计算方法比较复杂，不同的计算方法可能会得到不同的结果。
   • 改进： 可以使用 Lighthouse 等工具来辅助计算 TTI。

5. 输入延迟（Input Delay）

   用户与页面交互时，浏览器响应用户输入所花费的时间。高输入延迟会导致用户感到卡顿。

   输入延迟可以通过监听 interaction 事件来获取，但兼容性可能存在问题。更常用的方法是使用 First Input Delay (FID)。

   new PerformanceObserver((entryList) => {
     for (const entry of entryList.getEntries()) {
       const fid = entry.processingStart - entry.startTime;
       reportMetric('first_input_delay', fid);
     }
   }).observe({ type: 'first-input', buffered: true });

   PerformanceObserver 监听 first-input 事件，计算 FID。

   • 挑战： FID 只能在用户首次与页面交互时获取。
   • 优化： 优化 JavaScript 执行效率，减少阻塞主线程的任务，可以有效降低输入延迟。

如何处理跨域资源性能监控问题？

如果你的网站使用了CDN或者其他域名的资源，那么直接通过Performance API获取这些资源的性能数据可能会遇到跨域问题。

• 解决方案：
  1. CORS配置： 确保你的资源服务器配置了正确的CORS头，允许你的域名访问这些资源。
  2. Timing-Allow-Origin： 在资源服务器的响应头中添加Timing-Allow-Origin，指定允许获取性能数据的域名。例如，Timing-Allow-Origin: * 允许所有域名获取性能数据。或者 Timing-Allow-Origin: https://yourdomain.com 允许特定域名获取。
  3. crossorigin属性： 在HTML标签（如、