Performance使用教程:分析运行时性能
Get started
在本教程中,你在一个在线的页面打开DevTools
,使用Performance
面板在页面上查找性能瓶颈。
1.打开隐身模式下的chrome浏览器,确保chrome运行在一个干净的状态下。如果你安装了许多的拓展插件,这些拓展可能会影响性能评估。
2.在隐身模式窗口加载下面的页面。这是你要使用的demo,页面上展示了一堆上下移动的蓝色小方块。
https://googlechrome.github.io/devtools-samples/jank/
3.打开DevTools:Command+Option+I (Mac)
或者 Control+Shift+I (Windows, Linux)
图1.左侧是demo,右侧是Devtools
其他截图中,Devtools放置在单独的窗口中,方便查看
模拟移动设备的CPU
移动设备相对于桌面和平板拥有较差的CPU性能。当你分析页面时,可以使用CPU限制来模拟页面在移动设备上的表现。
3.点击Capture Settings
,devtools提供了一些和捕捉性能指标相关的设置
4.CPU
选中2x slowdown
,Devtools会限制你的CPU比平时慢两倍
图2.CPU限制
当测试其他页面时,如果要确保它们在低端设备上正常运行,请将CPU限制设置为20倍慢速。这个demo不能在20倍慢速下很好运行,因此设置为2倍慢速方便演示。
设置demo
很难创建一个在所有读者设备上拥有一致运行时性能的网站。这个章节你可以自定义demo,确保你的体验和看到的截图、说明相对一致,而无论你使用何种特定设置。
1.持续点击Add 10
,直到蓝色小方块移动速度明显慢于之前。在高端计算机上,可能需要点击20次左右
如果你没有明显感觉到优化和未优化版本的区别,尝试点击几次
Subtract 10
,然后重试。如果你添加了太多的蓝色方块,会使CPU达到最大值,则看不到两个版本的结果有较大的差异
3.点击Un-Optimize
,蓝色方块会移动的更慢,卡顿更多
记录运行时性能
当你运行页面的优化版本时,蓝色方块移动的更快。为什么呢?两个版本都应在相同时间内将每个方块移动相同的空间。在Performance
面板上进行录制,了解如何检测未优化版本的性能瓶颈。
1.点击Record
,DevTools会在页面运行时捕获性能指标
图3.分析页面
3.点击Stop
,DevTools停止录制,处理数据,在Performance
面板展示结果
图4.分析结果
分析结果
录制了页面的性能后,就可以衡量页面的性能有多差,并找到原因。
分析每秒帧数
衡量任何动画性能的主要指标都是每秒帧数(FPS)。当动画以60FPS运行时,用户会感觉很流畅。
1.查看FPS
图表,只要你在FPS上方看到了红色条,就表示帧率下降的很低,可能会影响用户体验。通常,绿色条越高,FPS越高
4.在Frames
选项,悬浮鼠标在绿色方块上,DevTools展示特定时间的FPS。可能都低于60FPS的目标值。
当然,查看此demo,很明显页面效果不佳。但是在实际场景中,可能还不是很清楚,因此拥有这些工具进行测量非常方便。
打开FPS仪表盘
另一个方便的工具是FPS仪表盘,可以在页面运行时提供FPS的实时估算。
1.打开命令菜单:Command+Shift+P (Mac)
或 Control+Shift+P (Windows, Linux)
2.输入Rendering
,选中Show Rendering
3.在Rendering
选项,开启FPS Meter
。新的叠加层会展示在视口的右上角
图9.FPS仪表盘
查找性能瓶颈
现在,你已经测量并验证了动画效果不佳,接下来的问题是:为什么?
1.关注Summary
选项卡。当未选中任何事件,选项卡展示了录制活动的细节。页面花费了大量时间进行rendering
,由于性能是减少工作量的艺术,因此你的目标是减少花费在rendering
工作上的时间
缩放的另一种方法是通过单击
Main
部分的背景或选择一个事件来聚焦,然后按W,A,S,D
键
4.注意Animation Frame Fired
事件右上角的红色三角形。当你看到红色三角形,就是警告你这个事件可能存在问题。
每当执行requestAnimationFrame()回调,就会触发
Animation Frame Fired
事件
5.点击Animation Frame Fired
事件,Summary
会展示有关这个事件的信息。注意reveal
链接,单击将使DevTools高亮显示初始化Animation Frame Fired
事件的事件。还要注意app.js:94
链接,单击会跳转到相关的源代码。
图13.Animation Frame Fired事件的更多信息
选中事件后,可以使用方向键选中下一个事件
6.在app.update
事件下,有一堆紫色的事件。如果他们更宽,则看起来每个对象可能都有一个红色三角形,单击其中一个紫色的布局事件。DevTools会在Summary
选项提供更多的信息。的确,有关于强制回流的警告(换句话说就是布局)。
7.在Summary
选项卡,单击强制布局下的app.js:70
链接,DevTools会带你进入强制布局的代码行。
图14.导致强制布局的代码行
这段代码的问题是,每个动画帧中,它都会修改每个方块的样式,然后查询每个方块的位置。由于样式已修改,因此浏览器不知道每个方块的位置是否已更改,因此必须重新布局方块才能计算其位置。请参考Use transform and opacity changes for animations寻找更多的信息
总结
RAIL model是了解性能的基础。该模型教你对用户最重要的是性能指标。参考Measure Performance With The RAIL Model了解更多内容。
- Optimizing JS Execution
- Reduce The Scope And Complexity Of Style Calculations
- Avoid Large, Complex Layouts And Layout Thrashing
- Simplify Paint Complexity And Reduce Paint Areas
- Stick To Compositor-Only Properties And Manage Layer Count
- Debounce Your Input Handlers
Performance使用教程:分析运行时性能相关推荐
- 《响应式Web设计性能优化》一2.3 Web运行时性能
本节书摘来异步社区<响应式Web设计性能优化>一书中的第2章,第2.3节,作者: [美]Tom Barker 译者: 余绍亮 , 丁一 , 叶磊 责编: 赵轩,更多章节内容可以访问云栖社区 ...
- Go 1.12发布:改进了运行时性能以及模块支持
Go最新版本1.12于近日发布,该版本并没有改动语法规范,它主要对运行时性能.编译工具链以及模块系统等进行了优化.另外,它还为TLS 1.3提供了opt-in支持,同时改进了对MacOS和iOS等系统 ...
- Docker容器的运行时性能成本是多少?
本文翻译自:What is the runtime performance cost of a Docker container? I'd like to comprehensively unders ...
- SQL 运行时性能统计信息的获取
打个招呼,这一篇可能不适合 CRUD Boy/Girl. 纯做增删改查的 SQL 编码师可能会觉得偏难. 假设如下的存储过程,有两段 SQL 查询组成.执行时发现,响应很慢. 请问你该怎么办? 有同学 ...
- 编译原理教程_9 运行时存储组织
文章原稿 https://gitee.com/fakerlove/fundamentals-of-compiling 文章目录 9. 运行时存储组织 9.1 概述 9.2 静态存储分配 9.3 动态存 ...
- .net报表控件ActiveReports教程:运行时修改数据(附源码)
ActiveReports 是一款专注于 .NET 和 .NET Core 平台的报表控件.通过拖拽式报表设计器,可以快速地设计 Excel表格.Word文档.图表.数据过滤.数据钻取.精准套打等类型 ...
- 服务器未启动性能计数器,服务器和电脑无故间隔性自动重启或死机 处理 Performance 扩展计数器提供程序时,性能注册表值中的性能字符串被损坏...
解决方法是 1.在命令提示符下键入:lodctr /r,自动重建性能计数器字符串表 (*注意用管理员身份进dos) 性能计数器信息保存在以下位置: 2.注册表: HKEY_LOCAL_MACHINE\ ...
- 神经网络推理_分析神经网络推理性能的新工具
神经网络推理 Measuring the inference time of a trained deep neural model on different hardware devices is ...
- [翻译]Go与C#对比 第三篇:编译、运行时、类型系统、模块和其它的一切
Go vs C#, Part 3: Compiler, Runtime, Type System, Modules, and Everything Else | by Alex Yakunin | S ...
最新文章
- GreenDao 3.x 注解中ToOne和ToMany的个人理解
- php中的thumb函数,phpcms v9教程:thumb(缩略图) 函数说明
- 私有云的部署(1)_ISCSI 无盘引导的一些心得
- html线框聚焦效果,24种表单input输入框聚焦动画特效
- 字符串 CSV解析 表格 逗号分隔值 通讯录 电话簿 MD
- 实验室里人越来越少啊!
- java面向对象编程集合边框_JAVA 面向对象 集合框架
- 诗与远方:无题(八十二)- 遇到你真好
- PHP开源CRM客户管理系统源码介绍分享
- word公式常用字体
- 搭建外网能访问的web服务器
- 猫哥教你写爬虫 022--类与对象(下)
- log4j2 2.14.0之前的版本出现重大漏洞
- 一份游戏策划书的范例[转载]
- Gym - 102920 C - Dessert Café (思维)
- 用浏览器快速开启Docker的体验之旅
- SDNU 1102.小树林(水题)
- 什么叫做展望_展望未来的含义是什么?
- lucky-canvas(大转盘)使用文档
- 计算抽象:可计算理论、模型与计算机