一步一步学谷歌性能测试(chrome) 性能测试教程_chrome逐帧录制原理是什么-程序员宅基地

技术标签： chrome 性能优化压力测试可用性测试前端地图类性能测试

一步一步学谷歌性能测试(chrome) 性能测试教程

(地图类)
第一章、测试的地址
第二章、来到控制台
第三章、设置成中文
第四章、录制脚本
第五章、保存测试结果
第六章、查看测试结果
第七章、认识指标
第八章、性能结果分析
第九章、总结

前言

本文就介绍了谷歌性能测试(chrome) 性能测试(地图类)一步步的操作，及如何去分析，优化，从而大大提升项目的性能效率。

一、测试的地址

1、进入你要做性能的网页(这里我拿百度地图为例[谷歌浏览器])
地址： https://map.baidu.com/@11585280.82,3555907.48,12z

二、来到控制台

2、按F2或者(自定义及控制-更多工具开发者工具)来到控制台，来到控制台我们发现是英文的，我们比它切换成中文，(我习惯用中文，你们也可以用英文)，点击齿轮小按钮进入设置：
控制台设置：在这里插入图片描述

三、设置成中文

设置成中文：在这里插入图片描述
选择切换成中文，关闭后在重新打开就是中文了

四、录制脚本

点击圆圈小按钮或者用快捷键Ctrl+e开启录制，然后再请求你要录制的地址或接口，进去后浏览就会录制你请求的地址和浏览是的加载的全部内容，然后停止后会自动进行分析
在这里插入图片描述

分析后的结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/af83176e8daf4327bf2191f54735b07d.png

五、保存测试结果

点击向下箭头就是保存性能测试结果，保存的是.json文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/bb3db2d3619b43c8b22cf19ff62a6243.png

六、查看测试结果

点击箭头向上的按钮就是查看结果的，把保存下来的.json文件加载进去就可以查看性能测试结果
在这里插入图片描述

七、认识指标

fps：是指页面每秒帧数
fps = 60 性能极佳
fps < 24 会让用户感觉到卡顿，因为人眼的识别主要是 24 帧
红色：意味着帧数已经下降到影响用户体验的程度，chrome已经帮你标注了，这块有问题
绿色：其实就是Fps指数，所有绿色柱体高度越高，性能越好
Net 部分可以将屏幕逐帧录制下来，可以帮助观察页面的状态，主要用处，可以帮助分析首屏渲染速度
FPS:
在这里插入图片描述

CPU:
在这里插入图片描述

网络：
在这里插入图片描述

截图：
在这里插入图片描述

堆：
在这里插入图片描述

帧：
悬停其上，可以查看数据
在这里插入图片描述

录制总耗时：蓝色(Loading)：网络通信和HTML解析时间
黄色(Scripting)：JavaScript执行时间
紫色(Rendering)：渲染时间
绿色(Painting)：重绘
灰色(system)：系统花费的时间
白色(Idle)：空闲时间
总时间-空闲时间，就是此界面显示需要的时间。

八、性能结果分析

在这里插入图片描述

上面展示了 171毫秒～22.63秒录制时间的具体耗时：
1，script 执行耗时 6817 ms
2，render 渲染耗时 265 ms
3，Painting 重绘耗时 207 ms
主要就是这 3 个耗时，知道了这三部分耗时，只是知道了，哪有问题，但具体问题在哪呢
在这里插入图片描述
上图中，可以看到 Animation Frame Fired 右上角有个红色三角号，这就是chrome 自动帮助识别出有问题的部分

蓝色：JS堆红色：文档绿色：节点黄色：监听器紫色CPU内存

在这里插入图片描述

可以观察他的FPS,网络，CPU，内存情况分析，从自上而下可以查看到各个接口，文件等消耗的时间进行有针对性的优化从而对项目的性能做出重大提升。

在这里插入图片描述

九、总结

根据他的FPS,网络，CPU，内存情况分析，从自上而下可以查看到各个接口，文件等消耗的时间进行有针对性的优化从而对项目的性能做出重大提升。

本文链接：https://blog.csdn.net/a756598009/article/details/125479283

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ITK／VTK对DICOM文件的读取_sitk读取mnc文件-程序员宅基地

文章浏览阅读6.6k次。在ITK中，对dicom的读取使用的是GDCM库，而在VTK库中使用的是直接是DicomFileReader库。在ITK中，读取DICOM文件的程序示例如下：_sitk读取mnc文件

求二维数组a[3][4]中的最大数和最小数_在二维数组中查找最大值和最小值并输出-程序员宅基地

文章浏览阅读2.2k次。求二维数组a[3][4]中的最大数和最小数#include<stdio.h>void main(){ int a[3][4],i,j,max,min; //输入 for(i=0;i<3;i++){ for(j=0;j<4;j++){ scanf("%d",&a[i][j]); } } //找最大数、最小数 min=a[0][0]; max=a[0][0]; for(i=0;i<3;i++){ for(j=0;j<4;j++){_在二维数组中查找最大值和最小值并输出

JUC锁——共享锁和可重入读写锁_共享锁支持重入吗-程序员宅基地

文章浏览阅读452次。概要 JUC中的共享锁有CountDownLatch、CyclicBarrier、Semaphore、ReentrantReadWriteLock等，本章会以ReentrantReadWriteLock为蓝本对共享锁进行说明。ReadWriteLock 和 ReentrantReadWriteLock介绍 ReadWriteLock，顾名思义，是读写锁。它维护了一对相关的锁——“读取锁”..._共享锁支持重入吗

Android内核开发：为什么刷机后系统第一次启动会很慢？_手机刷机完后开机慢-程序员宅基地

文章浏览阅读218次。转载自http://blog.51cto.com/ticktick/1677216 在做Android内核开发的过程中，我们会发现，每次编译完系统源码，烧录到设备/手机中后，第一次启动都会很慢很慢，要好几分钟甚至十几分钟，为什么会出现这样的现象呢？系统刷机后第一次启动与后面再次启动有什么不同呢？要解答这个问题，首先我们需要了解一下Android Dalvik虚拟机，以及Dalvik-cache。..._手机刷机完后开机慢

数据验证技术的应用场景：如何实现区块链网络的可扩展性-程序员宅基地

文章浏览阅读995次，点赞23次，收藏24次。1.背景介绍区块链技术作为一种去中心化的分布式账本，具有很高的潜力。然而，随着区块链网络的扩展和应用，一些挑战也随之而来。其中，可扩展性是一个非常重要的问题。数据验证技术在这方面发挥着关键作用。本文将从以下几个方面进行探讨：背景介绍核心概念与联系核心算法原理和具体操作步骤以及数学模型公式详细讲解具体代码实例和详细解释说明未来发展趋势与挑战附录常见问题与解答1.背景介绍..._区块链可扩展性问题

迁移学习在图像生成与修复中的应用-程序员宅基地

文章浏览阅读873次，点赞11次，收藏5次。1.背景介绍图像生成和修复是计算机视觉领域的重要研究方向，它们在人工智能、计算机视觉和图像处理等领域具有广泛的应用。图像生成涉及到通过某种算法或模型生成新的图像，而图像修复则涉及到通过某种方法修复损坏或缺失的图像。迁移学习是一种深度学习技术，它可以帮助我们在有限的数据集上训练更好的模型，并在新的任务上获得更好的性能。在这篇文章中，我们将讨论迁移学习在图像生成和修复中的应用，以及其核心概念、算法...

随便推点

javascript将canvas的ImageData转Image和DataURL_js getimagedata 转为 image-程序员宅基地

文章浏览阅读490次。【代码】javascript将canvas的ImageData转Image和DataURL。_js getimagedata 转为 image

Visual Studio 2022 从下载安装到如何使用的全面讲解（图文详解）_vs2022-程序员宅基地

文章浏览阅读1.7k次，点赞44次，收藏49次。Visual Studio 2022做为一款集成开发软件是一款非常好用的代码开发软件，而且可调试让我们快速找到错误！和理解代码出了那些问题！可以说是初学者的必备利器！_vs2022

如何复制word的图文到TinyMCE中自动上传_tinymce复制上传word文档-程序员宅基地

文章浏览阅读203次。这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台（服务端）java服务代码：（上传至ROOT/lqxcPics文件夹下）<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%@pagecontentType="text/html;charset=utf-8"%><%@pageim..._tinymce复制上传word文档

jBPM4.2 安装到tomcat 和 mysql上的步骤。并且创建一个最简单的应用-程序员宅基地

文章浏览阅读2.4k次。1.前提条件已经安装好 jdk1.6，并且配置好已经下载好jbpm4.2，并且解压。已经安装好tomcat6已经安装好 mysql5.1已经安装好 ant1.7已经安装好 eclipse-jee-galileo-win32 2.设置ant的环境变量 ANT_HOME=D:/Program Files/Apa_jbpm4.2

keepalived简易安装及配置文件详解_dynamic_interfaces allow_if_changes-程序员宅基地

文章浏览阅读2k次。设置主机名称[root@localhost keepalived]# hostnamectl set-hostname node1[root@localhost keepalived]# hostnamenode1[root@localhost data]# hostnamectl set-hostname node2[root@localhost data]# hostnamenode2keepalived源码版本[root@node2 ~]# ll /data/keepalive._dynamic_interfaces allow_if_changes

高速电机的特性及工作原理（深度总结）_高速电机原理图-程序员宅基地

文章浏览阅读1.4w次，点赞3次，收藏18次。高速电机的命名定义：高速电机，也称主轴电机，广义范围来讲，高速电机又可以被称为电主轴，高速电主轴等等，通常是指转速超过10000r/min的电机，目前最高转速可达300000r/min高速电机又分为：AC交流异步电机、DC同步永磁电机、BLDC无刷电机、bldc变频电机等高速电机优点：一、由于转速高，所以电机功率密度高，而体积远小于同等功率的普通电机，可以有效的节约材料；二、..._高速电机原理图