详解谷歌浏览器 performance 选项卡
详解谷歌浏览器 performance 选项卡
- 本文要点
- 性能分析操作流程
- 性能分析图详解
- 后记
本文要点
详细介绍谷歌浏览器 performance 选项卡的各个指标,让你知道如何查看网页性能。
谷歌浏览器版本为:79.0.3945.117(正式版本) (64 位)。
性能分析操作流程
- 在谷歌浏览器调式模式下,切换到 performance 选项卡。点击刷新图标(或者Ctrl+Shift+E快捷键)。
- 出现如下网页分析进度条。
- 自动停止后,会出现性能分析图。
注意点1:需要勾选屏幕快照选项,才会出现如下屏幕快照截图(一般是默认勾选)。
注意点2:整个分析图出现的时间轴就是前面步骤中分析进度条的时间,而默认出现的区域时间轴是首屏加载时间。
如图所示:
(1)以上红色框出的部分(也是整个时间轴)就是前面分析进度条的分析时间。
(2)以上绿色框出的部分是首屏加载时间。
(3)首屏加载时间刻度与选项卡 Summary 的 Total 总时间一致。
(4)如下图可通过左右边界来调整时间轴区域。时间轴区域 2 是 时间轴区域 1 的放大版,便于查看时间轴区间的各项指标性能情况。
性能分析图详解
如下所示,把整张分析图划分成 3 个区域。
区域1:网页性能总览图
总览图包含 FPS(每秒帧数情况)、CPU(CPU占用情况)、NET(网络资源情况)、HEAP(JS占用情况)一共四项指标。
FPS:全称 Frames Per Second,表示每秒传输帧数,是速度单位,用来分析动画的一个主要性能指标。1fps = 0.304 meter/sec(米/秒)。如下图所示,绿色竖线越高,FPS 越高。 红色表示长时间帧,可能出现卡顿。
如果能够达到 >=60fps(帧)/s 的刷新频率,就可以避免出现卡顿。
尽量保证页面要有高于每秒60fps(帧)的刷新频率,这与大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧,就会跟显示器同步刷新,达到最佳的视觉效果。
这意味着,一秒之内进行 60 次重新渲染,每次重新渲染的时间不能超过1/60=0.01666s(秒);0.01666s*1000=16.66ms(毫秒)。
不同帧的体验:
帧率能够达到 50 ~ 60 FPS 的动画将会相当流畅,让人倍感舒适;
帧率在 30 ~ 50 FPS 之间的动画,因各人敏感程度不同,舒适度因人而异;
帧率在 30 FPS 以下的动画,让人感觉到明显的卡顿和不适感;
帧率波动很大的动画,亦会使人感觉到卡顿。
CPU:CPU 资源。此面积图指示消耗 CPU 资源的事件类型。
下图中颜色分别为(与数据统计中的颜色数据表示一致):
蓝色(Loading):表示网络通信和 HTML 解析时间。
黄色(Scripting):表示 JavaScript 执行时间。
紫色(Rendering):表示样式计算和布局(重排)时间。
绿色(Painting):表示重绘时间。
灰色(other):表示其它事件花费的时间。
白色(Idle):表示空闲时间。
NET:每条彩色横杠表示一种资源。横杠越长,检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间)。
HEAP:JavaScrip 执行的时间分布。
区域2:各项指标的区块图
Network:表示每个服务器资源的加载情况。
Frames:表示每幅帧的运行情况。
Timings:上图中有 4 条虚线,分别表示如下。
(1)DCL(DOMContentLoaded)表示 HTML 文档加载完成事件。当初始 HTML 文档完全加载并解析之后触发,无需等待样式、图片、子 frame 结束。作为明显的对比,load 事件是当个页面完全被加载时才触发。
(2)FP(First Paint)首屏绘制,页面刚开始渲染的时间。
(3)FCP(First Contentful Paint)首屏内容绘制,首次绘制任何文本,图像,非空白canvas 或 SVG 的时间点。
(4)FMP(First Meaningful Paint)首屏有意义的内容绘制,这个“有意义”没有权威的规定,本质上是通过一种算法来猜测某个时间点可能是 FMP。有的理解为是最大元素绘制的时间,即同LCP(Largest Contentful Paint )。
其中 FP、FCP、FMP 是同一条虚线,三者时间不一致。比如首次渲染过后,有可能出现 JS 阻塞,这种情况下 FCP 就会大于 FP。
(5)L(Onload)页面所有资源加载完成事件。
(6)LCP(Largest Contentful Paint )最大内容绘制,页面上尺寸最大的元素绘制时间。Main:表示主线程。
合成线程主要负责:
Javascript 的计算与执行;
CSS 样式计算;
Layout 布局计算;
将页面元素绘制成位图(paint),也就是光栅化(Raster);
将位图给合成线程。Raster:光栅化(处理光栅图,即位图)。
GPU:表示 GPU 占用情况。
Chrome_childIOThread:子线程。
Compositor:合成线程。
合成线程主要负责:
将位图(GraphicsLayer 层)以纹理(texture)的形式上传给 GPU;
计算页面的可见部分和即将可见部分(滚动);
CSS 动画处理;
通知 GPU 绘制位图到屏幕上。
JS Heap:表示 JS 占用的内存大小。
Documents:表示文档数。
Nodes:表示 Node 节点数。
Listeners:表示监听数。
GPU Memory:表示 GPU 占用数。
下面的 4 条折线图是以上 4 个指标(没有 GPU 消耗)对应的时间消耗的内存大小与节点数量。若将某项指标前面的勾选去掉则不会出现对应的折线。
注意这个折线图只有在点击 Main 主线程的时候才会有,选择其他的指标时折线图区域时空白。
区域3:数据统计与汇总
Summary:表示各指标时间占用统计报表;
Bottom-Up:表示事件时长排序列表(倒序);
Call tree:表示事件调用顺序列表;
Event Log:表示事件发生的顺序列表;
Loading 事件:
内容 | 说明 |
---|---|
Parse HTML | 浏览器解析 HTML |
Finish Loading | 网络请求完成 |
Receive Data | 请求的响应数据到达事件,如果响应数据很大(拆包),可能会多次触发该事件 |
Receive Response | 响应头报文到达时触发 |
Send Request | 发送网络请求时触发 |
Scripting 事件:
内容 | 说明 |
---|---|
Animation Frame Fired | 一个定义好的动画帧发生并开始回调处理时触发 |
Cancel Animation Frame | 取消一个动画帧时触发 |
GC Event | 垃圾回收时触发 |
DOMContentLoaded | 当页面中的DOM内容加载并解析完毕时触发 |
Evaluate Script | A script was evaluated. |
Event | JS 事件 |
Function Call | 浏览器进入 JS 引擎时触发 |
Install Timer | 创建计时器(调用setTimeout()和setInterval())时触发 |
Request Animation Frame | A requestAnimationFrame() call scheduled a new frame |
Remove Timer | 清除计时器触发 |
Time | 调用 console.time() 触发 |
Time End | 调用 console.timeEnd() 触发 |
Timer Fired | 定时器激活回调后触发 |
XHR Ready State Change | 当一个异步请求为就绪状态后触发 |
XHR Load | 当一个异步请求完成加载后触发 |
Rendering 事件:
内容 | 说明 |
---|---|
Invalidate layout | 当 DOM 更改导致页面布局失效时触发 |
Layout | 页面布局计算执行时触发 |
Recalculate style | Chrome 重新计算元素样式时触发 |
Scroll | 内嵌的视窗滚动时触发 |
Painting事件:
内容 | 说明 |
---|---|
Composite Layers | Chrome 的渲染引擎完成图片层合并时触发 |
Image Decode | 一个图片资源完成解码后触发 |
Image Resize | 一个图片被修改尺寸后触发 |
Paint | 合并后的层被绘制到对应显示区域后触发 |
后记
在我的博文 详解网页性能参数 performance API 中介绍了 performance API 的各项参数。本文介绍谷歌浏览器 performance 选项卡的使用。可能会有读者疑惑,两者有何区别?
详解网页性能参数 performance API 一文主要介绍网页性能 API。你可以在你的 js 脚本中获取到这些参数,来做性能监控,参数判断等。
比如你可以在谷歌浏览器中打开任意网页,进入调式模式,在 Console 选项卡中输入 performance,得到如下参数。
而本文主要介绍如何使用谷歌浏览器性能查看工具 performance 选项卡。读者可两篇文章一起看,加深对网页性能参数的了解。
详解谷歌浏览器 performance 选项卡相关推荐
- 浏览器Performance性能监控使用详解
文章目录 1.Performance 2.测试性能操作流程 3.Performance检测结果详解 区域1:controls[控制栏] 区域2:overview[网页性能总览图] 区域3:火焰图[各项 ...
- 浏览器Performance面板性能监控详解
研背景介绍 1.1 What Chrome DevTools的Performance面板:可以记录和分析页面在运行时的所有活动. 1.2 Why 使用Performance面板解决应用性能瓶颈 为应用 ...
- 详解网页性能参数 performance API
详解网页性能参数 performance 浏览器核心工作 performance 对象 performance 方法 本文要点: 介绍浏览器核心工作流程: 介绍 performance 对象及方法.通 ...
- MYSQL performance schema详解
MYSQL performance schema详解 0.performance_schema的介绍 MySQL的performance schema 用于监控MySQL server在一个较低级 ...
- vb net excel 剪贴板 粘贴_Excel零基础教程选项卡功能详解
Excel功能区详解 你了解[开始]选项卡吗? Excel的[开始]选项卡 应该是我们使用最多的选项卡了 开始中包含了粘贴板.格式刷. 填充桶.条件格式.序列等等实用功能 今天我们就从开始选项卡开始 ...
- 谷歌浏览器开发者工具的快捷键详解
谷歌浏览器开发者工具的快捷键详解 孔子说:工欲善其事,必先利其器. 老子说:孔子说的对. 针对前端开发人员,谷歌浏览器的好处自然不言而喻,其强大的调试工具更是提供了很多便利,现将开发工具常用的快捷键整 ...
- storyboard(故事版)新手教程 图文详解 1.创建一个无约束的导航栏加选项卡(tabbar)故事版
OSX系统10.10.5 Xcode版本7.1 本文图文详解如何初步使用故事版进行开发 1.打开Xcode 点击Create a new Xcode project 选择Single View Ap ...
- vscode中setting.json配置详解
vscode中的setting.json配置文件配置详解 话不多说上配置文件 大家按需复制到自己的setting.json配置文件中即可 [{// 控制是否在编辑器中显示 CodeLens." ...
- python中selenium模块驱动谷歌详解
python中selenium模块驱动谷歌详解 Selenium的介绍.配置和调用 Selenium(浏览器自动化测试框架) 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中 ...
- Windows XP服务详解
Windows XP服务详解 微软的个人操作系统从Win98发展到WinXP,为什么突然变得那么消耗系统资源呢?以至于很多人都感觉WinXP只是高配置的电脑才能运行的操作系统,其实不然.WinXP ...
最新文章
- 内网PC通过NAT server公网地址访问内部服务器时TCP三次握手不成功
- Leetcode 120. 三角形最小路径和 (每日一题 20210927)
- 袁隆平等专家联袂直播 启动农民丰收节交易会消费季活动
- java jbutton 禁用_java – 如何禁用JButton在禁用时变灰?
- 如何看透借款人的隐形负债?
- ALV可输入状态下输入金额字段变小数的问题
- 小米距告别破发还差2分钱
- 5、Oracle备份(oracle备份脚本配置)
- 亚马逊股价继续大涨 首度突破每股800美元
- EduCoder_web实训作业--JavaScript学习手册八:JS函数
- 华三V5交换机ssh配置
- 笔记本电脑计算机里面怎么管理,笔记本电脑如何分区,详细教您笔记本电脑怎么分区...
- 四级英语高分必备完形填空2篇翻译
- 【华为云-IP资源冻结机制】华为云安全事故冻结服务器IP近1小时【50分钟系统全线不可用】
- ICPC2021第一场网络预选赛A题
- miui11开发版升级Android10,小米9透明版MIUI11开发版系统刷机包(最新固件系统升级包MIUI11.9.12.31开发版安卓10)...
- Steel of Heart
- 基于node实现qq空间点赞
- PAT乙级 C语言 1024 科学计数法
- 百度炮轰Google搜索不创新 拟全力进攻云搜索