前端性能测试

最新推荐文章于 2024-03-21 12:08:16 发布
最新推荐文章于 2024-03-21 12:08:16 发布
阅读量299 收藏
点赞数 1
分类专栏： 性能测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37636884/article/details/97932587
版权

测试方法：

使用chrome性能分析工具

数据采集三次取平均值

强制清除缓存

 

测试范围

首页WEB/H5，及其他页面

 

性能指标参考

首屏时间-1秒以内

总时间-1.5秒以内

总大小-1.5MB以内

单个图片大小200KB以内，尺寸适当

单个js、css文件大小200KB以内

 

优化建议

首屏时间：优化首屏加载元素，首屏以外资源异步加载；

总时间：优化加载顺序；

总大小：

图片压缩：1.限制图片上传大小； 2.上传过程自动压缩图片

js\css压缩：升级、压缩、拆分等

一只舰
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端性能测试
03-01
web前端性能测试
网站前端性能测试报告
weixin_33928467的博客
06-09 1098
内下内容选自《小强软件测试疯狂讲义》一书1. 测试目的通过主要功能页面的前端性能测试，从前端分析引起页面响应缓慢的原因，并根据优化建议对其进行优化，提升前端性能，从而达到提升系统整体性能的目的。2. 测试范围主要对用户常用的页面进行测试，至少包括：首页、各分类页、搜索结果页等，此处我们只以首页为例进行测试和分析。3. 测试方法利用YSlow、PageSpeed等工具进行测试，因该网站是第三方的并不...
【前端性能】前端性能指标和测量方法总结
最新发布
cherry__yu的博客
03-21 1182
FP: First Paint 首次绘制，指浏览器从开始请求网站内容到绘制第一个像素点的时间，也可以理解为白屏时间。FCP: First Contentful Paint 首次内容绘制，从开始加载到绘制出第一个内容的时间，内容为文本、图片或 SVG CANVAS 元素。
WEB前端性能分析--工具篇
热门推荐
上帝De助手
06-23 3万+
在线网站类： WebPageTest 说明： 在线的站点性能评测网站，地址http://www.webpagetest.org/ 补充： 其实这网站也是个开源项目，所以支持自己搭建一个内部的测试站点 ShowSlow 说明： showslow是yslow的数据收集与展示平台http://www.showslow.com/，它是一个开源的php项目，可以用来与firefo
web前端性能意义、关注重点、测试方案、优化技巧
微信号codek2 专注于 Android 开源项目源码解析 开源项目分享
10-28 489
相对成熟的后端性能测试工具LoadRunner和开源的jmeter。前端性能一直缺乏更多的重视以及测试、优化的文档支持。这里简单介绍下前端性能的意义、关注重点、测试方案和优化技巧   1、前段性能的意义 对于访问一个网站，最花费时间的并不是后端应用程序处理以及数据库等消耗的时间，而是前端花费的时间（包括请求、网络传输、页面加载、渲染等）。根据web优化的黄金法则： 80%的最终用户响应...
web前端性能测试（《软件性能测试过程详解与安全剖析》）
weixin_33860737的博客
05-10 91
一、性能测试的背景知识 对web应用前端性能的研究并不为了准确地得到一个 响应时间数据，实际上，web性能一部分取决于web服务器和应用服务器（建立连接、下载资源文件），另一部分取决于浏览器的实现机制、web页面上的JS文件的执行等。取决于web服务器和应用服务器的响应时间而与服务器的负载、压力等相关；而取决于浏览器实现机制与JS文件执行所需要的时间则几乎与服务端的负载和压力无关。后者是web前...
前端性能测试入门
03-23
性能测试一直是Web应用中非常受关注的部分。目前大多数人对性能的关注还主要...但实际上，对于web应用来说，除了考虑服务端在足够短的时间内返回页面数据之外，还可以从页面前端的角度来考虑性能测试和性能调优。 　目
浅谈H5前端性能测试实践1
08-08
一、开篇：H5 页面加载过程浅析如下图所示，是精选平台打开 H5 页面的几个过程截图 二、实例分析：白屏问题前面我们已经了解了 H5 页面加载过程，接下来如果遇
前端性能测试视频教程
11-16
课时3：3s-前端性能测试项目实战-1 课时4：4s-前端性能测试项目实战-2 课时5：课程介绍 课时6：前端性能概述 课时7：常用工具介绍 课时8：前端性能分析点1 课时9：前端性能分析点2 课时10：前端性能分析点3 ...
10年测试工程师 —— 手把手教会你做前端性能测试（超详细）
m0_58026506的博客
09-08 7570
普通用户如何评价一个网站的体验好不好呢？ 除了满足他的功能需求以外，用得爽不爽可能是最大的评估因素。这个爽不爽可以简单理解为快不快，好不好看，是不是符合他的操作习惯等等。而这里的快不快就是我们说的性能。 有数据表明，性能在一定程度上跟公司的收益直接相关。
Web测试方法
OscarXie的专栏
08-05 1781
测试中心  刘艳会 在Web工程过程中，基于Web系统的测试、确认和验收是一项重要而富有挑战性的工作。基于Web的系统测试与传统的软件测试不同，它不但需要检查和验证是否按照设计的要求运行，而且还要测试系统在不同用户的浏览器端的显示是否合适。重要的是，还要从最终用户的角度进行安全性和可用性测试。然而，Internet和Web媒体的不可预见性使测试基于Web的系统变得困难。因此，我们必须为测试和评估复
WEB前端性能优化测试
06-28
本文档较全面，包括 前端性能优化的规则、工具使用介绍等演讲稿和资料。包括YSLOW工具介绍。 帮助你进行前端性能测试
关于前端页面的一些性能测试总结
02-23
Head遵循的原则： 必须等head样式加载完后才开始进行页面css等的渲染（如加载完了外联链接以及图片等后，页面再进行渲染） head节点下不可有src属性等，也不可有外联请求链接 scripts必须在link前，不可在link后 尽量做到head下的请求数量少且大小小，一般情况下 利用缓存，使用公用样式库进行加载 一个页面一般50k大小且加载速度大致在0.2s 注意白屏或者IE6闪屏情况
web前端性能分析工具
01-31
web前端性能分析工具工具引导：以供测试工程师参考阅读
性能测试 | Web端性能测试
weixin_30480583的博客
09-04 714
这篇文章想跟大家分享关于Web性能测试的一些知识点。在分享之前，我想先跟大家分享一组数据，关于为什么要做性能测试？具体如下： 71%用户希望在手机上打开网页能跟电脑一样快； 5秒钟被认为是用户能忍受的最长响应时间，如果响应时间超过5秒，50%的移动用户会放弃； 33%失望的...
某网站前端页面性能测试
weixin_34238642的博客
04-08 2814
1页面性能测试概述页面性能测试则是针对于页面性能优化而开展的一种性能测试，目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议，最终提升系统的整体性能表现，提高用户体验满意度。他的关注点是在与页面，不在于后端。有别于我们通常说的性能测试。相对于C/S架构的应用系统，Web应用系统所有数据都需要从服务器端下载，虽然浏览器有缓存机制，但客户每次访问仍然需要下载...
[原创]网站前端页面级性能测试方法
weixin_34242819的博客
02-06 118
[原创]网站前端页面级性能测试方法一 网站前端页面级性能测试方法简介  平时大家提及测试性能测试范畴中，都会想到采用高的并发量去访问某个网站，来检查系统在某段时间运行的情况，今天我们要提及的是另一种性能测试情况“网站前端页面级性能测试”，简言之，就是检查所访问的网站单个页面各信息元素，评判其各元素的大小，系统加载响应时间等。二 网站前端页面级性能测试方法开源测试工具：Yslow PageSpe...
基于3D几何图形操作的前端性能测试
测试帮日记
06-20 376
前端性能测试 影响前端性能的因素 测试场景设计 手工方式执行及监控前端性能 可编程方式执行及监控前端性能 W3C性能API 前端埋点+UI自动化 前端性能优化改进 前端性能持续集成 ...
web前端添加图片大小合适代码
06-09
在Web前端添加图片时，可以通过以下代码实现对图片大小的控制： ```html <!-- 限制图片大小为100KB以内 --> <input type="file" name="image" accept="image/*" onchange="checkImageSize(this, 100)"> <script> function checkImageSize(input, maxSize) { if (input.files && input.files[0]) { var fileSize = input.files[0].size / 1024; // 将文件大小转换为KB if (fileSize > maxSize) { alert("上传的图片大小不能超过" + maxSize + "KB！"); input.value = ""; // 清空文件上传框 } } } </script> ``` 上述代码是通过JavaScript实现的，通过给文件上传框添加onchange事件，当用户选择图片后，会调用checkImageSize函数来检查图片大小是否符合要求。如果图片大小超过了maxSize（这里设置为100KB），就会弹出提示信息，并清空文件上传框，让用户重新选择图片。 需要注意的是，这只是一个简单的示例代码，实际项目中还需要根据具体需求进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值