产品体验中心 下载与支持 产品社区 合作代理 |  咨询电话:400-035-7887/021-6072 5088
当前位置:泽众软件测试网- 技术文章 -正文

前端性能分析的方法有哪些?可以使用哪些工具进行前端性能分析?

发布时间:2020-07-29

前端性能分析简单点的说的话,就是对前端的性能进行一个分析,前端性能分析的方法是有不少的,比如说代码覆盖率 Coverage、CPU和内存 Performance monitor、页面性能 Performance以及lighthouse工具分析。既然我们前面已经提到了工具分析,那么比较常用的前端性能分析工具有哪些?下面我们就来了解一下前端性能分析的方法和一些工具。

PerformanceRunner(性能测试工具)

前端性能分析方法有什么?

1. 代码覆盖率 Coverage

打开chrome DevTools,ctrl + shift + p,输入coverage命令,回车,调出coverage面板

进行录制,即可分析,加载或执行期间的,js被执行到情况,未被执行的js,就是可以优化的点,可以移除死代码,或懒加载非必要代码

2. CPU和内存 Performance monitor

同样命令调出Performance monitor面板,实时的查看,当前页面的CUP,js内存,DOM nodes数量等指标

3. 页面性能 Performance

使用Performance面板,直接录制执行性能,分析相关数据

4. lighthouse工具分析

lighthouse会将基于performance的分析,整合出一个报告,以具体的性能指标给出,提升性能的建议。

什么工具可以进行前端性能分析?

1.Timeline概览

timeline是google的chrome浏览器中的一个开发者工具,它有助于前端开发者来分析页面的解析、脚本运行以及渲染、布局的情况,从而帮助开发者去优化页面的性能。

timeline有三个主要的模块:顶部的概况视图部分,记录视图部分和工具栏。除了这些外有三个模式的录制:Event模式通过事件分类展现所有录制的事件;Frames模式展现页面渲染的性能;Memory模式展现页面内存使用情况

2、LightHouse

LightHouse:是谷歌浏览器自带性能分析工具,最强大。维度全,自定义网速而且性能指标兼容最新H5API有更为详细的优化说明。

3、PerformanceRunner

PerformanceRunner通过模拟海量用户并发测试整个系统的承受能力,PR支持自动生成性能分析报告,报告以图表和表格数据两种形式提供,图表包括了性能曲线、柱状图等,清晰直观,帮助快速了解测试结果,查找性能问题。

通过以上的文章,大家对于前端性能应该有了一定的了解。在工作中,我们比较重视的测试分析是后端性能,其实前端的的性能分析也是很重要的,是不可忽略的。如果大家想要更多的了解这方面的知识的话,就可以跟着小编一起来了解一下。

推荐阅读:

什么是负载压力测试?负载压力测试的类型有哪些?

要怎么选择性能测试工具?常用的工具有什么?

web性能测试用例设计策略及方法

Web性能测试中,B/S与C/S架构的性能指标一般需要哪些内容?

进行web负载测试的几个主要步骤

高并发系统性能测试之性能调优和优化策略

带您理解解负载测试怎么做及负载测试工具

本文内容不用于商业目的,如涉及知识产权问题,请权利人联系SPASVO小编(021-60725088-8054),我们将立即处理,马上删除。
沪ICP备07036474号 2003-2024 版权所有 上海泽众软件科技有限公司 Shanghai ZeZhong Software Co.,Ltd.
微信
咨询

添加客服微信 欢迎咨询测试工具和测试服务

微信客服
问题
反馈
产品
画册

扫描二维码下载泽众软件企业宣传册

产品画册
返回
顶部

方案咨询

×
提交信息

电话咨询,400-035-7887,安排专业技术售前给您解答(产品试用、技术交流、服务咨询和商务报价)。

您的信息已成功提交!

我们的客服人员稍后会与您联系