性能检测相关

前置知识

• Lighthouse 提供了一个命令行工具和一个可嵌入到 Chrome 浏览器中的开发者工具扩展，可以用于在不同的环境中评估网页。它执行一系列自动化测试，并根据一组预定义的标准和指南生成报告，其中包含了关于网页在不同方面的表现的详细信息
• Lighthouse 报告通常包括以下几个主要指标和类别：
  1. 性能（Performance）： 评估网页的加载性能，包括页面加载时间、资源加载时间、首次渲染时间等。
  2. 可访问性（Accessibility）： 检查网页的可访问性，包括是否符合 Web Content Accessibility Guidelines (WCAG) 等规范。
  3. 最佳实践（Best Practices）： 检查网页是否遵循最佳实践，包括安全性、HTTPS 使用、资源优化等。
  4. SEO（Search Engine Optimization）： 评估网页在搜索引擎优化方面的表现，包括页面标题、元描述、结构化数据等。
• Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过 Headless Chrome（无头浏览器）控制和操作浏览器。它是由 Google Chrome 团队开发和维护的工具，可以用于实现许多自动化任务，包括网页截图、生成 PDF、爬取数据、模拟用户操作等
• Puppeteer 的主要特点和用途包括：
  1. 控制浏览器： Puppeteer 允许您在无头模式下控制 Chrome 浏览器的各个方面，如页面导航、表单提交、用户交互等。
  2. 网页截图和生成 PDF： 您可以使用 Puppeteer 在浏览器中加载网页，并将网页内容保存为截图或生成 PDF 文件。
  3. 自动化测试： Puppeteer 可以用于执行自动化测试，模拟用户在浏览器中的交互和行为。
  4. 数据爬取： 您可以使用 Puppeteer 来爬取网站上的数据，模拟用户访问和操作，然后提取所需的信息。
  5. 性能分析： Puppeteer 可以用于分析网页的性能指标，帮助您识别性能瓶颈和优化机会。
  6. 页面预渲染： 在一些情况下，Puppeteer 可以用于生成静态的预渲染页面，以加速首次加载。

Lighthouse使用

const fs = require('fs')
const lighthouse = require('lighthouse')
const chromeLauncher = require('chrome-launcher')

async function start() {
  // 启动一个 chrome，
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] })
  const options = {
    logLevel: 'info', // 日志级别 info会显示一些基本信息 error会显示错误信息
    output: 'html', // 输出格式 html、json
    onlyCategories: ['performance'], // 仅评估的指标类别 performance意味着 Lighthouse 仅评估页面的性能方面
    port: chrome.port, // 指定 Lighthouse 在运行过程中要使用的端口
  }
  // 使用 lighthouse 对目标页面进行跑分
  const runnerResult = await lighthouse('https://news.baidu.com/', options)
  // `.report` 是一个 html 类型的分析页面
  const reportHtml = runnerResult.report
  fs.writeFileSync('lhreport.html', reportHtml)
  // `.lhr` 是用于 lighthous-ci 的结果集合
  console.log('报告已完成，地址为：', runnerResult.lhr.finalUrl)
  console.log(
    '性能得分为：',
    runnerResult.lhr.categories.performance.score * 100
  )
  await chrome.kill()
}

start()

配合Puppeteer使用

const chromeLauncher = require('chrome-launcher')
const puppeteer = require('puppeteer')
const lighthouse = require('lighthouse')
const config = require('lighthouse/lighthouse-core/config/lr-desktop-config.js')
// const reportGenerator = require('lighthouse/lighthouse-core/report/report-generator');
const reportGenerator = require('lighthouse/report/generator/report-generator')
const request = require('request')
const util = require('util')
const fs = require('fs')

async function start() {
  // 默认配置
  const opts = {
    logLevel: 'info',
    output: 'json',
    disableDeviceEmulation: true,
    defaultViewport: {
      width: 1200,
      height: 900,
    },
    chromeFlags: ['--disable-mobile-emulation'],
  }
  // 使用 chromeLauncher 启动一个 chrome 实例
  const chrome = await chromeLauncher.launch(opts)
  opts.port = chrome.port
  // 使用 puppeteer.connect 连接 chrome 实例
  const resp = await util.promisify(request)(
    `http://localhost:${opts.port}/json/version`
  )
  const { webSocketDebuggerUrl } = JSON.parse(resp.body)
  const browser = await puppeteer.connect({
    browserWSEndpoint: webSocketDebuggerUrl,
  })
  // Puppeteer 访问逻辑
  page = (await browser.pages())[0]
  await page.setViewport({ width: 1200, height: 900 })
  await page.goto('https://news.baidu.com/')
  console.log(page.url())
  // 使用 lighthouse 产出报告
  const report = await lighthouse(page.url(), opts, config).then((results) => {
    return results
  })
  const html = reportGenerator.generateReport(report.lhr, 'html')
  const json = reportGenerator.generateReport(report.lhr, 'json')
  await browser.disconnect()
  await chrome.kill()
  // 将报告写入文件系统
  fs.writeFile('report.html', html, (err) => {
    if (err) {
      console.error(err)
    }
  })
  fs.writeFile('report.json', json, (err) => {
    if (err) {
      console.error(err)
    }
  })
}
start()