客户端性能测试变得非常重要。它通过先进的前端技术和动态web内容确保你的应用程序运行良好,并提供重要的用户体验。在开发的早期阶段对前端性能进行评估,可以让您识别潜在的瓶颈,并进行优化,以提供最佳性能。
客户端性能测试的需求
技术在不断发展,我们的目标都是更好的用户体验。产品公司利用React和AngularJS等技术来增强应用程序的前端,使其更具交互性和直观。
应用程序的前端在决定应用程序的整体性能方面起着重要的作用。以下是你的关键步骤应该考虑:
- 验证资源如何呈现在页面上
- 识别客户端的瓶颈,即使是重大的服务器端性能
- 用以下方法度量应用程序性能不同的客户端
性能测试:客户端vs服务器端
关键因素 | 客户端 | 服务器端 |
---|---|---|
范围 |
评估的端到端场景 |
评估逻辑场景 |
关注领域 |
前端元素的渲染,如CSS和JavaScript文件
|
下的服务器响应时间和应用程序行为用户负载
|
工作负载建模 |
单用户的角度 |
一个或多个用户加载 |
测试基础设施 |
需要不同的客户端(桌面和移动浏览器)和服务器
|
只需要专门的服务器来运行测试,并没有重大依赖web浏览器
|
重要的指标
- TTFB(时间到第一个字节):从服务器获取第一个字节所花费的时间
- 有效载荷:网页内容大小
- 速度指数:网页上显示内容的平均时间
- 加载时间:时间完全加载网页内容
- 时间呈现:时间来处理和显示网页元素给用户
- 时间进行交互:是时候与第一个web元素进行交互了
- CPU空闲时间:CPU主线程保持空闲并等待第三个线程响应的时间一方请求
左移位性能测试
使用左移测试方法,您可以将性能测试与任何类似于单元和功能测试的持续集成(CI)工具集成。您可以在开发的早期阶段评估应用程序的性能。通过CI和监控工具,可以评估每个提交的客户端性能前端开发人员。
此外,您还可以开发一个框架来集成性能测试和UI自动化测试,并并行运行这两个测试。这是QA普遍采用的方法现在的公司。
最佳实践
- 使用图像和JS代码压缩的形式
- 利用CDN架构,减少接收时间初始载荷
- 启用更好的缓存技术以提供更快的响应时间给用户
- 使用缩小工具缩小CSS, JavaScript,和HTML内容
- 删除不必要的静态页面资源(CSS和JS)来减少呈现时间
- 在继续之前优化服务器端性能客户端测试
有建议吗?
我们很乐意听取您的反馈、问题、意见和建议。这将帮助我们使我们更好,更有用的下一次。
分享你的想法和想法knowledgecenter@qasource.com