一般说到性能测试,我们首先想到的是接口(服务端压测),但是如果服务端接口性能ok,但是当你的页面在浏览器/app native运行时,性能仍然不太理想。这时候就需要对前端进行性能测试。由于H5可跨平台,开发成本低,可随时上线,且试错成本低,可轻量的触达用户提供便捷的服务等优点,越来越受到追捧。但它也有缺点那就是无法将数据存储在本地,性能相对较差(例如3D效果,频繁的输入输出等等)所以做H5性能测试尤为重要。若H5是嵌入在navtive App中,则需要先在移动设备端进行专项测试(内存占用测试、弱网测试、流量测试、CPU测试、电量测试、帧率测试等)若发现CPU测试和帧率测试等等不达标时,也可借助chrom DevTools Performance来分析瓶颈,这里主要是讲述chrom Devtools Performance性能测试。
HTML5可以使用chrom Devtools Performance来分析运行时的性能表现。
1. 启动chrom浏览器-->打开新的无痕浏览窗口(在无痕浏览窗口浏览的页面数据,历史url,搜索信息,cookie信息不会被保存。需要把不用的扩展程序禁用,以防这些扩展程序影响测试结果).如图所示:
3. 按F12/Command+Option+I(mac)/Control+shift+I(windows,Linux)来打开devtools-->选择“Performance”Tab
4. 模拟移动设环境(CPU和Network)。移动端设备CPU一般比台式机和笔记本弱很多,且网速也可能比PC端有线网速慢。可以用CPU控制器(CPU Throttling)来模拟移动端设备CPU;用Network来模拟移动端设备的网络。
操作步骤:
a. 在DevTools中-->点击performancer tab。
b. 选上Screenshots checkbox(默认是已被选上的)。这个是用来测试有动画效果时进行截图
c.点击Capture Settings--> 设置CPU,选择4*slowdown,这是指模拟PC端1/4的低速CPU(即移动 设备的CPU只有PC端的1/4)。
d. 点击Capture Settings--> 设置Network
5.设置demo
为了使得这个demo有相对统一的运行表现(不同的机器性能有差异)。这个demo提供了自定义功能,用来确保这个demo的统一表现。
操作步骤如下:
a. 点击demo上的【Add 10】这个按钮直到你能很明显的看到小方块移动变慢,在性能比较好的机 器上可能要多点击几次这个按钮。
b. 点击【Optimeze】按钮,会发现小方块会变的更快而且动画变得平滑。
c. 点击【un-optimeze】按钮,小方块又会变的更慢。
6. 记录运行时性能表现
在之前的 DEMO中,当运行优化模式的时候,小方块移动地非常快。为什么呢?明明2个模式都是移动了同样数量的小方块而且移动的时间也一样。那么现在我们在Performance界面下录制所发生的一切,并且分析下这个记录,从而找到非优化模式下的性能瓶颈。
操作步骤如下:
(1) 在DevToolsk ,点击 "Record"小图标,这时候DevTools就开始录制各种性能指标。录制时等待几分钟。
(2)点击录制窗口中的【stop】,DevTools停止录制,并开始处理数据,完全处理数据后会显示性能报告。
7. 通过各项指标分析报告
一旦得到了页面的性能表现报告,那么就可以用它来分析页面的性能,从而找到性能瓶颈。
(1) FPS(frame per second)是用来分析动画的一个主要性能指标。能确保在60fps的话,那么用户体验是不错的。如下图所示,观察FPS图表,如果发现一个红色的长条,那么说明这些帧存在严重问题,有可能导致非常差的用户体验。一般来说,绿色的长条越宽(越高),说明FPS越高,用户体验越好。
(2)就在FPS图表下方,看到的就是CPU图标,如下图所示。在CPU图表的各种颜色与Summary面板中的颜色相互对应的, Summary面板就在Performance面板的下方。CPU图表中的各种颜色代表着在这个时间段内,CPU在各种处理上所花费的时间。如果你看到了某个(除Idle)占用了大量的时间,那么这可能就是一个可以找到性能瓶颈的线索。
(3)把鼠标移动到 FPS,CPU或者NET图表之上,DevTools就会显示这个时间点界面的截图。左右移动鼠标,可以重发当时的屏幕录像。这个叫scrubbing,他可以用来分析动画的各个细节。
(4) 在Frams图表中,把鼠标移动到绿色条状图上,DevTools 会展示这个帧的FPS。每个帧可能都在60以下,都没达到60的标准。如图所示:
PS:chrom可以打开实时的FPS面板。操作步骤如下:
a. 按下Command+Shift+p(Mac)/Control+Shift+p(windows,linux)打开命令菜单
b. 输入Rendering,选择 show frames per second(FPS) meter,FPS实时面板就出现在页面的右上方。
8. 定位瓶颈
现在已经确定到这个的动画性能表现不太好,下一步就需要找到为什么。
(1) 注意Summary面板,可以看到CPU花费了大量的时间在rendering上。那么可以可能减少rendering时间来提高性能。如下图所示:
(2) 展开main图表,DevTools展示了主线程运行状况,X轴代表着时间。每个长条代表着一个event,长条越长就代表着这个event花费的时间越长。Y轴代表了调用栈。在栈里,上面的event调用了下面的event。
PS:
a. 若在事件的长条右上角出现红色小三角,说明这个事件是存在问题的,需要特别注意。如下图所示,若双击reveal这个链接,它会高亮触发这个事件的event。如果点击了app.js:94这个链接,就会跳转到对应的代码处。
b. 在app.update这个事件的长条下方,有很多被触发的紫色长条。如果放大这些事件长条,可以看到每个长条都带有红色小三角。点击其中一个紫色事件长条,Devtools会在Summary面板里显示了更多关于这个事件的信息。在Summary面板中点击app.js:70链接,DevTools会跳转到需要优化的代码处。如下图所示:
- 大小: 26.2 KB
- 大小: 144.7 KB
- 大小: 112.9 KB
- 大小: 99.4 KB
- 大小: 216 KB
- 大小: 153.2 KB
- 大小: 229.6 KB
- 大小: 207 KB
- 大小: 167.1 KB
- 大小: 161.2 KB
- 大小: 189.8 KB
- 大小: 140.8 KB
- 大小: 204 KB
- 大小: 145.5 KB
分享到:
相关推荐
一、开篇:H5 页面加载过程浅析如下图所示,是精选平台打开 H5 页面的几个过程截图 二、实例分析:白屏问题前面我们已经了解了 H5 页面加载过程,接下来如果遇
H5测试包括功能测试,前端性能测试,浏览器兼容性测试,以及服务器段性能测试。 app和PC端针对产品测试有什么相同与不同
全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...
让Android和iOS原生预定义一些统一的接口,h5直接调用使用,从而免去了复杂的兼容性判断,大大地减少前端工作,也使得性能更好。同时这里也可以看出接口测试最重要的一方面测试——兼容性测试,测试必要尽可能大地...
java版商城源码下载 ...前端界面风格采用了结构简单、性能优良、页面美观大气的Twitter Bootstrap页面展示框架。 采用分层设计、双重验证、提交数据安全编码、密码加密、访问验证、数据权限验证。 使
移动无线端测试工程师技能图谱 运维工程师必备技能图谱 软件工程 DevOps 前端开发 后端开发 软件发布流程 DBA 技能图谱 H5开发技能图谱 移动性能优化技能图谱 前端工程师技能图谱 Kubernetes技能图谱 Java工程师技能...
项目规划与设计: 确定系统需求和功能。 设计数据库模型,包括商品、订单、用户等表的结构。 确定系统的架构和模块划分。 环境搭建: 配置Java开发环境(JDK、IDE等)。...初始化一个Spring Boot...进行性能优化,提升系
在实现过程中,我们采用了现代的前端框架和后端技术,并充分考虑了网站的性能和可扩展性。通过测试和用户反馈,我们验证了网站的有效性和可靠性。最后,本文总结了研究成果,并探讨了未来的研究方向。 本项目的开发...
H5技能图谱1.0.png Hadoop技能图谱.jpg iOS技能图谱.jpg OpenResty技能图谱.jpg 云计算技能图谱.jpg 前端技能图谱.jpg 大数据技能图谱.jpg 安全秘籍.jpg 容器技能图谱.jpg 嵌入式开发技能图谱.jpg 开发语言宝典.jpg ...
第六章 认我测在线检测服务系统实现与测试 33 6.1认我测在线检测服务框架设计 33 6.2 系统运行环境搭建及配置 34 6.2.1 AndroidManifest.xml主程序环境配置 34 6.2.2 移动端工程资源布局 35 6.3 认我测在线认证检测...
HTML5 Boilerplate是一个专业的前端模板,用于构建快速,健壮和适应性强的Web应用程序或网站。 该项目是多年迭代开发和综合社区知识的产物。 它没有强加特定的开发哲学或框架,因此您可以按照自己的方式自由地构建...
HTML5 Boilerplate是一个专业的前端模板,用于构建快速,健壮和适应性强的Web应用程序或网站。 该项目是多年迭代开发和综合社区知识的产物。 它没有强加特定的开发哲学或框架,因此您可以自由地按自己的方式来构建...
模型的架构图图形用户界面运行代码开放式终端和步骤1:python3 PRED_API.py 步骤2:CD前端步骤3:npm i 第4步:启动npm,这将启动基于React的前端保存的权重存储在best-model.h5中Model.ipynb具有模型
yarn test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且...
该系统的源码采用了前后端分离的设计模式,前端使用uni-app框架开发,后端使用了Node.js和MongoDB数据库。其中,uni-app框架是一种跨平台的开发框架,可以在iOS、Android、H5等平台上运行,大大降低了开发成本和时间...
HTML5 Boilerplate 是一个专业的前端模板,用于构建快速、强大且适应性强的 Web 应用程序或站点。 这个项目是多年迭代开发和结合社区知识的产物。...Apache Server Configs ,其中包括提高网站的性能和
HTML5 Boilerplate 是一个专业的前端模板,用于构建快速、强大... 包括: 用于 CSS 规范化和常见错误修复通过 CDN,具有本地后备用于特征检测的Modernizr的自定义构建Apache Server Configs ,其中包括提高网站的性能和
HTML5 Boilerplate是一个专业的前端模板,用于构建快速,健壮和适应性强的Web应用程序或网站。 该项目是多年迭代开发和综合社区知识的产物。 它没有强加特定的开发哲学或框架,因此您可以按照自己的方式自由地构建...
HTML5 Boilerplate是一个专业的前端模板,用于构建快速,健壮和适应性强的Web应用程序或网站。 该项目是多年迭代开发和综合社区知识的产物。 它没有强加特定的开发哲学或框架,因此您可以按照自己的方式自由地构建...
HTML5 Boilerplate是一个专业的前端模板,用于构建快速,健壮和适应性强的Web应用程序或网站。 该项目是多年迭代开发和综合社区知识的产物。 它没有强加特定的开发哲学或框架,因此您可以按照自己的方式自由地构建...