Chrome运行时性能瓶颈分析
一,初探,根据现象发现问题
chrome的performance知道很久了,但总是没有特别权威且跟上时代的学习资料,这次痛定思痛,直接看英文文档,一点点把这块啃掉,本笔记基于Chrome 59
step 1: 隐身模式打开chrome
目的是避免缓存以及不必要的问题
step 2: 打开测试地址
谷歌性能测试地址googlechrome.github.io/devtools-sa…
可以看到如下的页面:
页面中有一些蓝色小方块在运动
step 3: 限制cpu速度
由于有些用户的设备cpu性能很高,无法很好的分析移动端,或者发现低级设备的性能问题,所以我们要降速
找到控制台中的performance项,找到CPU选项,选择降低4倍性能或6倍性能
step 4:添加运动小块,找到性能瓶颈
前面限制了cpu的性能,接下来就要找到性能瓶颈了
连续点击Add 10按钮,向页面中添加小块,直到自己都感觉页面上小块运动出现明显卡顿
类似下面这种情况,就已经明显卡顿了
step 5:先看看优化后的效果会怎样?
点击一下Optimize优化,观察一下效果
可以看到页面瞬间变的贼流畅
step 6:体验过优化,再体验一次不优化
再点击一次Un-Optimize(不优化)按钮,可以看到又卡的要死
ok,到这里,大家已经能够通过现象发现性能的差异了,接下来就是要分析现象了
二,了解performance各模块
如何分析现象,肯定要依赖数据,这里就要用到chrome的performance功能了
先将页面切到非优化的状态,点击“录制”按钮
录制4s-5s即可:
然后就可以看到录制的效果了:
上面这些数据看不懂没关系,现在来一步步了解各个部分都有哪些内容
step 1:了解Fps
fps:是指页面每秒帧数
fps = 60 性能极佳
fps < 24 会让用户感觉到卡顿,因为人眼的识别主要是24帧
图中蓝色标注出来的区域,就是FPS记录的信息
放大点看,FPS由两部分组成:
1,红色的条
2,绿色的半透明条
action :1 切换至“已优化”状态
此时切换优化状态,到已优化的状态,再次进行性能录制:
得到Fps数据如下:
可以看到此时:
1,没有了红色条
2,绿色半透明条的高度,明显要比未优化的场景高度要高不少
总结:
红色:意味着帧数已经下降到影响用户体验的程度,chrome已经帮你标注了,这块有问题
绿色:其实就是Fps指数,所有绿色柱体高度越高,性能越好
step 2:了解Cpu
上图中Fps下面的位置,即是Cpu信息
我们再采集一个真实业务的cpu数据,如下图:
对比可以发现,cpu数据的一些特性:
1,cpu包括两种状态:
(1)充满颜色
(2)不充满颜色
2,cpu是否充满颜色和fps存在联系
step 3:了解Net
Net部分可以将屏幕逐帧录制下来,可以帮助观察页面的状态,主要用处,可以帮助分析首屏渲染速度
step 4:了解Frames
1,查看特定帧的fps
Frames部分,主要用于查看特定帧的fps,可以查看特定的帧情况。
2,悬停其上,可以查看数据
可以看到:
这一帧的时间间隔是129.1ms
当前的fps是1000ms/129.1ms = 7.75fps,约等于8fps
这里主要体现的是页面两次刷新之间间隔了129.1ms
3,点击Frames块,得到更详细的数据
点击Frames可以显示当前关键帧的详细信息:
1,duration是当前帧从796.31ms开始等待,796.31ms+127.73ms后进行了一次渲染
2,fps还是老算法,1000ms/127.73ms约等于7fps
3,最下面是关键帧的视图画像
step 5:了解FPS快捷工具
1,在chrome中,还有格more tools选项,选中rendering选项
2,开启fps meter开关
3,直接在页面上,出现了一个fps统计器
这个东西,暂时先关闭,不利于系统性的学习
三,找到瓶颈
前面已经知道我们的测试页面有性能问题,那么接下来就要想为什么了?
step 1:了解Summary
对性能进行录制完成的时候,会默认在底部展示一个Summary摘要,显示全局的信息
上面展示了0~5.52s录制时间的具体耗时:
1,script执行耗时1952.8ms
2,render渲染耗时2986.8ms
3,Painting重绘耗时472.1ms
主要就是这3个耗时,知道了这三部分耗时,只是知道了,哪有问题,但具体问题在哪呢?
step 2:了解Main
上图,红色边框圈出来的,就是Main部分,其中每一块是每一帧中所做的事情
目前这样看不出来什么,脑壳疼,为了方便我们观看,我们可以在fps、cpu、net模块,点击一下,缩小时间区间
如上图,可以通过缩小时间区间,从而放大Main中的内容
现在已经能够看到,Main中展示的是火焰图,也就是函数调用的堆栈
火焰图,可以简单理解,x轴表示时间,y轴表示调用的函数,函数中还包含依次调用的函数,y轴只占用x轴的一个时间维度
step 3:识别问题,红色三角号
上图中,可以看到Animation Frame Fired右上角有个红色三角号,这就是chrome自动帮助识别出有问题的部分
就像FPS中的红条一样,用来识别问题
上图可以看到提示了Warning : 重复处理程序耗时287.77毫秒
step 4:追溯问题,定位代码位置
如上图,可以看到函数调用在代码中的位置,可以点击进行查看
虽然定位到了,是方法update造成的问题,但不够明确,所以需要进一步探索
step 5:进一步分析问题位置
继续查看Main,可以看到app.update下面有很多紫色的条,紫色条本身表示渲染
但请注意!!! 紫色条上还有更小的
运用前面学过放大功能,调整时间区间
可以看到,每个小紫条上,都有一个红色三角
前面提到:红色三角就是chrome帮助自动识别有问题的地方
查看提示信息:强制回流可能是性能瓶颈
点击查看摘要:
可以看到问题定位在了,app.js的71行,点击查看,能够看到是对每一个元素进行样式修改
此代码的问题在于,在每个动画帧中,它会更改每个方块的样式,然后查询页面上每个方块的位置。由于样式发生了变化,浏览器不知道每个方块的位置是否发生了变化,因此必须重新布局方块以计算其位置。
避免这种情况的出现,可以参考developers.google.com/web/fundame…
step 6:对比优化的效果
demo中存在两种状态,优化和非优化
可以看到优化的状态,script和render的时间都大大减少了
所以fps明显提高
step 7:性能优化的知识储备
使用rail模型测量性能developers.google.com/web/fundame…
基础储备:
渲染性能概述developers.google.com/web/fundame…
A Frame 的剖析aerotwist.com/blog/the-an…
转载于:https://juejin.im/post/5cd15712e51d453a393af4c5
Chrome运行时性能瓶颈分析相关推荐
- ASP.NET 2.0运行时简要分析
概述: 本文基于ASP.NET 2.0的源代码,对ASP.NET 2.0运行时进行了简要的分析,希望能帮助你理解ASP.NET 2.0中请求处理过程及页面编译模型. 关键字: ASP.NET 2.0运 ...
- 06JVM运行时内存分析
程序计数器 概述 程序计数器(Program Counter Register)也称之为PC寄存器,是一块较小的内存空间,用来存储指向下一条指令的地址,也可以看作是当前线程执行的字节码的行号指示器. ...
- [转] python运行时内存分析工具meliae
转自:https://my.oschina.net/markco/blog/601773 利用meliae来监控python进程的内存占用情况 meliae是一个python进程内存占用监控.分析工具 ...
- python 内存分析工具_[转] python运行时内存分析工具meliae
meliae是一个python进程内存占用监控.分析工具,它的安装需要依赖pyrex包. 一.安装: 安装python内存分析工具 sudo pip install cython sudo pip i ...
- Performance使用教程:分析运行时性能
Get started 在本教程中,你在一个在线的页面打开DevTools,使用Performance面板在页面上查找性能瓶颈. 1.打开隐身模式下的chrome浏览器,确保chrome运行在一个干净 ...
- qiankun 2.x 运行时沙箱 源码分析
当学习成为了习惯,知识也就变成了常识.感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github,欢迎 Watch 和 Star. 简介 ...
- 应用程序文件Android安全分析挑战:运行时篡改Dalvik字节码
发一下牢骚和主题无关: 本文章由Jack_Jia编写,转载请注明出处. 文章接链:http://blog.csdn.net/jiazhijun/article/details/8833710 作者:J ...
- 分析解决Java运行时异常
1 ,基础知识 http://my.oschina.net/u/140462/blog/421128 JVM运行时内存结构 2 ,相关命令 http://www.open-open. ...
- java反射是运行时,Java反射(三)在运行时利用反射分析对象
在运行时利用反射分析对象,其实就是利用反射来获得或者设置类的域.举例如下: 有一个Student类: package testreflection; public class Student { pr ...
最新文章
- 从ACM班、百度到亚马逊,深度学习大牛李沐的开挂人生
- Input.GetAxis
- 聊聊Spring Boot中的优雅停机
- python3入门教程-python3入门教程之基本数据类型(一)
- 在IIS上搭建WebSocket服务器(三)
- Android BroadcastReceiver广播详解
- 删除microsoft_如何从您的Microsoft帐户中删除设备
- 程序员,该注意下啦!
- hdu-2032杨辉三角
- 一转眼,距 2021 竟然就不到 65 天了,你准备好了么?
- MAC 安装python3 菜鸟教程
- linux wifi中继,树莓派无线中继
- Matlab仿真002-一阶电路
- 制作删不掉的php唯读档,ppt母版logo删除不了怎么办
- java的fprintf_fprintf不接受一个字符数组吗?
- Java随笔记 - TCP通信的基本过程,三次握手,四次挥手
- IIS URL 重写
- Edge浏览器出现翻译不了页面,扩展插件无法下载解决办法
- commander、ora、chalk、inquirer使用
- SQL数据库“正在恢复”,解决和查看方法
热门文章
- java多个类调用_JAVA问题总结之15-多个类之间的调用
- api网关 android,如何通过Android上的retrofit2使用Cognito Credentials调用API网关?
- matlab 转换图片格式,Matlab实现图片格式转换 pgm转jpg等
- java生成pdf怎么合并行或者列_Java基础之PDF文件的合并
- 18f458中断入口C语言_操作系统开发之——中断
- 微型计算机各部件之间通过总线传递各种信息,2015年9月计算机一级考试基础及MSOffice应用选择真题...
- 按钮点击打开新页面_PDF怎么打开?如何制作一个PDF格式的文档?
- mysql sql组合_详解mysql 组合查询
- java 线程安全list_JAVA并发编程实战-线程安全性
- 电脑文件夹可以分屏的软件_电脑上什么便签软件可以添加音频?