从0到1搞定前端性能测试（非常详细）

提到性能测试大家往往会想到多用户使用系统时对服务器后端的性能测试，前端页面的性能往往容易被忽视，但是如果存在性能问题，就算后端服务器性能再好，用户的体验也是极差的。并且随着现在富前端和大前端的流行，前端系统越来越复杂，性能问题也越来越多，所以及时发现并修复性能问题是非常重要的。本文介绍了应用前端的性能指标、测试前端性能的方法以及常见前端问题的具体修复方案，希望通过本文能够帮助前端研发人员和测试人员了解前端性能优化的过程和具体方法

前端性能测试关注什么

简单的说，前端性能测试主要关注页面的加载性能，包括页面的资源（如图片、脚本、样式表等）的加载、页面请求的响应时间等；另外还需要关注：

页面的渲染性能，包括：测试页面的渲染时间，包括DOM树的构建、CSS样式计算、布局和绘制等；如果更深入一些可以关注 网络连接情况，包括：DNS时间，连接时间和等待时间等。

Web指标

相信大家对后端性能测试的指标比较熟悉，例如并发数，响应时间和系统的处理能力，通过这些指标我们就可以判断出并发使用系统的性能优劣，同样前端性能测试也有类似的web指标。google提出的三个核心Web 指标是LCP、FID、 CLS，通过这三个指标我们也可以判定出应用前端性能的优劣，更多前端详细性能指请标参考文章：

一文带大家了解前端性能测试所涉及的核心性能指标：LCP、FID、CLS、TBT、TTI、FCP、TTFB

前端性能测试利器Lighthouse

做并发性能测试时，我们使用工具jmeter 、loadrunner；而做前端性能测试时，我们使用Lighthouse即可，他是google的开源自动化工具，从Chrome浏览器的 DevTools 就可以启动 Lighthouse,使用Lighthouse会生成页面的性能测试报告并提供详细的修复方案。Lighthouse测试依据是前面介绍的三个核心Web指标：LCP、FID、CLS。关于Lighthouse的详细使用可以参考文章：

详解前端页面性能测试方案——开源工具Lighthouse

前端性能问题优化方案

前面讲解了什么是前端性能测试，前端性能测试的核心指标以及前端性能测试工具，接下来我们看看如何对前端性能问题进行优化：

前端优化主要包括：

减少 HTTP 请求、压缩文件大小、使用浏览器缓存、优化图片、JavaScript和CSS、延迟加载、优化字体等等。

整体原则：把长任务（超过50ms）拆分成小任务、优化JavaScript、 优化CSS以及资源加载速度进而提升FCP、LCP、FID和CLS等核心参数。更多内容可以参考文章：

JS 和CSS 代码利用率统计与优化

详解JS 和CSS 代码利用率统计利器Coverage以及高版本chrome中coverage的一个致命问题

优化过程中，使用defer和async进行延迟加载

两张图搞定前端面试特别常重要的知识点：defer和async的区别
 

关于前端性能问题的优化策略可以参考文章：

前端同学福利！详解lighthouse发现性能问题的修复方案！

前端性能优化调试工具推荐

各个浏览器的开发者工具(推荐chrome 的开发者工具)，关于chrome的开发者工具使用就不多说了，相信能够阅读这篇文章的同学都会使用。推荐打击使用Chrome Performance insight，详情参考文章：

献给前端研发同学的福利！性能诊断神器——Chrome Performance insight！

通过RUM对生产环境前端进行监控

最后讲解一下大厂对前端问题的监控方案—RUM。RUM的英文全称是 Real User Monitoring， RUM的作用就是捕获和分析用户与前端（包括网站，苹果应用，安卓应用，微信小程序）的所有交互细节，旨在提高前端产品的可用性、提升用户体验。提升前端体验的方式非常多，可以优化数据库、优化接口调用，那为什么要 RUM 呢？其实主要还是 RUM 更直接，更直接的反应了用户是如何和我们的前端交互的，更能反应用户和前端的交互细节，为提升用户的满意度提供更多真实的用户行为数据。详情请参考

一文读懂RUM和APM的区别并告诉您RUM厂商该怎么选！

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题！如果文章帮到了您，劳烦点赞、收藏、转发！您的鼓励是我不断更新文章最大的动力！