提到性能测试大家往往会想到多用户使用系统时对服务器后端的性能测试，前端页面的性能往往容易被忽视，但是如果存在性能问题，就算后端服务器性能再好，用户的体验也是极差的。并且随着现在富前端和大前端的流行，前端系统越来越复杂，性能问题也越来越多，所以及时发现并修复性能问题是非常重要的。本文介绍了应用前端的性能指标、测试前端性能的方法以及常见前端问题的具体修复方案，希望通过本文能够帮助前端研发人员和测试人员了解前端性能优化的过程和具体方法
前端性能测试关注什么
简单的说，前端性能测试主要关注页面的加载性能，包括页面的资源（如图片、脚本、样式表等）的加载、页面请求的响应时间等；另外还需要关注：
页面的渲染性能，包括：测试页面的渲染时间，包括DOM树的构建、CSS样式计算、布局和绘制等；如果更深入一些可以关注 网络连接情况，包括：DNS时间，连接时间和等待时间等。
Web指标
相信大家对后端性能测试的指标比较熟悉，例如并发数，响应时间和系统的处理能力，通过这些指标我们就可以判断出并发使用系统的性能优劣，同样前端性能测试也有类似的web指标。google提出的三个核心Web 指标是LCP、FID、 CLS，通过这三个指标我们也可以判定出应用前端性能的优劣，更多前端详细性能指请标参考文章：
https://blog.csdn.net/liwenxiang629/article/details/132409660
前端性能测试利器Lighthouse
做并发性能测试时，我们使用工具jmeter 、loadrunner；而做前端性能测试时，我们使用Lighthouse即可，他是google的开源自动化工具，从Chrome浏览器的 DevTools 就可以启动 Lighthouse,使用Lighthouse会生成页面的性能测试报告并提供详细的修复方案。Lighthouse测试依据是前面介绍的三个核心Web指标：LCP、FID、CLS。关于Lighthouse的详细使用可以参考文章：
https://blog.csdn.net/liwenxiang629/article/details/128530099
前端性能问题优化方案
前面讲解了什么是前端性能测试，前端性能测试的核心指标以及前端性能测试工具，接下来我们看看如何对前端性能问题进行优化：
前端优化主要包括：
减少 HTTP 请求、压缩文件大小、使用浏览器缓存、优化图片、JavaScript和CSS、延迟加载、优化字体等等。
整体原则：把长任务（超过50ms）拆分成小任务、优化JavaScript、 优化CSS以及资源加载速度进而提升FCP、LCP、FID和CLS等核心参数。更多内容可以参考文章：
JS 和CSS 代码利用率统计与优化
https://blog.csdn.net/liwenxiang629/article/details/132556112
优化过程中，使用defer和async进行延迟加载
https://blog.csdn.net/liwenxiang629/article/details/132277871
关于前端性能问题的优化策略可以参考文章：
https://blog.csdn.net/liwenxiang629/article/details/133017215
前端性能优化调试工具推荐
各个浏览器的开发者工具(推荐chrome 的开发者工具)，关于chrome的开发者工具使用就不多说了，相信能够阅读这篇文章的同学都会使用。
推荐！Chrome Performance insight使用细节可以参考文章
https://blog.csdn.net/liwenxiang629/article/details/132663006
通过RUM对生产环境前端进行监控
最后讲解一下大厂对前端问题的监控方案—RUM。RUM的英文全称是 Real User Monitoring， RUM的作用就是捕获和分析用户与前端（包括网站，苹果应用，安卓应用，微信小程序）的所有交互细节，旨在提高前端产品的可用性、提升用户体验。提升前端体验的方式非常多，可以优化数据库、优化接口调用，那为什么要 RUM 呢？其实主要还是 RUM 更直接，更直接的反应了用户是如何和我们的前端交互的，更能反应用户和前端的交互细节，为提升用户的满意度提供更多真实的用户行为数据。详情请参考https://blog.csdn.net/liwenxiang629/article/details/131282062
我的每一篇文章都希望帮助读者解决实际工作中遇到的问题！如果文章帮到了您，劳烦点赞、收藏、转发！您的鼓励是我不断更新文章最大的动力！
网友评论