Chrome DevTools性能分析指南：从入门到实战

Chrome DevTools性能分析指南：从入门到实战

引用

CSDN

1.

https://blog.csdn.net/weixin_58540586/article/details/139096901

在前端开发中，性能优化是一个永恒的话题。Chrome DevTools作为最常用的开发者工具之一，提供了强大的性能分析功能，可以帮助开发者快速定位和解决性能瓶颈。本文将详细介绍如何使用DevTools进行性能分析，并提供具体的优化建议。

一、背景

1.1 DevTools

Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。借助开发者工具，您可以即时修改页面并快速诊断问题，从而更快地构建更好的网站。

1.2 性能

我们在使用谷歌浏览器 DevTools 的性能分析功能时，一般可以获得如下统计图：

如此复杂的界面包括了非常多的性能指标信息，我们应该如何准确分析和定位问题呢？

这里面会涉及浏览器主线程和渲染线程解析过程，可以补充阅读：

1. WHAT - script 加载（含 async、defer、preload 和 prefetch 区别）中 「浏览器渲染的工作流程」和「HTML 解析和渲染过程中的 js 和 css」
2. WHAT - CSS Animationtion 动画系列（三）- 动画卡顿分析

二、性能分析指南

DevTools（开发者工具）性能分析是前端开发过程中一个非常重要的部分，通过对网页进行性能分析，你可以找出影响页面加载速度和响应时间的瓶颈，从而进行优化。以下是一个详细的DevTools性能分析指南：

1. 打开DevTools

在Chrome浏览器中，按 F12 或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）可以打开开发者工具。

2. 进入Performance面板

点击顶部的 Performance 标签，可以看到性能分析面板。

3. 记录性能数据

点击左上角的圆形录制按钮（或按下 Ctrl+E 或 Cmd+E），然后刷新页面或进行你想要分析的操作。录制按钮会变红，表示正在记录。完成操作后，再次点击录制按钮停止记录。

4. 分析录制结果

录制停止后，DevTools会生成一个详细的性能分析报告。报告包含以下几个关键部分：

A. 时间轴

在顶部的时间轴上，你可以看到页面加载过程中各个事件的分布，包括脚本执行、样式计算、布局、绘制等。时间轴上的颜色代表不同类型的活动：

• 黄色: JavaScript 执行
• 紫色: 样式计算
• 绿色: 布局
• 蓝色: 绘制
• 红色: 不可见的任务（如垃圾回收）

B. 事件详情

点击时间轴上的任意事件，你可以在下面的详细信息面板中查看该事件的具体细节，包括其开始时间、持续时间以及调用堆栈。

C. FPS 图表

Frames per Second (FPS) 图表显示了页面在录制期间的帧率。理想的帧率是60fps（每秒60帧），帧率下降可能意味着性能瓶颈。

D. 堆栈图

堆栈图展示了页面在每个时间段内的资源使用情况，可以帮助你识别哪些函数调用消耗了最多的时间。

5. 识别性能瓶颈

通过分析录制结果，你可以识别出可能的性能瓶颈所在：

• JavaScript 执行时间长：如果黄色部分占比很大，可能需要优化脚本执行，避免长时间阻塞主线程。
• 布局和绘制时间长：如果绿色和蓝色部分较多，可能需要优化CSS和DOM结构，减少重排和重绘。
• 网络请求慢：在时间轴上查看网络请求的时间，使用 Network 面板可以进一步分析请求的详情和性能。

三、优化建议

3.1 基本优化

针对不同的性能瓶颈，有以下优化建议：

A. 优化JavaScript

• 减少不必要的DOM操作
• 避免长时间运行的同步任务
• 使用 requestAnimationFrame 优化动画和布局
• 分解大型任务，使用 setTimeout 或 setImmediate 分段执行

B. 优化CSS和布局

• 减少复杂的选择器和嵌套
• 避免频繁的重排和重绘
• 使用CSS动画代替JavaScript动画

C. 优化网络请求

• 压缩和合并资源文件（如CSS、JavaScript）
• 使用懒加载和异步加载资源
• 利用浏览器缓存

除了上述罗列的，加载和渲染优化还有许多工作可以去做，这里就不展开了，需要根据具体场景具体设计最佳实践。

3.2 长任务分析：long-tasks

长任务可以说是我们性能分析里最需要关注的内容。

在Web性能优化中，“长任务”（Long Tasks）是指在主线程上运行时间超过50毫秒的任务。长任务会阻塞主线程，导致用户交互卡顿、动画不流畅以及页面响应变慢。因此，识别和优化长任务对于提升用户体验非常重要。

1. 如何识别长任务

使用Chrome DevTools，可以轻松识别和分析长任务。以下是具体步骤：

1. 打开DevTools：

• 按 F12 或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）打开开发者工具。

2. 进入Performance面板：

• 点击顶部的 Performance 标签。

3. 记录性能数据：

• 点击左上角的录制按钮（或按下 Ctrl+E 或 Cmd+E），刷新页面或进行你想要分析的操作。完成操作后，再次点击录制按钮停止记录。

4. 查看长任务：

• 在录制结果中，长任务会以黄色条带出现在时间轴上，并在任务的末端标有一个红色的小警告标志。你可以点击这些条带查看任务的详细信息。

2. 长任务的影响

长任务会导致以下问题：

• 页面卡顿：用户在进行滚动、点击等操作时，页面响应延迟或卡顿。
• 动画不流畅：动画或过渡效果不平滑，出现跳帧现象。
• 输入延迟：用户输入（如键盘、鼠标操作）响应缓慢。

3. 优化长任务的策略

为了优化长任务，可以采取以下措施：

1. 分解任务

将长时间运行的任务拆分为多个较小的任务，利用JavaScript的异步特性，避免阻塞主线程。例如：

function performHeavyTask() {
  let chunkSize = 100;
  let i = 0;
  function processChunk() {
    let end = Math.min(i + chunkSize, data.length);
    for (; i < end; i++) {
      // 执行部分任务
    }
    if (i < data.length) {
      setTimeout(processChunk, 0); // 继续处理下一个块
    }
  }
  processChunk();
}

2. 使用Web Workers

将耗时的计算任务移到Web Worker中运行，避免阻塞主线程。

// 主线程
let worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(event) {
  console.log('Result:', event.data);
};

// worker.js
self.onmessage = function(event) {
  let data = event.data;
  // 执行耗时计算
  let result = heavyComputation(data);
  self.postMessage(result);
};

3. 优化代码

• 减少不必要的DOM操作：频繁的DOM操作会导致重排和重绘，应尽量减少。
• 优化算法：改进代码逻辑，使用更高效的算法。
• 避免阻塞式API：避免使用阻塞主线程的API，如同步XHR请求。

4. 使用 requestIdleCallback

利用 requestIdleCallback 在浏览器空闲时间执行非紧急任务。

function performNonCriticalTask() {
  requestIdleCallback(function() {
    // 执行非紧急任务
  });
}

四、持续监控和调优

性能优化是一个持续的过程，每次修改代码后都需要重新进行性能分析，确保优化措施取得预期效果。

通过上述步骤，你可以使用DevTools对网页进行详细的性能分析，找出并优化影响性能的瓶颈，从而提升页面的加载速度和响应时间。