前端性能优化《一》——Chrome Performance 页面性能调试

前言

前端性能,这是一个很大也很有趣的一块,是每个前端工程师不可避免的问题,所以这个系列会慢慢地探讨一些关于性能方面的问题。最近也接触到一些性能方面的调试以及优化的工作,纸上得来终觉浅,绝知此事要躬行。

竟然是性能优化,首先第一步就应该是性能调试,发现我们页面性能的问题,这篇文章属于入门级别的,话不多说,进入正题

认识 Chrome Performance

performance 的前世就是之前的 timeline(好吧,我错过了这个时代) 如果你真的找不到的话,可以检查下浏览器的版本,说不定是版本的问题,我的是最新的,所以肯定没有问题

在 Chrome 中,我们打开 Chrome 调试面板,进入 performance 界面。如下所示,按照步骤来

前端性能优化《一》——Chrome Performance 页面性能调试

 

解释下: 第二步:screenshots 是对你的屏幕进行截图,后面会生成相关的比较直观的截图 第四步:模拟 CPU 速度,更加方便你重现问题,如果 4x slowdown 不行,你可以选择 6x slowdown

我们可以看到左上侧的位置有几个重要按钮,其作用如下:

前端性能优化《一》——Chrome Performance 页面性能调试

 

我们点击重新录制,就会出现:

前端性能优化《一》——Chrome Performance 页面性能调试

 

完成之后就会出现以下的界面,这里都是我们应该重点关注的内容

先来看看有哪些部分:

前端性能优化《一》——Chrome Performance 页面性能调试

 

  • 第一部分:controls,上面已介绍
  • 第二部分:重要参数,这一部分我们称之为 Overview 窗格,我们可以看到 FPS, CPU, NET在页面加载时候的变化。
  1. FPS:每秒帧数,绿色竖线越高, FPS 越高,我们应该关注红色部分,这说明我们的页面很可能出现卡顿现象,另外 60 是一个比较理想的值
  2. CPU: CPU 资源
  3. NET: 每条彩色横杆代表一种资源,横杆越长,检索资源所需要的事件越长
第三部分:火焰图
  1. 横轴表示加载的时间
  2. 纵轴表示事件(线程)的执行顺序,先是上面的执行再到下面的,我们要特别注意红色的三角行部分
第四部分:Summary 部分,可以看到 CPU 中中的资源分配,比如下图中的 Rendering(渲染)占比就很大

使用小提示:第二、三、四部分都是联动的,比如你选择火焰图中的某个部分,下面的 Summary 就会显示这个部分的总结

前端性能优化《一》——Chrome Performance 页面性能调试

 

使用 Performance 定位性能问题

上面简单介绍了一下 Performance,在我们得到数据之后,怎么分析?

具体的步骤如下:

前端性能优化《一》——Chrome Performance 页面性能调试

 

点击一下具体的执行代码,我们就可以看到相关的问题代码了

前端性能优化《一》——Chrome Performance 页面性能调试

 

结束语

上面我们只是介绍了怎么定位性能问题,接下来怎么优化,这是一个很大的问题,接下来会慢慢的在这个系列中总结归纳!

本文分享自微信公众号 - 前端杂货铺(gh_9013e08e595a),作者:GpingFeng

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

上一篇:优雅的部署Redis实例


下一篇:ISR吞吐性能问题