Lighthouse Node API 进阶：结合 Puppeteer/Playwright 模拟复杂用户交互的性能测试

大家好，我是你们的性能调优小助手“码农飞哥”。

之前咱们聊过 Lighthouse 的基本用法，相信大家已经能用它来跑个分、看看报告了。但 Lighthouse 的能力远不止于此！今天，咱们就来聊聊如何利用 Lighthouse Node API，结合 Puppeteer 或 Playwright 这样的无头浏览器，进行更复杂的性能测试，特别是模拟用户登录、表单提交等真实场景的操作，并深入分析这些操作对性能的具体影响。

为啥要“折腾”？

Lighthouse 默认的测试场景比较简单，就是打开一个页面，然后分析。但实际的 Web 应用，用户可不只是看看而已，他们会登录、会填表、会点各种按钮……这些交互操作，往往才是性能瓶颈的“重灾区”。

如果我们只测个“光秃秃”的页面，那结果很可能“失真”，无法反映真实的用户体验。所以，我们需要“模拟”出这些用户行为，让 Lighthouse 在更贴近实际的场景下进行测试。

Puppeteer/Playwright：无头浏览器的“双子星”

要模拟用户行为，我们就需要一个能“听话”的浏览器。Puppeteer 和 Playwright 就是这样的“听话”的浏览器，它们都是“无头”的，也就是没有界面，完全通过代码控制。这样，我们就可以在 Node.js 环境中，像“提线木偶”一样操纵浏览器，让它执行各种操作。

Puppeteer 和 Playwright 的 API 非常相似，功能也大同小异。选择哪个，主要看个人喜好。本文中，我将以 Puppeteer 为例，Playwright 的用法也差不多。

核心思路：让 Lighthouse “看见”用户行为

Lighthouse 本身并不知道用户做了什么，它只负责分析当前页面的状态。所以，我们的核心思路就是：

1. 用 Puppeteer/Playwright 模拟用户操作。
2. 在操作前后，分别用 Lighthouse 进行测试。
3. 对比两次测试的结果，找出性能差异。

这样，我们就能知道，某个用户操作，到底对哪些性能指标产生了影响，影响有多大。

实战演练：模拟用户登录

下面，我们就以模拟用户登录为例，一步步演示如何实现。

1. 安装依赖

首先，我们需要安装 Lighthouse 和 Puppeteer：

npm install lighthouse puppeteer --save-dev

2. 编写代码

const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
 
(async () => {
  // 启动 Puppeteer
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
 
  // 设置 Lighthouse 配置
  const config = {
    extends: 'lighthouse:default',
    settings: {
      onlyCategories: ['performance'],
    },
  };
 
  // 定义要测试的 URL
   const testUrl = 'https://example.com/login'; // 替换成你的登录页面 URL
 
  // 第一次测试：登录前
  const { lhr: beforeLogin } = await lighthouse(testUrl, { port: (new URL(browser.wsEndpoint())).port }, config);
  console.log(`登录前 LCP: ${beforeLogin.audits['largest-contentful-paint'].displayValue}`);
 
  // 模拟用户登录
  await page.goto(testUrl);
  await page.type('#username', 'testuser'); // 替换成你的用户名输入框 ID
  await page.type('#password', 'testpassword'); // 替换成你的密码输入框 ID
  await page.click('#login-button'); // 替换成你的登录按钮 ID
  await page.waitForNavigation({ waitUntil: 'networkidle0' });
 
  // 第二次测试：登录后
  const { lhr: afterLogin } = await lighthouse(page.url(), { port: (new URL(browser.wsEndpoint())).port }, config);
  console.log(`登录后 LCP: ${afterLogin.audits['largest-contentful-paint'].displayValue}`);
 
 
  // 关闭浏览器
  await browser.close();
})();

3. 代码解读

• puppeteer.launch()：启动 Puppeteer，headless: 'new' 表示使用新的无头模式。
• browser.newPage()：创建一个新的页面。
• lighthouse()：运行 Lighthouse 测试。第一个参数是 URL，第二个参数是 Puppeteer 的端口号，第三个参数是 Lighthouse 的配置。
• page.goto()：打开登录页面。
• page.type()：在输入框中输入用户名和密码。
• page.click()：点击登录按钮。
• page.waitForNavigation()：等待页面加载完成。
• lhr.audits['largest-contentful-paint'].displayValue：获取 LCP 指标的值。

4. 运行结果

运行这段代码，你会在控制台中看到类似这样的输出：

登录前 LCP: 2.5 s
登录后 LCP: 3.8 s

这说明，登录操作导致 LCP 增加了 1.3 秒。这只是一个简单的例子，你可以根据需要，分析更多的性能指标，找出性能瓶颈。

进阶技巧

1. 模拟更复杂的操作

除了登录，你还可以模拟各种各样的用户操作，比如：

• 填写表单
• 点击按钮
• 滚动页面
• 切换 Tab
• ……

只要是 Puppeteer/Playwright 能做的，你都可以结合 Lighthouse 进行测试。

2. 自定义 Lighthouse 配置

Lighthouse 有很多配置选项，你可以根据需要进行调整，比如：

• onlyCategories：只测试指定的类别，比如 ['performance', 'accessibility', 'best-practices', 'seo', 'pwa']。
• throttling：模拟不同的网络和 CPU 条件。
• emulatedFormFactor：模拟不同的设备类型，比如 'mobile' 或 'desktop'。
• locale：设置语言环境。

3. 使用自定义审计

如果你觉得 Lighthouse 内置的审计不够用，你还可以编写自定义审计，来收集你关心的性能数据。

###4. 持续集成

你可以将 Lighthouse 集成到你的持续集成流程中，每次代码提交都自动运行性能测试，及时发现性能问题。

常见问题

1. 为什么登录后的 LCP 反而变大了？

这可能是因为登录后，页面加载了更多的内容，或者渲染逻辑更复杂了。你需要具体分析 Lighthouse 报告，找出导致 LCP 变大的原因。

2. 如何模拟不同的网络条件？

你可以在 Lighthouse 配置中设置 throttling 选项，来模拟不同的网络速度和延迟。也可以在puppeteer中使用page.emulateNetworkConditions。

3. 如何模拟不同的设备？

你可以在 Lighthouse 配置中设置 emulatedFormFactor 选项，来模拟不同的设备类型。 puppeteer中可以使用page.emulate。

总结

通过结合 Lighthouse Node API 和 Puppeteer/Playwright，我们可以模拟复杂的用户交互场景，进行更真实的性能测试。这对于优化 Web 应用的性能，提升用户体验，非常有帮助。

当然，性能优化是一个持续的过程，需要我们不断地测试、分析、改进。希望本文能给你带来一些启发，让你在性能优化的道路上，走得更远！

如果你有什么问题，或者有什么好的想法，欢迎在评论区留言，咱们一起交流！