chrom 性能分析工具 Performance（二）

程序媛_橙子
551 阅读4分钟

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

书接上文，昨天已经给大家介绍了一部分了，接着咱们继续说哈

记录运行时的页面性能

1.单击 Record 左上角灰色圆圈, 然后就会捕捉页面运行时的性能指标

image.png

2.等待几秒

3.单击 Stop, 停止记录, 分析数据, 然后会将分析结果展示在性能面板中

  • 操作区域：包含录制，刷新页面分析，清除结果等一系列操作
  • overview总览图：高度概括随时间线的变动，包括FPS，CPU，NET
  • 详情区域：从不同的角度分析框选区域 。例如：Network，Frames, Interactions, Main等
  • 总结区域：精确到毫秒级的分析，以及按调用层级，事件分类的整理

image.png

分析帧率

衡量任何动画性能的主要指标就是帧率, 当动画以60 fps的速度运行时, 用户体验是比较好的

1.注意FPS图表。只要你看到一条红条，就意味着低帧率，进而影响用户体验, 通常来说，绿色的柱条越高，代表帧率越高

  • a. FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿

  • 　　 b. CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型

       蓝色(Loading)：网络通信和HTML解析
   黄色(Scripting)：JavaScript执行
   紫色(Rendering)：样式计算和布局，即重排
   绿色(Painting)：重绘
   灰色(other)：其它事件花费的时间
   白色(Idle)：空闲时间

  • 　　 c. NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）

image.png

2.在FPS图表下方，你可以看到CPU图表。CPU图表中的颜色与“性能”面板底部的 Summary 选项卡中的颜色相对应, 每当你看到CPU长时间达到最大负载时，这是进行优化的一个很好的提示

image.png

3.将鼠标悬停在 FPS、CPU 或 NET 图表上, 会显示该页面在该时间点的屏幕截图. 向左和向右移动鼠标以重放记录过程。这称为 scrubbing，它对于手动分析动画过程很有用(如上图)

在 Frames 区域中, 将鼠标悬停在其中一个绿色方块上, 会向你显示该特定帧的 FPS, 每帧可能远远低于60 FPS, 红色则相反

image.png

查出影响性能的根源 现在已经测量并验证了页面性能表现不好，接下来就是需要知道为什么性能不好

注意 Summary 选项卡，在未选择任何事件时，它呈现了浏览器在整个记录过程中把时间花在哪个部分. 可以看到，页面的大部分时间都花在渲染上

所以现在的目标就是：减少浏览器花费在渲染工作上的时间

image.png

展开 Main 区域，展示了一段时间内主线程上活动图, x 轴代表着这段时间内的记录，每一个 Bar 都代表了一个事件。Bar 越宽，意味着该活动花费的时间更长。y轴表示调用堆栈，当你看到事件堆叠在一起时，这意味着上面的事件导致了下面的事件

记录过程中有很多数据, 在 OverView 面板（有 CPU, FPS, NET 图表的区域）上，用鼠标单击、按住、拖拽来放大单个 Animation Frame Fired 事件。此时 Main 和 Summary 中展示了选中的区间的相关信息

image.png

注意在 Animation Frame Fired 事件右上角的红三角，代表这个事件可能造成严重的问题 (每当 requestAnimationFrame() 回调调用时, 都会触发 Animation Frame Fired 事件)

单击某个 Animation Frame Fired 事件, Summary 中会展示与该事件相关的信息. 注意 reveal 链接，单击后，DevTools 会将触发当前的 Animation Frame Fired 事件的事件高亮出来

image.png

同时注意 app.js:94 链接，单击后跳转到相应的源码

image.png

上面就是performance的简单使用啦,后面继续补充......

avatar
文章
阅读
粉丝