如何使用谷歌浏览器开发者工具中的Performance分析网页性能
当我们在进行大并发的直播消息互动时,对浏览器的负荷是比较大的,如何提供一种方法来评估实时网页性能以及相关的数据呢?
可以用谷歌浏览器开发者工具中的Performance绘制火焰图对网页进行分析。
接下来我们通过一步步使用Performance,来看看Performance有哪些强大的功能!
1、工具位置
打开f12开发者工具,选中Performance。我们可以看到如上界面。
- 表示绘制火焰图,可实时绘制一段时间当前页面时间轴的性能轨迹,然后生成一张图表(这个在后面详细讲)
- 表示网速控制,可选3G快、3G慢、或者自定义网速
- 表示是否对CPU进行减速,可选4倍减速、6倍减速,可用来测试CPU在极端环境下对页面性能的影响
2、绘制火焰图
我们拿虎牙直播举例,点击上图中的1按钮会得到下图中的绘制画面。可自己控制时长,时间为秒。这里我们绘制5秒后点击stop完成。
绘制完成后会得到如下火焰图,显示性能报告,我们根据性能报告用来分析页面得性能,从而找到性能瓶颈。
3、分析帧率
下面绿色这条波浪线表示 每一秒的帧率(FPS),这是用来分析动画的重要指标,如果能保持在每秒60帧的话,那么体验是比较流畅的。下面的绿色长条越高表示越流畅,如果为红色则表示帧率有问题。
将鼠标移动到FPS、CPU、NET对应的位置,DevToos就会展示这个时间点页面的截图,左右移动鼠标可以重放当时的屏幕录像。
将鼠标移入绿色的条状上,Devtools会展示这个帧的FPS。
Summary面板就在Performance面板的下方,cpu图表的各种颜色表示在这个时间段内,CPU在处理各种时间上面所花费的时间,如果你看到某段颜色占据了大量的比重,就说明这个地方可能存在优化的空间。
4、定位瓶颈
例如下图
我们发现Scripting占据了CPU大量的时间,接下来所要做的就是如何减少 Scripting在CPU中运行的时间。
展开main图标,我们可以看到主线程运行的状况,X轴代表时间。每个长条代表着event,长条越长就代表花的时间越多,Y轴代表调用栈。
我们可以通过双击、拖动来放大缩小图标的范围,从时间轴来详细观察分析报告。
如果在性能长条中的右上角出现了红色的三角形,说明这个事件存在问题,需要特别留意。点击带有红色三角形的事件,在Summary面板中会看到详细的信息。注意reveal这个链接,双击它,会让它高亮触发这个事件的event,如果点击sdk.herewhite.com/white-web-sdk/2.3.10.js:55就会跳到该段对应的代码处。
跳到可能需要优化的的代码处,它显示了该段代码运行总花费的时间。
5、导出火焰图(profile)
鼠标右键点击图下控制面板空白处,会出现Load Profile和Save Profile,选择Save Profile,便可将该次完整的性能报告导出存入本地。
打开火焰图:即点击Load Profile,选择需要导入的Profile文件即可。
Performance基础的用法就分享到这里了,更多的性能参数和分析还需要大家自己去探索,欢迎大家指导、讨论~
如何使用谷歌浏览器开发者工具中的Performance分析网页性能相关推荐
- Chrome浏览器 开发者工具中的 Performance
目录 ■Chrome浏览器 开发者工具中的 Performance ■画面 ■代码 (2009年前后,大学时期写的代码.) ■工作中的使用 (两个系统同时运行) --- ■Chrome浏览器 开发者工 ...
- 关闭谷歌浏览器开发者工具中的 chrome-extension 网络请求
在谷歌浏览器的设置里,选择扩展程序,关闭插件,即可. ps:得自己一个一个的关闭试试
- 谷歌浏览器开发者工具的使用详解
一.基础功能篇 1. elements 在elements中主要分为两大块: A:HTML结构面板 B:操作dom样式.结构.事件的显示面板 (1)点击箭头选中一个元素,可以在HTML面板中定位到该元 ...
- 谷歌浏览器开发者工具操作手册
谷歌浏览器开发者工具操作手册 文章目录 谷歌浏览器开发者工具操作手册 一.准备工作 1.1 开发者工具打开的几种方式 1.2 将开发者工具设置为中文 二.元素(Elements) 2.1 基本结构图例 ...
- 谷歌浏览器开发者工具标签介绍
谷歌浏览器开发者工具标签介绍: 一般在windows系统上浏览器开发者工具打开都是按F12快捷键. ==>Element标签:该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可 ...
- 谷歌浏览器开发者工具解析
谷歌浏览器开发者工具解析 Elements 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Console 用于显示脚本中所输出的调试信息,或运行测试脚本等. Sourses 用于查看和调试 ...
- 谷歌浏览器开发者工具 preserve log
谷歌浏览器开发者工具 preserve log 在我们开发页面时,点击按钮触发了某个接口并跳转了页面,这时Network中的信息会刷新,不做保留,这个时候我们只需要勾选上谷歌开发者工具的preserv ...
- 谷歌浏览器--开发者工具使用
谷歌浏览器–开发者工具使用 1.源代码面板-sourc 1. 断点 :代码执行到断点处会停止执行 ①跳到下一个断点 ②步过 跳过当前语句到下一个语句 ③步入,进入函数,看语句详细代码 ④步出,跳出 ...
- 谷歌浏览器开发者工具的快捷键详解
谷歌浏览器开发者工具的快捷键详解 孔子说:工欲善其事,必先利其器. 老子说:孔子说的对. 针对前端开发人员,谷歌浏览器的好处自然不言而喻,其强大的调试工具更是提供了很多便利,现将开发工具常用的快捷键整 ...
最新文章
- Hexo Next 博客添加相册瀑布流
- 喜讯不断,BCH又迎来两个代币发行方案
- moxy json介绍_MOXy作为您的JAX-RS JSON提供程序–客户端
- mysql dese_MySQL 5.6-类似于DENSE_RANK的功能,无需订购
- HashMap底层理解(下)
- Swift学习笔记(10)--枚举
- cocos2d-x 通过JNI实现c/c++和Android的java层函数互调 .
- 你需要的阿里开源内核诊断工具:diagnose-tools
- 为什么象网络蚂蚁这样的多线程程序可以加快下载速度?
- linux ssl 脚本 51cto,升级opensslopenssh的shell脚本
- java 快逸报表_快逸报表V4.0功能说明
- 超小型射频接头SMP/SSMP
- xt5 连接android auto,2021年凯迪拉克XT6将添加无线Apple CarPlay和Android Auto
- kodi资源_安装Kodi展示播放NAS电影
- 算法-动态规划-RNA最大碱基对匹配问题C语言求解
- 有一个计算机可以知道手机密码,要不是他,你根本不会忘记密码
- Mybatis的作用
- 下载deb及其依赖软件包,离线安装deb软件包
- 读《程序员修炼之道-从小工到专家》有感
- springboot o.a.tomcat.util.scan.StandardJarScanner : Failed to scan [file:/D:/apache-maven-3.0.5
热门文章
- 在win10+Ubuntu双系统下,卸载Ubuntu并恢复磁盘
- 电脑上怎么压缩jpg图片?什么软件压缩图片好用?
- Cesium开发工具篇 | 04量测工具与调试面板
- Java开发篇——设计模式(4)先生需要代购吗?
- QT 多线程 使用UI
- Windows server 2012 CA认证
- 014day(h5的发展史,h5的兼容,h5的语法,h5的语义化,h5的常用标记,百分比下字体居中的两种方法,video视频文件,audio音频文件,
- 自动驾驶中常用传感器作用
- Visual studio开发C#快捷键
- java graphics画圆,c# Graphics使用方法(画圆写字代码)