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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue-router之路由钩子(八)

路由钩子&#xff0c;即导航钩子&#xff0c;其实就是路由拦截器&#xff0c;vue-router一共有三类&#xff1a;全局钩子&#xff1a;最常用路由单独钩子组件内钩子1、全局钩子在src/router/index.js中使用&#xff0c;代码如下&#xff1a;// 定义路由配置const router new V…

java第一 ++--

大的转换小的自动转换 byte -> short -> int -> long -> float -> double l 自动类型转换 表示范围小的数据类型转换成范围大的数据类型&#xff0c;这种方式称为自动类型转换 自动类型转换格式&#xff1a; 范围大的数据类型 变量 范围小的数据类型值&#xf…

在加拿大读大学被开除了,以后该怎么办?

在加拿大读大学被开除了&#xff0c;以后该怎么办&#xff1f; 一天晚上正准备睡觉的时候&#xff0c;手机振动&#xff0c;打开一看&#xff0c;是一条微消息&#xff0c;“在加拿大读大学被开除了&#xff0c;以后该怎么办&#xff1f;”又一个留学生遇到的棘手问题。在国内上…

GO编程程序员修炼秘籍:十本经典书单

随着BAT、今日头条、京东、抖音等大型互联网公司对Go语言的大范围应用&#xff0c;带动更多互联网企业采取技术跟随战略&#xff0c;Go语言发展前景一片大好。5月20日工业和信息化部信息中心发布《2018中国区块链产业白皮书》&#xff0c;Go语言与区块链成为“数字中国”建设的…

AngularJs 冷兵器杂谈

一、指令 scope.template中的dom属性值可以直接用{{attr}}表达式取到scope中的属性attrlink中attr.$observe可以监听scope属性attr的动态变化需要改变$scope上的属性值时&#xff1a;$scope.$apply(function(){$scope.attr newValue }) 复制代码二、服务 循环依赖&#xff08;…

02-print的用法

print的常用&#xff1a; print(hello world!)print(hello,world!) # 逗号自动添加默认的分隔符&#xff1a;空格。print(hello world!) # 加号表示字符拼接。print(hello,world,sep***) # 单词间用***分隔。print(# * 20) # *号表示重复20遍。print(are you sure?, end)…

单田芳白眉大侠全320回下载

1、搜索“十方评书网”。 2、要下载那个评书家的选择那个评书家。 3、然后选择自己要下载的下载可以了。 转载于:https://blog.51cto.com/14204019/2392323

pip模块 redis、xlrd、xlutils、nnlog、requests

# import模块的实质&#xff1a;把python文件执行一遍,# 导入模块的顺序&#xff0c;1、从当前模块找&#xff0c;如果当前模块没有&#xff0c;2、就去python环境变量里面找 pip install redispip install xlrd pip install xlutilspip install nnlogpip install requests pip…

react.js基础

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS&#xff0c;ReactJs的虚拟DOM&#xff08;Virtual DOM&#xff09;和组件化的开发深深的吸引了我&#xff0c;下面来跟我一起领略ReactJs的风采吧~~ 文章有点长&#xff0c;耐心读完&#xff0c;你会有…

第 11 章 日志管理 - 089 - 初探 ELK

在开源的日志管理方案中&#xff0c;最出名的莫过于 ELK 了。 ELK 是三个软件的合称&#xff1a;Elasticsearch、Logstash、Kibana。 Elasticsearch 一个近乎实时查询的全文搜索引擎。Elasticsearch 的设计目标就是要能够处理和搜索巨量的日志数据。 Logstash 读取原始日志&…

【转】Kotlin 新版来了,支持跨平台!

作者&#xff1a;Tamic 原文链接&#xff1a;juejin.im/post/5cd8f9… 谷歌在今年的 I/O 大会上宣布&#xff0c;Kotlin 编程语言现在是 Android 应用程序开发人员的首选语言(谷歌宣布 Kotlin 成为安卓开发首选)。 还有一个好消息, Kotlin 1.3.30 正式发布&#xff0c;做了对ap…

WebSocket轻松单台服务器5w并发jmeter实测

测试结论 nginx最多只能维持(65535*后端服务器IP个数)条websocket的长连接&#xff0c;如果后端websocket服务器IP只有一个&#xff0c;那么就只能最多支持65535条连接。瓶颈就产生在了nginx上建议采用LVS的DR模式来做负载均衡&#xff0c;这样最大长连接数目就只和websocket服…

人工智能的历史

AI(Artificial Intelligence)即人工智能&#xff0c;最初是在1956 年被提出&#xff0c;人工智能研究如何用计算机去模拟、延伸和扩展人的智能&#xff1b;如何把计算机用得更聪明&#xff1b;如何设计和建造具有高智能水平的计算机应用系统&#xff1b;如何设计和制造更聪明的…

nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问

访问vue页面时&#xff0c;/# 使url看着不美观&#xff0c;使用 H5 history模式可以完美解决这个问题&#xff0c;但需要后端nginx帮助。接下来我们自己配置一下。 使用前端路由&#xff0c;但切换新路由时&#xff0c;想要滚动到页面顶部&#xff0c;或者保持原先的滚动位置&a…

算法导论2nd 10.1-7

为什么80%的码农都做不了架构师&#xff1f;>>> 思路&#xff1a;两个队列q1和q2&#xff0c;两个队列指针pusher和poper分别指向q1和q2&#xff0c;push时调用pusher->enqueue&#xff0c;然后将poper里的元素全部dequeue并enqueue到pusher&#xff0c;最后交换…

阿里云Windows2012 R2服务器IPV6配置记录

要上苹果APP&#xff0c;则必须要支持IPV6和HTTPS&#xff0c;阿里云本身没有开放IPV6地址。因此需要进行IPV6的相关配置。查了很多IPV6的配置资料&#xff0c;最终选择用HE进行IPV6设置。在这过程中遇到一些问题&#xff0c;以记录下来以备注。 1、IPV6 Tunnel Broker设置 在H…

mycat 1.6.5 for mysql 8分表攻略

2019独角兽企业重金招聘Python工程师标准>>> 简述 mycat 对于 mysql 的支持有版本要求&#xff0c;目前 1.6.5 不支持 mysql 8.0 版本。因为mysql 8.0 的加密方式发生了变化。 mycat 1.6.5 连接 mysql 8.0 的两个方式 mysql 8.0 采用兼容方式&#xff0c;&#xff0…

Funcode-贪吃蛇

自己编写的一个小游戏&#xff0c;本来打算做贪吃蛇&#xff0c;结果不会使蛇的身子随蛇头方向改变而改变就换了种想法&#xff0c;最后变成了这样一个另类的小游戏&#xff0c;“笑哭“&#xff0c;下面是程序的主要代码&#xff0c;如果有兴趣也可以下载完整程序代码资源&…

mac 使用远程连接

https://www.jianshu.com/p/9cc90361f37a转载于:https://www.cnblogs.com/xiangsj/p/10876400.html

systemtap执行过程中报probe timer.profile registration error

probe timer.profile registration error 今天在执行火焰图的过程中&#xff0c;代码报错&#xff0c;probe timer.profile registration error 经过查询、分析可能是在该平台该函数是不安全、不共享的。 将 probe timer.profile { 用该代码替换即可 probe perf.sw.cpu_clock !…