Chrome 控制台使用手册专栏【八】Performance Panel

wangsd
2,089 阅读9分钟

使用Performance 面板来分析页面运行时性能，用来对页面的响应、动画和空闲阶段进行优化。Performance Panel 应该是每个前端开发者都应该了解并且会使用

参考 - 传送门

开始使用（分析运行时性能）

打卡 Performance 面板

image.png

点击image.png开始记录，点击image.png重新加载页面记录加载过程，点击image.png清除分析报告

image.png

下拉切换分析报告 image.png

点击image.png开始记录，之后可以刷新页面或者进行页面操作（动画、过渡等），点击stop结束，得到一份分析报告

image.png

Screenshots 开启屏幕截图，在录制时捕获每一帧的屏幕截图。

image.png

Memory 开启内存分析图表

image.png

Web vitals 开启查看页面性能指标 (Chrome 88)，包括First Contentful Paint (FCP), Largest Contentful Paint (LCP) and Layout Shift (LS)。鼠标悬浮指标展示相应信息(Chrome 91)

image.png

  • FCP

image.png

  • LCP

image.png

  • LS

image.png

记录过程中，点击image.png强制进行垃圾收集

点击设置image.png获取更多记录设置

image.png

勾选禁用 JavaScript 示例（Disabled Javascript samples），默认情况下，录制的Main部分显示录制期间调用的 JavaScript 函数的详细调用堆栈。可勾选此选项禁用

  • 未禁用（默认）

image.png

  • 禁用 当采样被禁用时，录制的Main部分要短得多，因为它省略了所有的 JavaScript 调用堆栈。

image.png

录制时限制网络(Network)，用于对网络环境进行性能测试

image.png

录制时限制CPU，用于针对各种设备差异进行性能测试

image.png

启用高级绘制（Enable advanced paint instrumentation）,可查看图层信息

image.png

右击分析报告，支持导入导出，同image.png image.png

分析性能报告

分析报告面板，分为三部分，

image.png

  • 包含时间线的概览部分，包含FPS、CPU和NET图表的部分（性能指标） image.png

  • 性能详细信息部分，包含Main、Network、GPU等

image.png

按 Command+F (Mac) 或 Control+F（Windows、Linux）打开性能面板底部的搜索框。可用去线程、事件查找

image.png

  • 摘要信息面板（表格信息面板），包含Summary（概要信息）、Bottom-UP（自下而上）、Call Tree（调用树）、Event Log（事件日志）

image.png

摘要信息面板（表格信息面板）

  • Call Tree 信息，主要记录根活动调用情况

根活动，是那些导致浏览器做一些工作的活动。例如，当您单击一个页面时，浏览器会触发一个Event活动作为根活动。这Event可能会导致处理程序执行，等等。常见的有Event、Paint、Update Layer Tree和Composite Layers等

image.png

Self Time表示直接花费在该活动中的时间。Total Time表示在该活动或其任何子项中花费的时间。

单击Self Time、Total Time或Activity以按该列对表格进行排序。image.png

使用Filter文本框按活动名称过滤事件。点击image.png进行分组

单击Show Heaviest Stack 显示最重的堆栈以显示Activity表右侧的另一个表。单击一个活动以填充最重堆栈表。Heaviest Stack表显示所选活动的哪些子项执行时间最长。 image.png

  • Bottom-UP（自下而上），查看哪些活动直接占用了最多的时间，仅显示录制的选定部分期间的活动，展开 activity 活动查看调用关系（自下而上）。

image.png

Self Time列表示直接花费在该活动中的总时间，包括所有出现的时间。Total Time列表示在该活动或其任何子项中花费的总时间。

  • Event Log（事件日志），按记录期间发生的顺序（执行顺序）查看活动，仅显示录制的选定部分期间的活动。

image.png

Start Time列表示该活动开始的时间点，相对于记录的开始时间。

Self Time列表示直接花费在该活动中的时间。

Total Time列表示直接花费在该活动或其任何子项中的时间。

单击Start Time、Self Time或Total Time以按该列对表格进行排序。

使用Filter文本框按名称过滤活动。

使用image.png菜单过滤掉所有耗时少于 1 毫秒或 15 毫秒的活动。默认情况下，Duration菜单设置为All，这意味着显示所有活动。

禁用Loading、Scripting、Rendering或Painting复选框以过滤掉这些类别中的所有活动。

面板支持操作

通过鼠标点击左滑/右滑或者直接单击时间线选择部分记录进行分析，选择后可通过鼠标滚轮缩小/放大选择范围，双击取消范围查看，同时支持触摸板双指滑动缩放选择范围

image.png

点击详细性能信息上的色块，可以显示摘要信息

image.png

查看Main线程活动

在Main部分查看页面主线程上发生的活动。选中Main部分上的事件可在“摘要”面板中查看有关它的更多信息。

image.png

DevTools 用火焰图表示主线程活动。x 轴表示随时间的记录。y 轴表示调用堆栈。上面的事件导致下面的事件。

查看栅格活动

在Raster部分查看 Raster（栅格） 活动。选中Raster部分上的hi见可在“摘要”面板中查看有关它的更多信息。

image.png

查看GPU活动

在GPU部分查看 GPU 活动。选中GPU部分上的事件可在“摘要”面板中查看有关它的更多信息。

image.png

分析FPS

DevTools 提供了多种分析每秒帧数的方法：

  • 使用FPS图表可以了解整个录制期间的 FPS 
  • 使用帧部分查看特定帧花费了多长时间
  • 当页面运行时，使用FPS 仪表实时估计 FPS。请参阅使用 FPS 仪表实时查看每秒帧数。

FPS图表

FPS图表提供了整个录制期间的帧速率概览。一般来说，绿条越高，帧率越高。

FPS图表上方的红色条表示帧速率下降到可能损害用户体验的警告。

image.png

帧部分

帧部分准确地告诉您特定帧花费了多长时间，将鼠标悬停在Frame的一个帧上显示对应信息。

image.png

鼠标点击Frame上的一个帧可查看更多信息。

image.png

FPS 仪表

FPS 仪表是显示在视口右上角的叠加层。它在页面运行时提供 FPS 的实时估计。

打开FPS 仪表

image.png

或者使用命令行，搜索FPS选择 FPS meter

image.png

页面会悬挂一个FPS仪表 Panel

image.png

查看交互活动

在Interactions部分查看 交互 活动。选中Interactions部分上的事件可在“摘要”面板中查看有关它的更多信息。

image.png

交互底部的红线表示等待主线程所花费的时间

查看网络请求

在Network部分查看网络请求活动。选中Network部分上的请求可在“摘要”面板中查看有关它的更多信息。

image.png

请求的颜色编码如下：

  • HTML：蓝色
  • CSS：紫色
  • JS：黄色
  • 图片：绿色

请求左上角的深蓝色方块表示它是更高优先级的请求。浅蓝色方块表示较低优先级。

image.png

一条请求在Network 表示方式包含左侧的一条灰色直线，中间带有深色部分和浅色部分的条形图，以及右侧的一条灰色直线，左右灰色直线以及浅色条形图不是所有请求都有。main.js

image.png

参照NetWork Panel的同一条请求的Timing信息main.js

image.png

  • 左侧直线表示 Connection Start事件组的所有内容，也就是Request send 之前的所有事件
  • 浅色条形图部分表示 Request Sent和Waiting (TTFB)
  • 深色条形图部分表示 Content Download
  • 右侧直线表示 等待主线程所花费的时间，未在Timing体现

查看内存指标

勾选Memory复选框以查看上次记录的内存指标。

image.png

DevTools在Summary选项卡上方显示一个新的 Memory图表。概览图表下方还有一个新图表HEAP。该图表仅显示当前选择的录制区域。

  • Memory图表

image.png

  • HEAP 图表

image.png

HEAP图表提供与 Memory图表中的JS Heap线相同的信息。

image.png

提供多种内存指标，图表上的彩色线条映射到图表上方的彩色复选框。禁用复选框以从图表中隐藏该类别。

image.png

查看截图信息

通过截图信息来查看动画、过渡效果是否满足预期，查看页面布局异常情况都非常方便

  • 将鼠标悬停在概览上可查看在录制的那一刻页面外观的屏幕截图。

image.png

  • 通过单击详细信息部分中的Frame信息（一个帧）来查看屏幕截图。点击对应色块，则DevTools 在Summary选项卡中显示一个小版本的屏幕截图。

image.png

查看图层信息

在记录时勾选启用高级绘制（Enable advanced paint instrumentation）

image.png

点击Frame的一个帧展示对应的摘要信息，摘要信息多了一个Layers面版查看图层信息

image.png

左侧展示相应的图层节点，点击选择可以在画布高亮对应图层区域

image.png

选中image.png支持拖拽图层（x/y轴移动），选中image.png支持3D旋转（z轴），使用鼠标滚轮进行画布缩放，点击image.png还原画布（重置位置、旋转、缩放）

image.png

勾选Paints展示绘制图层（Paint事件相关）

image.png

image.png

可以在Main选择Paint查看事件

image.png

或者直接在画布上选中Paints图层，查看Paint Profiler绘制明细

image.png

image.png

Paint Profiler 展示绘制时间线、总时长、以及绘制活动 image.png

查看选中持续时间

按住 Shift，单击并按住，然后向左或向右拖动以选择录音的一部分。在您选择的底部，DevTools 显示该部分花费了多长时间。

image.png

Timeline Event Reference 时间线相关事件参考

Timeline Event Reference

使用Rendering面板

使用Rendering面板的功能来帮助可视化页面的渲染性能。

打开Rendering面板

image.png

或者使用命令行 Show Rendering

image.png

FPS 仪表

在页面运行时提供 FPS 的实时估计

image.png

Paint Flashing

使用 Paint Flashing 获取页面上所有绘制事件的实时视图。每当页面的一部分被重新绘制时，DevTools 都会用绿色勾勒出该部分。

image.png

Layer border 图层边框

使用Layer border 图层边框在页面顶部查看图层边框和图块的叠加。

image.png

debug_colors.cc有关颜色编码的说明，请参阅注释。

Scrolling Performance Issues 实时查找滚动性能问题

使用Scrolling Performance Issues 滚动性能问题来识别具有与滚动相关的事件侦听器的页面元素，这些事件侦听器可能会损害页面的性能。DevTools 概述了蓝绿色中可能存在问题的元素。

image.png

滚动性能问题表明存在一个全局的 mousewheel 事件侦听器，这可能会损害滚动性能

Code Web vitals 实时页面性能指标监听

实时查看页面性能指标信息，用来检查是否符合性能要求（颜色标识），主要展示 LCP (Largest Contentful Paint) - 最大内容绘制、CLS (Cumulative Layout Shift) - 累计布局位移）、FID (First Input Delay) - 首次输入延迟

image.png

性能指标-传送门

Web 指标-传送门

image.png

手把手实例

优化网站教程 - 传送门

手把手实例 - 传送门

avatar
文章
阅读
粉丝