Lighthouse 3.0 发布：前端性能优化利器

Lighthouse 是一款由 Google 开发的开源工具，用于评估网站的性能和质量。它通过模拟不同设备和网络条件对网站进行测试，并根据多个指标生成一份综合性的报告。

最新版本的 Lighthouse 3.0 在之前的版本基础上进行了进一步升级，这篇文章将为你介绍 Lighthouse 3.0 的新特性和使用方法，并提供一些实用的技巧和示例代码，帮助你更好地利用这个强大的性能评估工具来优化你的前端应用程序。

新特性

更全面的评估指标

Lighthouse 3.0 增加了一些新的评估指标，使得它的评估更加全面而且准确。这些指标包括：

**Time to First Byte (TTFB)**：即从浏览器发出请求到服务器返回第一个字节的时间。较短的 TTFB 时间通常意味着更快的页面加载速度。
**First Contentful Paint (FCP)**：即页面内容首次绘制的时间。较快的 FCP 时间可以让用户更早地看到页面内容，提高用户体验。
Speed Index：即页面在加载过程中显示内容的速度。较低的 Speed Index 值通常意味着更好的用户体验。
Interactive：即页面变得交互性的时间。这个指标通常用于评估单页应用程序的性能。

新的 UI 界面

Lighthouse 3.0 还引入了全新的 UI 界面，使得报告更加易于阅读和理解。新界面提供了更详细的信息，包括如何解决问题和改进页面性能的建议。

如何使用 Lighthouse 3.0

使用 Lighthouse 3.0 很简单。你可以在 Chrome 开发者工具中使用它，也可以通过命令行运行。

在 Chrome 中使用 Lighthouse

要在 Chrome 中使用 Lighthouse，只需打开 Chrome 开发者工具并选择“Audits”选项卡。然后，点击“Run audits”按钮，Lighthouse 就会开始测试你的网站，并生成一份综合性的报告。

命令行运行

如果你想在命令行中运行 Lighthouse，可以使用 npm 安装 lighthouse 模块，并使用以下命令：

lighthouse <url> --output json --output-path <filename.json>

这将在指定的 URL 上运行 Lighthouse 测试，并将结果保存为 JSON 文件。

示例代码

下面是一个简单的示例，演示如何使用 Lighthouse 3.0 来测试一个网站的性能，并根据评估结果生成一些可操作的建议。

// javascriptcn.com code example
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

function launchChromeAndRunLighthouse(url, opts, config = null) {
  return chromeLauncher.launch(opts).then(chrome => {
    opts.port = chrome.port;
    return lighthouse(url, opts, config).then(results =>
      chrome.kill().then(() => results)
    );
  });
}

const opts = {
  chromeFlags: ['--headless'],
  onlyCategories: ['performance']
};

launchChromeAndRunLighthouse('https://example.com', opts).then(results => {
  console.log(`Performance score: ${results.categories.performance.score * 100}`);
  console.log(`First Contentful Paint: ${results.audits['first-contentful-paint'].rawValue}`);
  console.log(`Speed Index: ${results.audits['speed-index'].rawValue}`);
});

这个示例使用了 Lighthouse Node.js API 来在 Chrome 中运行测试，并输出了

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/32035

light house 3.0 发布