作为前端开发工程师，我们一直追求 web 应用程序的性能。我们不仅需要考虑可伸缩性和可靠性，还需要考虑性能。一些常见的性能测试指标包括页面加载时间、响应时间、资源大小和吞吐量等。在这篇文章中，我们将介绍如何使用一些流行的 web 性能工具来测试 web 应用程序的性能，通过这些工具我们可以找到应用程序中的瓶颈并进行针对性的优化。
测试工具
下面我们介绍多个流行的 web 性能测试工具，包括在浏览器中使用的工具和在线服务。
在浏览器中使用的工具
开发者工具
每个主要浏览器都有一组内置的开发者工具。 在 Google Chrome 中，我们可以通过单击菜单选项 "更多工具" 和 "开发者工具" 来打开开发者工具。 在 Mozilla Firefox 中，我们可以通过单击菜单选项 "Web 开发人员" 和 "开发者工具" 来打开开发者工具。 在 Microsoft Edge 中，我们可以通过单击菜单选项 "更多工具" 和 "开发人员工具" 来打开开发者工具。 开发者工具具有许多有用的功能，其中一个是网络面板，可以显示每个资源的加载时间和资源大小等信息，还可以捕获网络请求并分析它们的性能和质量。
Lighthouse
Lighthouse 是 Google Chrome 中的一个扩展，可以对 web 应用程序执行自动化性能测试和完整性检查。 使用 Lighthouse 可以获取页面的性能，加载速度，资源使用情况以及其他有关页面的关键数据，可以将数据可视化并得出指导意义。 通过 Lighthouse 运行的每次测试都将生成一个包含各种指标和建议的报告。
在线服务
WebPagetest
WebPagetest 是一个在线服务，在全球免费使用，可用于测试全球位置的网站性能。 它可以为多个浏览器生成性能数据，并提供有关资源加载顺序，响应时间，页面大小和其他指标的详细信息，可以通过 WebPagetest 提供的测试结果来实现性能优化的建议。
GTmetrix
GTmetrix 是一个免费在线服务，为您提供有关网站性能的详细分析。 它不仅分析您的页面，而且还分析您的整个服务器设置，包括 CDN 配置以及您使用的插件和主题。 GTmetrix 还提供了有用的性能优化建议，从而帮助您进一步提高您的站点速度。
寻找瓶颈
在这些工具的帮助下，如何寻找我们 web 应用程序中的潜在瓶颈呢？ 以下是一些常见的问题，可能会导致性能问题：
- 页面太大了：页面太大可能会导致加载时间很长，应该优化页面以减少页面大小。
- 不必要的资源加载：可能存在我们不需要或不需要的资源加载，可以将这些资源进行优化或删除。
- 第三方代码：在页面中使用的第三方脚本和样式表可能会导致性能降低，需要对其进行优化和合并， 最好使用轻量级的JavaScript框架。
示例代码
下面是一个示例代码，通过使用 Lighthouse 工具进行性能测试，获得有关页面性能的指标：
-- -------------------- ---- -------
--------- -----
------
------
--------- --- ------------
-------
------
----------- -- -- --- ----------
---- -- ----- ---- --- ----- -- --- ---------
------- --- ---- -- -- -------- -----------
----
----------------
---------------
--------------
-----
--------
------------------- ---------
---------
-------
-------
在 Google Chrome 中： 1. 单击菜单选项 "更多工具" 和 "开发者工具"。 2. 选择”Audits"选项卡。 3. 点击 “Run audits” 按钮进行运行测试。 4. 得到测试结果并进行优化操作。
总结
通过使用各种 web 性能测试工具，我们可以轻松定位和解决我们 web 应用程序中的瓶颈，并改进其性能。 通过这些工具，我们能够做出有意义的结论，优化代码，提高用户的浏览体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647089c4968c7c53b0eac63a