前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

背景

我们经常使用 Chrome Dev Tools 来开发调试，但是很少知道怎么利用它来分析页面性能，这篇文章，我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读。如果你认真看了本文，一定能学会分析，没学会，你来找我～

分析面板介绍

上图是 Chrome Dev Tools 的一个截图，其中，我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能，这里简单介绍一下：

• Network : 页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(http1/http2/quic...)、资源类型、资源大小、资源时间线等情况

• Performance : 页面各项性能指标的火焰图，这里能看到白屏时间、FPS、资源加载时间线、longtask、内存变化曲线等等信息

• Memory : 可以记录某个时刻的页面内存情况，一般用于分析内存泄露

• JavaScript Profiler : 可以记录函数的耗时情况，方便找出耗时较多的函数

• Layers : 展示页面中的分层情况

分析步骤说明

首先，我们在分析的时候，建议使用隐身模式打开页面，排除一些插件等因素对页面性能情况的影响。然后，我们把页面缓存勾选去掉，要测 disable cache 的情况，再把网络情况调整一下，我们用电脑打开页面的时候一般都连着 wifi 等，要更真实一些去测页面的性能，还是把网络调到 3G 等情况比较好，如图：

调整好之后，我们切到 Performance 面板，这里先说明一下一些按钮的作用：

上图，从左到右分别代表的是：

1. 手动开始记录，开始后需要手动结束

2. 自动重启页面，并记录整个页面加载的过程。这个是最常用的，一般大概分析页面性能的时候都是点这个就够了

3. 清除性能录制的记录

4. 上传页面性能录制的数据

5. 下载页面性能录制的数据

6. 选择要展示的性能记录。你可能进行了多次分析，这里可以切换去看每次的结果

7. 是否捕捉页面加载过程的截图，这个一般都要勾选

8. 是否记录内存变化，这个一般都要勾选

9. 垃圾回收，点击了即进行一次垃圾回收

这里，我以京东的一个页面为例,勾选 disable cache,网络情况为 Fast 3G，点