Lighthouse Timespan模式深度解析：精细化性能分析实战

大家好，我是你们的性能优化伙伴“老码”。今天咱们来聊聊 Lighthouse 的 Timespan 模式，这可是个性能分析的“神器”，能帮你揪出那些隐藏在用户操作背后的性能瓶颈。

很多朋友可能习惯了 Lighthouse 的 Navigation 模式（默认模式），点一下“分析页面加载”，就能得到一份详细的报告。但 Navigation 模式主要关注的是页面首次加载的性能，如果想分析用户在页面上的特定操作（比如点击按钮、滚动页面、提交表单等）的性能，该怎么办呢？

这时候，Timespan 模式就派上用场了！

什么是 Timespan 模式？

简单来说，Timespan 模式允许你手动控制 Lighthouse 性能分析的开始和结束时间。你可以让 Lighthouse 只分析你在页面上特定操作时间段内的性能数据，从而更精准地定位问题。

想象一下，你正在开发一个电商网站，用户反馈说点击“加入购物车”按钮后，页面反应很慢。用 Navigation 模式分析，可能很难发现问题，因为“加入购物车”只是页面加载后众多操作中的一个。但如果用 Timespan 模式，只分析用户点击“加入购物车”按钮到商品成功加入购物车这段时间的性能，问题就很容易暴露出来。

如何使用 Timespan 模式？

使用 Timespan 模式，你需要借助 Lighthouse 的 Node CLI 或 Chrome DevTools Protocol。下面分别介绍这两种方式。

1. Node CLI 方式

首先，确保你已经安装了 Node.js 和 Lighthouse。

npm install -g lighthouse

然后，你可以使用以下命令启动 Timespan 模式：

lighthouse --view --port <port> --collect-url=<url> --enable-timespan

• --view: 执行完成后自动打开HTML报告。
• --port: 指定 Chrome 远程调试端口（例如：9222）。
• --collect-url: 要测试的网址
• --enable-timespan: 启动 Timespan 模式。

这条命令会启动一个 Chrome 实例，并打开 Lighthouse 的报告页面。但此时，Lighthouse 并不会立即开始分析，而是等待你手动触发。

在你的代码中，你需要使用 Lighthouse 的 API 来控制分析的开始和结束：

// 开始记录性能数据
await page.evaluate(_ => window.Lighthouse.startTimespan({ flags: { throttlingMethod: 'devtools' } }));
 
// 模拟用户操作（例如点击按钮）
await page.click('#add-to-cart');
 
// 等待操作完成（例如，等待网络请求返回）
await page.waitForResponse(response => response.url().includes('/add_to_cart'));
 
// 停止记录性能数据
const result = await page.evaluate(_ => window.Lighthouse.endTimespan());
console.log(result);

这段代码做了以下几件事：

1. 通过 page.evaluate 在页面上下文中执行 Lighthouse API。
2. Lighthouse.startTimespan() 开始记录性能数据。可以传入一些配置参数，比如设置限流方式throttlingMethod: 'devtools'。
3. 模拟用户操作，例如 page.click('#add-to-cart') 模拟点击“加入购物车”按钮。
4. page.waitForResponse() 等待特定的网络请求返回，确保操作完成。
5. Lighthouse.endTimespan() 停止记录性能数据，并返回结果。

将 result 写入文件或做其他处理，就可以得到一份针对这次操作的性能报告。

2. Chrome DevTools Protocol 方式

如果你更熟悉 Chrome DevTools Protocol，也可以直接使用它来控制 Lighthouse。

const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse/core/index.cjs'); // 注意这里引入的是 core/index.cjs
 
(async () => {
  const browser = await puppeteer.launch({args: ['--remote-debugging-port=9222']});
  const page = await browser.newPage();
  const port = 9222;
 
  // 连接到 Lighthouse
  await lighthouse.connect({port: port}, null);
 
  // 开始 Timespan
  await lighthouse.startTimespan({page, flags: {throttlingMethod: 'devtools'}});
 
  // 模拟用户操作
  await page.goto('https://example.com');
  await page.click('#some-button');
  await page.waitForNavigation();
 
  // 结束 Timespan
  const results = await lighthouse.endTimespan({page});
  console.log(results.lhr.audits['first-contentful-paint'].displayValue); // 举例：获取 FCP 指标
 
  await browser.close();
})();

这种方式更加底层，但也更灵活。你可以完全控制 Lighthouse 的行为，并获取更详细的性能数据。

Timespan 模式的应用场景

Timespan 模式适用于各种需要分析特定用户操作性能的场景，例如：

• 单页应用（SPA）：SPA 通常不会触发整页刷新，Navigation 模式无法分析路由切换、组件渲染等操作的性能。Timespan 模式可以完美解决这个问题。
• 复杂交互：对于包含大量 JavaScript 交互的页面，Timespan 模式可以帮助你分析特定交互的性能，例如拖拽、滚动、动画等。
• 表单提交：分析表单提交过程中的性能瓶颈，例如验证、网络请求、数据处理等。
• 游戏：分析游戏中的关键操作，例如角色移动、技能释放、场景加载等。
• 用户自定义流程分析: 用户在页面上的任何一系列操作都可以被精准分析。

注意事项

• 确保操作的完整性：在使用 Timespan 模式时，要确保你捕获了完整的用户操作。例如，如果分析点击按钮后的性能，要确保等待相关的网络请求完成，否则可能会得到不准确的结果。
• 多次运行取平均值：由于网络波动等因素，单次运行的结果可能存在偏差。建议多次运行 Timespan 模式，并取平均值，以获得更可靠的数据。
• 结合其他工具：Lighthouse 只是性能分析工具之一，可以结合 Chrome DevTools 的 Performance 面板、Network 面板等工具，进行更全面的分析。
• 不要过度依赖单一指标：Lighthouse 提供了很多性能指标，但不要过度依赖单一指标。要结合实际场景，综合考虑各项指标，才能得出正确的结论。
• 代码侵入性: 使用Lighthouse.startTimespan和 Lighthouse.endTimespan需要修改你的前端代码. 在生产环境务必移除或注释相关代码。

总结

Lighthouse 的 Timespan 模式是一个强大的性能分析工具，可以帮助你深入了解用户操作的性能瓶颈。通过手动控制分析的开始和结束时间，你可以更精准地定位问题，并进行针对性的优化。虽然使用起来比 Navigation 模式稍微复杂一些，但只要掌握了基本方法，你就能轻松驾驭它，让你的网站或应用性能更上一层楼！

希望今天的分享对你有帮助！如果你有任何问题，或者想了解更多关于 Lighthouse 的知识，欢迎在评论区留言，我会尽力解答。下次再见！