23 种提升网站性能的开发工具
在处理性能时，很难记住所有可能在开发过程中帮助您的工具。 为此，我们编制了一份包含 23 种性能工具的列表供您参考。 有些您可能听说过，有些可能没有。 有些已经在我们的性能月中进行了详细介绍，有些还没有在以后的文章中介绍； 但所有这些都非常有用，应该成为您武器库的一部分。
客户端性能工具
1. 用谷歌测试你的移动速度
Google 的 Test My Site 是 Google 提供的在线工具，由流行的网站性能工具 WebPageTest.org 提供支持。
您可以在现场可视化您的报告，也可以通过您的电子邮件地址将其通过电子邮件发送给您。
该工具会为您提供在 3G 网络中使用 Moto G4 设备上的 Chrome 浏览器计算的网站加载时间（或速度指数）。 它还为您提供了由于加载时间而流失的访问者的估计百分比。 除其他事项外，它还：
- 将您的网站速度与您所在行业中表现最好的网站进行比较，为您提供可以帮助您加快网站加载时间的最佳修复程序。
2. SiteSpeed.io
SiteSpeed.io 是一个开源工具（或一组工具），可以帮助您衡量网站性能并加以改进。
图片来源：sitespeed.io
- Coach：根据最佳实践为您的网站提供性能建议和修复。 Browsertime：从浏览器收集指标和 HAR 文件。 Chrome-HAR：帮助您比较 HAR 文件。 PageXray：提取不同的指标（从 HAR 文件），例如大小、请求数等。
您可以使用 npm 安装这些工具：
npm install sitespeed.io -g
sitespeed.io --help
或码头工人：
docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ --video --speedIndex
3.谷歌的灯塔
Lighthouse 是一个开源工具，用于运行审计以提高网页质量。 它集成到 Chrome 的 DevTools 中，也可以作为 Chrome 扩展或基于 CLI 的工具安装。 它是测量、调试和改进现代客户端应用程序（特别是 PWA）性能不可或缺的工具。
您可以从 Chrome 网上应用店找到该扩展程序。
或者你可以通过 npm 在你的系统上安装 Lighthouse：
npm install -g lighthouse
然后运行它：
lighthouse <url>
您可以以编程方式使用 Lighthouse 来构建您自己的性能工具或用于持续集成。
确保检查这些基于 Lighthouse 的工具：
- webpack-lighthouse-plugin：Webpack treo 的 Lighthouse 插件：Lighthouse 即服务，提供个人免费计划。 calibreapp：一项基于 Lighthouse 的付费服务，可帮助您使用真实的 Google Chrome 实例跟踪、了解和改进性能指标。 lighthouse-cron：一个可以帮助您跟踪 Lighthouse 分数和指标超时的模块。
我们在 PWA 性能月博文中深入了解了 Lighthouse。
4. 爬行者
您可以使用 Lightcrawler 来抓取您的网站，然后运行通过 Lighthouse 找到的每个页面。
首先通过 npm 安装该工具：
npm install --save-dev lightcrawler
然后通过提供目标 URL 和 JSON 配置文件从终端运行它：
lightcrawler --url <url> --config lightcrawler-config.json
配置文件可以是这样的：
{
"extends": "lighthouse:default",
"settings": {
"crawler": {
"maxDepth": 2,
"maxChromeInstances": 5
},
"onlyCategories": [
"Performance",
],
"onlyAudits": [
"accesskeys",
"time-to-interactive",
"user-timings"
]
}
}
5. Y慢
YSlow 是一个 JavaScript 书签，可以添加到您的浏览器并在任何访问的网页上调用。 该工具分析网页并根据雅虎针对高性能网站的规则帮助您发现缓慢的原因。
图片来源：yslow.org
您可以通过将小书签拖放到浏览器的书签栏来安装 YSlow。 在此处查找更多信息。
6. GTmetrix
GTmetrix 是一种在线工具，可让您深入了解您的网站性能（完全加载时间、总页面大小、请求数量等）以及有关如何优化网站的实用建议。
7.页面性能
页面性能是一个 Chrome 扩展，可用于运行快速性能分析。 如果您打开了多个选项卡，扩展将在活动选项卡上调用。
8. AMP 项目
AMP（Accelerated Mobile Pages）项目是一个开源项目，旨在使网络更快。 AMP 项目使开发人员能够创建快速、高性能且在所有平台（桌面浏览器和移动设备）上具有出色用户体验的网站。
AMP 项目本质上是三个核心组件：
- AMP HTML：它是 HTML，但有一些限制以保证可靠的性能。 AMP JS：一个负责呈现 AMP HTML 的 JavaScript 库。 AMP 缓存：用于缓存和传送有效 AMP 页面的内容传送网络。 您可以使用 AMP Validator 或 amphtml-validator 等工具来检查您的网页是否为有效的 AMP 网页。
一旦您将 AMP 标记添加到您的页面，Google 将自动发现它们并缓存它们以通过 AMP CDN 传送它们。 您可以从这里学习如何创建您的第一个 AMP 页面。
代码级性能工具
9. Dust Me 选择器
Dust Me Selectors 是一个浏览器扩展，可以帮助您发现并删除网页中未使用的 CSS 选择器。 它会扫描所有样式表，然后将找到的选择器组织成已使用和未使用的选择器，这将准确告诉您扫描页面上使用或未使用的 CSS。
10. 顶层公寓
Penthouse 是一个关键路径 CSS 生成器，它允许您获取渲染指定页面首屏内容所需的 CSS。 您只需指定网站的完整 CSS 文件和目标页面。
你可以使用 npm 安装 Penthouse：
npm install penthouse
此工具还有一个在线版本。
要获得此工具的改进付费服务，请务必查看此工具。
11. 关键
Critical 是 Addy Osmani 创建的 Node.js 工具，可帮助您在 HTML 页面中提取和内联关键路径 CSS。 你可以从 npm 安装它：
npm install -g critical
critical test/fixture/index.html --base test/fixture > critical.css
Critical 可以用作 CLI 工具，也可以与 Gulp 等构建系统集成。
12.优化-js
您可以使用 Optimize-js 优化 JavaScript 代码，通过将立即调用的函数包装在括号中来加快初始加载速度。
这个工具可以从 npm 安装：
npm install -g optimize-js
然后您可以通过 CLI 使用它：
optimize-js input.js > output.js
13.图像优化工具
图像优化
ImageOptim 是一款适用于 Mac 的免费开源应用程序，可优化图像的大小。 它也可以作为付费在线服务使用。
图片来源：imageoptim.com
PNG粉碎
Pngcrush 是适用于 Windows 和 Linux 的免费开源 PNG 优化器。
三相
Trimage 是一个跨平台的免费工具，用于无损优化 PNG 和 JPG 文件。
图片来源：trimage.org/
服务器端性能工具
14.阿帕奇托普
Apachetop 是一个受启发的工具 top 并基于 mytop 可用于监控 Apache Web 服务器的性能。 它可用于显示当前处理的写入、读取和请求数。
对于基于 Debian 的系统，您可以使用 apt 安装 apachetop：
sudo apt-get install apachetop
对于基于 Red Hat 和 CentOS 的系统，启用 EPEL 存储库以安装 apachetop，然后使用 yum 包管理器：
sudo yum -y install epel-release
sudo yum clean all
sudo yum -y update
sudo yum -y install apachetop
然后，您可以通过提供 Apache 服务器的日志文件来使用它：
apachetop -f /var/log/apache2/access.log
确保您具有读取日志文件的权限。
15. 恩克斯托普
Ngxtop 是一个基于 Python 的类似 top 的工具，它解析您的 Nginx 服务器访问日志并输出重要指标，例如活跃请求、状态代码的总请求、排名靠前的远程 IP 和实时发送的平均字节数。 Ngxtop 也可以用来解析 Apache 访问日志。
这是 Ngxtop 的默认输出示例：
确保你的系统上安装了 Python 和 PIP 包管理器，然后运行以下命令来安装 Ngxtop：
pip install ngxtop
ngxtop -h
您还可以查看这些类似的工具：
- Ngx-top：使用 Haskell 构建的 Ngxtop 的替代品。 Luameter：Nginx 的商业 Lua 模块，提供用于实时监控 Nginx 的关键性能指标。
16.正常运行时间-cli
Uptime-cli 是一个 CLI 工具，用于使用 Uptime Robot API 监控网站的正常运行时间。
您可以从 npm 安装该工具：
npm install -g uptime-cli
SQL 性能工具
17. 调整入门
Tuning-primer 是适用于 MySQL 5.5 或更高版本的现代 MySQL 性能调优 Bash 脚本。
它基于 MySQL 性能调优初级脚本版本 1.6-r1。
wget https://github.com/RootService/tuning-primer/blob/master/tuning-primer.sh
chmod +x tuning-primer.sh
18. MySQL调谐器
MySQLTuner 是一个用 Perl 编写的脚本，它分析您的 MySQL 服务器性能，然后根据它找到的信息向您显示建议。 这些建议只是调整配置变量（在 /etc/mysql/my.cnf 文件）使 MySQL 的服务器更有效地工作。
您可以使用类似的工具从 mysqltuner.com 获取 MySQLTuner 脚本 wget:
wget http://mysqltuner.com/mysqltuner.pl
chmod +x mysqltuner.pl
./mysqltuner.pl --help
19. Mytop
Mytop 是一个类似 top 的 CLI 工具，用于通过连接到服务器并定期运行两者来显示 MySQL 服务器性能 show processlist 和 show status 命令。 然后它总结了信息。
对于基于 Debian 的系统，您可以使用 apt-get 安装 mytop：
sudo yum -y install epel-release
sudo yum clean all
sudo yum -y update
sudo apt-get install mytop
对于基于 Red Hat 和 Centos 的系统，启用 EPEL 存储库以安装 Mytop，然后使用 yum 包管理器：
sudo yum install mytop
20.SQLBenchmarkPro
SQLBenchmarkPro 是一项免费的云服务，可以为小型和大型企业远程监控您的数据库和 SQL Server。 它通过在本地安装 SQLBenchmarkPro 代理来工作，该代理持续监控服务器的性能和健康状况。
图片来源
负载测试工具
21.阿帕奇JMeter
Apache JMeter 是由 Apache 软件基金会的 Stefano Mazzocchi 使用 Java 构建的开源工具。 它可用于负载测试和性能测量。
由于 JMeter 是用 Java 构建的，因此它可以在所有主要平台（例如 Windows、Linux 和 macOS）下使用。
确保安装了 Java，然后转到此页面下载 JMeter。 然后，您可以在 GUI 模式、服务器模式或命令行模式下从不同的脚本启动 JMeter bin 文件夹。
22. 研磨机
Grinder 是一个使用 Java 构建的负载测试框架，可用于使用许多负载注入器机器运行分布式负载测试。 它是一个开源工具，可获得 BSD 风格的许可。
您可以使用 Grinder 对从 HTTP 服务器到 SOAP 服务和 REST API 的任何内容进行负载测试，还可以对 CORBA、RMI、JMS 和 EJB 等应用程序服务器进行负载测试。
您可以使用 Jython 和 Closure 等强大的脚本语言灵活地为 Grinder 框架编写脚本。 从官方 SourceForge 页面找到更多信息。
Grinder 可从 SourceForge.net 免费下载。
23.加特林
Gatling 是一种负载测试工具，可用于通过使用几台机器模拟每秒数千个请求来对 Web 应用程序进行负载测试。
Gatling 可以使用 Scala 语言和一种可以满足您大部分需求的简单 DSL 语言编写脚本。
图片来源：gatling.io
您可以从 Gatling 官方网站下载 Gatling，然后只需解压缩包并从中的各种脚本运行该工具 bin 文件夹。
包起来
这个列表远未完成，所以如果您有任何首选工具来分析或调整您的 Web 应用程序的性能，请在 Twitter 上联系我！
