前言
当一个站点内容非常丰富，功能非常强大时，它所需要加载的文件会是非常庞大的，打开站点对网络的要求会很高，在弱网的情况下打开它会有更长时间的等待，对用户来说是非常不友好的，这时候需要对前端性能进行优化。
但是，该从哪里入手呢？
我们可以想象一下，通常一个前端页面主要是由 html、css、js、图片等资源构成。影响用户浏览体验的可能有服务端数据返回的时间、网络传输的时间和页面加载时间等因素。
现在知道了原因，可以想办法对这些因素进行前端性能的测试，并针对性能测试的结果进行优化。
该如何进行性能测试呢？其实有现成的工具可以供我们使用。
性能测试工具
现在有很多很好用的测试性能的工具，我们可以根据自己的需要选择适合自己的。
作用
测试工具可以计算出包括资源加载、页面渲染、网络传输以及服务器解析等综合因素在内的加载时间指标，并对页面性能进行评估分析，找出影响性能的主要因素和瓶颈，并给出一定的优化建议和解决方法，从而提升用户体验。
Lighthouse
作为一名使用谷歌开发的程序猿，使用 Lighthouse 再方便不过了。
Lighthouse 是谷歌开源的一款 Web 前端性能自动化测试工具，它主要用于帮助改进网络应用的质量，可以适用于网页和移动端。
Lighthouse 可以分析 web 应用程序和 web 页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提升用户体验。
Lighthouse 的测试项包括页面性能、可访问性、最佳实践、SEO 、PWA（Progressive Web apps，渐进式 Web 应用）。Lighthouse 会对各个测试项的结果打分，为你优化性能提供参考，来帮助你看看使用哪些措施改进你的应用。
可以使用以下命令全局安装到电脑上，或者 Chrome 拓展程序，也可以使用浏览器的 F12 功能，打开开发者工具。
npm install -g lighthouse
命令行和 Chrome 拓展程序，这篇文章暂时不讲，有兴趣的同学可自行百度，我们现在主要使用浏览器的 F12 功能来具体看一下：
点击 Generate report 就会开始分析打开的网站
分析结束后得出性能分析报告
以下是具体的指标，每个指标下面都有优化建议。
- 性能
- 可访问性
- 最佳实践
- SEO
Speedcurve
Speedcurve 可以帮助追踪自己的性能表现，以及竞争对手的性能表现。它可以用来查看某个因素在不同站点的速度表现，并且还提供了综合监控。综合监控是指在受控环境中模拟网站，在其中可以自定义选项，比如网络速度、设备、操作系统等等。
Speedcurve 是一个前端性能综合监控网站，通过输入被测网站的 url 地址，进行测试。
选择访问的设备
得出性能报告
也可以查看具体的性能指标：
- 最大的图片的渲染时间
- 首页加载完成全部片段
- 渲染时间
- 页面加载时间
- 页面渲染
- 交互
- CPU
- 请求数
- 文件大小
总结
我们可以通过自动化测试工具去测试网页的性能，并根据性能报告去优化前端页面，以提升用户的体验。
Lighthouse 可以从页面性能、可访问性、SEO 等几方面给出优化建议，开发人员可以根据评估页面的标准和优化建议，来进行网站优化和完善，提升用户体验。
Speedcurve 可以用来查看某个因素在不同站点的速度表现，并且提供了综合监控，可以从多个方面去监控前端的性能，甚至可以自定义选项，比如网络速度、设备、操作系统等。
