概述
gillie 是一个用于 web 应用程序的低侵入性的实验性性能度量工具。它会记录应用程序中的网络请求、页面加载时间、JavaScript 执行时间以及其他指标，并提供可视化报告，以帮助开发者优化应用程序的性能。
本文将介绍如何使用 gillie 来度量您的网站的性能，并解释如何根据报告进行优化。
安装
在开始之前，请确保您已经安装 Node.js 和 NPM。
要安装 gillie，请在命令行中运行以下命令：
npm install -g gillie
使用
1. 启动 gillie
在命令行中运行以下命令，启动 gillie：
gillie start这将启动 gillie 代理服务器，并将其设置为监听默认端口（8888）上的 HTTP 请求。
2. 配置浏览器
接下来，您需要配置浏览器以使用 gillie 代理服务器。在本例中，我们将使用 Google Chrome 浏览器。
- 在 Chrome 中，打开设置页面。
- 在左侧菜单中选择“高级”。
- 在“系统”下找到“代理设置”并点击“打开代理设置”。
- 在代理设置对话框中，选择“手动代理配置”。
- 在 HTTP 一栏中，将地址设置为
localhost，端口设置为8888。 - 点击“保存”。
现在您的浏览器已经配置完毕。
3. 访问网站
接下来，您可以通过浏览器访问您想要度量的网站。gillie 会记录该网站的性能数据，并将其保存在内存中，以供生成报告使用。
4. 停止 gillie
当您完成度量时，可以在命令行中运行以下命令停止 gillie：
gillie stop报告
gillie 提供了一个基于 web 的界面，用于查看度量结果。在默认情况下，它将在本地的 http://localhost:3001 上运行。
可以通过以下命令打开报告页面：
gillie report页面加载时间
gillie 报告中的“页面加载时间”部分提供了关于网站性能的重要信息。其中包含：
- DNS 时间：解析网站域名所需的时间。
- TCP 连接时间：建立到网站服务器的连接所需的时间。
- SSL 握手时间（如果启用 HTTPS）：完成 SSL 握手所需的时间。
- 请求时间：从发出请求到接收响应的时间。
- 响应时间：从接收响应到处理响应的时间。
- DOM 加载时间：从接收响应到 DOM 加载完成所需的时间。
- DOM 内容加载时间：从 DOM 加载完成到所有内容（如图片、JavaScript、CSS）加载完成所需的时间。
JavaScript 执行时间
gillie 还提供了一个“JavaScript 执行时间”部分，用于跟踪网站上的 JavaScript 代码。它显示了每个页面中执行的 JavaScript 代码的数量和执行时间。
优化
使用 gillie 可以找出网站性能瓶颈，并帮助您进行优化。
以下是一些优化建议：
- 减少 HTTP 请求：合并和压缩 JavaScript、CSS 和图像等资源，以减少 HTTP 请求的数量。
- 减少页面大小：通过优化代码、图像和其他资源来减少页面大小。
- 将 JavaScript 移至底部：将 JavaScript 代码放在页面底部可以加快页面加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38261
