一步一步学谷歌性能测试(chrome) 性能测试教程
一步一步学谷歌性能测试(chrome) 性能测试教程
(地图类)
第一章、测试的地址
第二章、来到控制台
第三章、设置成中文
第四章、录制脚本
第五章、保存测试结果
第六章、查看测试结果
第七章、认识指标
第八章、性能结果分析
第九章、总结
前言
本文就介绍了谷歌性能测试(chrome) 性能测试(地图类)一步步的操作,及如何去分析,优化,从而大大提升项目的性能效率。
一、测试的地址
1、进入你要做性能的网页(这里我拿百度地图为例[谷歌浏览器])
地址: https://map.baidu.com/@11585280.82,3555907.48,12z
二、来到控制台
2、按F2或者(自定义及控制-更多工具开发者工具)来到控制台,来到控制台我们发现是英文的,我们比它切换成中文,(我习惯用中文,你们也可以用英文),点击齿轮小按钮进入设置:
控制台设置:
三、设置成中文
设置成中文:
选择切换成中文,关闭后在重新打开就是中文了
四、录制脚本
点击圆圈小按钮或者用快捷键Ctrl+e开启录制,然后再请求你要录制的地址或接口,进去后浏览就会录制你请求的地址和浏览是的加载的全部内容,然后停止后会自动进行分析
分析后的结果:
五、保存测试结果
点击向下箭头就是保存性能测试结果,保存的是.json文件
六、查看测试结果
点击箭头向上的按钮就是查看结果的,把保存下来的.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,内存情况分析,从自上而下可以查看到各个接口,文件等消耗的时间进行有针对性的优化从而对项目的性能做出重大提升。
一步一步学谷歌性能测试(chrome) 性能测试教程相关推荐
- 【Linux】一步一步学Linux——wget命令(192)
00. 目录 文章目录 00. 目录 01. 命令概述 02. 命令格式 03. 常用选项 04. 参考示例 05. 附录 01. 命令概述 wget命令用来从指定的URL下载文件.wget非常稳定, ...
- 【Linux】一步一步学Linux——host命令(162)
00. 目录 文章目录 00. 目录 01. 命令概述 02. 命令格式 03. 常用选项 04. 参考示例 05. 附录 01. 命令概述 host命令是常用的分析域名查询工具,可以用来测试域名系统 ...
- 一步一步学python爬虫_初学Python之爬虫的简单入门
初学Python之爬虫的简单入门 一.什么是爬虫? 1.简单介绍爬虫 爬虫的全称为网络爬虫,简称爬虫,别名有网络机器人,网络蜘蛛等等. 网络爬虫是一种自动获取网页内容的程序,为搜索引擎提供了重要的数据 ...
- 一步一步学Silverlight 2系列(3):界面布局
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(10):使用用户控件
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(24):与浏览器交互相关辅助方法
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(18):综合实例之RSS阅读器
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Linq to sql(一):预备知识
从今天起将推出新手讲堂,首先从linq开始详细讲解.一步一步学Linq to sql(一):预备知识 什么是Linq to sql Linq to sql(或者叫DLINQ)是LINQ(.NET语言集 ...
- 手挽手带你学React:四档(上)一步一步学会react-redux (自己写个Redux)
手挽手带你学React入门四档,用人话教你react-redux,理解redux架构,以及运用在react中.学完这一章,你就可以开始自己的react项目了. 之前在思否看到过某个大神的redux搭建 ...
最新文章
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- YOLOv5添加注意力机制 Pytorch
- 富文本编辑器 java_Java开发之富文本编辑器TinyMCE
- 洛谷P1352 没有上司的舞会(树形DP水题)
- Android AppWidgetProvider应用
- [css] 怎么让英文单词的首字母大写?
- 开课吧Java课堂:是什么是比较函数?
- 解决办法:.No package ‘freetype2‘ found
- 陆辰是一名初级药剂师,16西药执业药师一次过17中药一次过 考中级药师#医学生
- python lol脚本_Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
- [2017湖南集训7-8]暗牧 虚树+最短路
- arduino传感器大全
- 【深入理解C++】头文件防卫式声明
- Geometric deep learning: going beyond Euclidean data译文
- 今天安利几个实用的APP给你
- 天才少年!他们的内心世界你懂吗?道翰天琼认知智能机器人平台API接口为您揭秘。
- Python编程快速入门
- [SRS+docker]实现直播服务器 2 SRS单机直播能力验证
- 华为应用内支付验签失败,报错Signature length not correct
- C#中的多線程-----引自:http://www.daima.com.cn/info/234.htm
热门文章
- php判断范围,范围判断标签
- 如何在IDEA的包下创建子包
- php字符串用什么括起来,PHP的字符串型数据,可以用以下哪些符号括起来()。
- 保留小数点1位 php,PHP保留小数位的三种方法
- 微信小程序--使用swiper实现滚动广告
- Spring5.3.0源码下载
- 抽象语法树AST以及babel原理
- mysql中文占几个char_数据库中一个汉字占几个字符?
- android 调用第三方QQ、微信、新浪微博、腾讯微博等聊天方法
- Python 将一个目录下的所有word文档转为txt