HOW - 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帧），帧率下降可能意味着性能瓶颈。