前端性能优化-通常前端性能监控需要关注哪些指标？

前端性能监控通常包括页面加载时间、首字节时间、渲染时间、每秒帧数、内存使用量、首次绘制时间、长任务等指标，这些指标分别是什么，如何实现监控呢。

以下是前端性能监控的几个指标：

1. 页面加载时间：这个指标衡量了页面完全加载并变得可交互所需的时间。要跟踪这个指标，可以使用 JavaScript 中的 performance.timing API。具体来说，可以从 navigationStart 时间戳中减去 loadEventEnd 时间戳以获取页面加载时间。以下是一个示例：

const pageLoadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
console.log(`页面加载时间：${pageLoadTime}毫秒`);

2. 首字节时间（TTFB）：这个指标衡量了服务器响应第一个数据字节所需的时间。要跟踪这个指标，可以使用像 Google Chrome 的 DevTools 这样的工具。在 Network 标签页中，可以查看每个请求的 TTFB。

3. 渲染时间：这个指标衡量了浏览器渲染页面所需的时间。要跟踪这个指标，可以再次使用 performance.timing API。具体来说，可以从 responseEnd 时间戳中减去 domLoading 时间戳以获取渲染时间。以下是一个示例：

const renderTime = performance.timing.responseEnd - performance.timing.domLoading;
console.log(`渲染时间：${renderTime}毫秒`);

4. 每秒帧数（FPS）：这个指标衡量了每秒渲染的帧数。要跟踪这个指标，可以使用像 Google Chrome 的 DevTools 这样的工具。在 Performance 标签页中，可以查看每个帧的 FPS。

5. 内存使用量：这个指标衡量了浏览器正在使用的内存量。要跟踪这个指标，可以使用 JavaScript 中的 performance.memory API。具体来说，可以查看 usedJSHeapSize 属性以查看正在使用的内存量。以下是一个示例：

const memoryUsage = performance.memory.usedJSHeapSize;
console.log(`内存使用量：${memoryUsage}字节`);

6. 首次绘制时间（TTP）：这个指标衡量了第一个非白色像素绘制到屏幕上所需的时间。要跟踪这个指标，可以使用 JavaScript 中的 performance.timing API。具体来说，可以从 navigationStart 时间戳中减去 domLoading 时间戳以获取 TTP。以下是一个示例：

const ttp = performance.timing.domLoading - performance.timing.navigationStart;
console.log(`首次绘制时间：${ttp}毫秒`);

7. 长任务：这些任务需要执行超过 50 毫秒的时间，并且可能会阻塞主线程，导致卡顿和用户体验差。要跟踪这些任务，可以使用 JavaScript 中的 performance API。具体来说，可以使用 performance.now() 方法获取高分辨率时间戳，并将其与代码中其他事件的时间戳进行比较。以下是一个示例：

function doLongTask() {
  // 模拟长任务
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
}

const startTime = performance.now();
doLongTask();
const endTime = performance.now();
const duration = endTime - startTime;
if (duration > 50) {
  console.log(`检测到长任务：${duration}毫秒`);
}

通过跟踪这些指标，可以更好地了解前端应用程序的性能，并确定需要改进的方面。

本文永久链接: https://www.mulianju.com/performance-frontend/