时间:2021-07-01 10:21:17 帮助过:14人阅读
Lighthouse 是Google公司旗下一个开源的、可自动化检测网站质量的工具,界面友好、操作简单、使用方式多样、视角全面,可以用它来测试任意网页,普通用户、QA、开发都可以快速上手。
使用Lighthouse的方式有很多种,最简单的,可以使用 Chrome 的开发者工具,步骤如下:
打开 Chrome 浏览器
按F12
在弹出来的窗口中打开 audits 标签
点击 Perform an audit...勾选全部
Run audit
也可以使用命令行。
安装Node
安装Lighthouse npm install -g lighthouse
在命令行中run lighthouse <url>
以上两种使用方式都不是本文的重点,如果想深入了解,可参照 Run Lighthouse in DevTools
由于最近在学习 NodeJS, 因此笔者决定使用 Node 8 + Gulp 来跑 lighthouse,为了提高结果的准确性,每次task都跑10次 lighthouse, 并且只关心结果指标中的 first-meaningful-paint
毫秒数,最终取10次的平均值,为了可视化与可读性,最终的结果以网页的形式展示,用户可在网页上看到每次执行 Lighthouse 之后 first-meaningful-paint
的毫秒数,也可以看到平均值,如果用户对某次执行的细节感兴趣,可以点击链接察看。最终的结果长这个样子:
安装 Node 8
安装依赖包
npm i lighthouse --save-dev npm i chrome-launcher --save-dev npm i fs-extra --save-dev npm i gulp --save-dev
在项目根目录下创建Lighthouse的配置文件 lighthouse-config.js
, 这里我们全部使用默认配置,使用默认配置需在配置文件中声明 extends: 'lighthouse:default'
。
module.exports = { extends: 'lighthouse:default' }
如果读者需要了解更详细的配置选项,可参考:
Lighthouse 这篇大部分内容是关于命令行的,命令行参数同样可用于Node
throttling这篇是关于网络模拟的
Default Config 具体的默认配置参数
Web Page Test 模拟不同的网速
Emulation 模拟不同的设备
在项目根目录下创建 gulpfile.js
,首先引入所有依赖的工具:
const gulp = require('gulp'); const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher'); const printer = require('lighthouse/lighthouse-cli/printer'); const Reporter = require('lighthouse/lighthouse-core/report/report-generator'); const fs = require('fs-extra'); const config = require('.lighthouse-config.js');
在开始使用 lighthouse 之前,首先创建一个写入文件的方法, 用于最后生成自定义的 report 文件:
async function write(file, report) { try { await fs.outputFile(file, report); } catch (Error e) { console.log("error while writing report ", e); } }
调用 Lighthouse 之前,我们需要首先启动一个 Chrome 的 instance ,并将端口号提供给 Lighthouse 。--headless
表示不打开 browser 窗口。
async function launchChrome() { let chrome; try { chrome = await chromeLauncher.launch({ chromeFlags: [ "--disable-gpu", "--no-sandbox", "--headless" ], enableExtensions: true, logLevel: "error" }); console.log(chrome.port) return { port: chrome.port, chromeFlags: [ "--headless" ], logLevel: "error" } } catch (e) { console.log("Error while launching Chrome ", e); } }
Chrome 实例启动之后,我们就可以调用 Lighthouse , 调用时,须提供需要进行性能测试的网站,参数,以及前文创建好的配置,参数包含了 Chrome 启动端口,启动方式(是否 headless 等信息)。
async function lighthouseRunner(opt) { try { return await lighthouse("https://www.baidu.com", opt, config); } catch (e) { console.log("Error while running lighthouse"); } }
Lighthouse 的返回结果是一个包含性能测试结果, 最终版的配置参数, 指标分组等信息的 json 对象,读者可以参考 Understanding Results 获得更深入的理解。
由于这里我们需要使用 Lighthouse 官方的模板生成报告,因此调用官方提供的方法,注意第一个参数传入 result.lhr
, 第二个参数声明生成 html 报告(还可以生成 csv 等格式的报告)。
function genReport(result) { return Reporter.generateReport(result.lhr, 'html'); }
下面我们写一个将上面几个方法串起来的函数,首先启动一个 Chrome 实例, 然后将 Chrome 实例的某些参数传递给 Lighthouse,使用 lighthouse 跑出来的结果生成报告,并写入 html 文件, html文件应带有时间戳和执行顺序作为唯一标识。start
方法返回结果中的first-meaningful-paint
(这是我们最关心的指标,读者可根据自身需要替换,具体指标可参考 Lighthouse)。
async function run(timestamp, num) { let chromeOpt = await launchChrome(); let result = await lighthouseRunner(chromeOpt); let report = genReport(result); await printer.write(report, 'html', `./cases/lighthouse-report@${timestamp}-${num}.html`); return result.lhr.audits['first-meaningful-paint'].rawValue; await chrome.kill(); }
下面, 我们可以正式开始写一个 gulp task 啦,首先获得当前时间戳,用于最终生成的报告命名,然后声明一个数组,用于记录每次跑 Lighthouse 生成的 first-meaningful-paint
毫秒数,然后跑10次 Lighthouse, 使用提前创建的模板文件,根据这10的结果,生成一个汇总报告,这里,笔者使用了Lighthouse对外暴露的工具函数进行字符串的替换。
gulp.task('start', async function() { let timestamp = Date.now(); let spent = []; for(let i=0; i<5; i++) { spent.push(await run(timestamp, i)); } let template = await fs.readFileSync('./summary/template/template.html', 'utf-8'); let summary = Reporter.replaceStrings(template, [{ search: '%%TIME_SPENT%%', replacement: JSON.stringify(spent) }, { search: '%%TIMESTAMP%%', replacement: timestamp }]); write(`./summary/report/summary@${timestamp}.html`, summary) })
最后的最后, 执行:
gulp start
万事大吉。
附上汇总界面的模板源码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>Lighthouse Summary Report</title> <style> body { font-family: sans-serif; } table { margin: auto; } tr { border: 1px solid grey; } h1 { text-align: center; margin: 30px auto 50px auto } </style> </head> <body> <table> <h1>Performance Summary Report</h1> <tr> <th> Case No. </th> <th> First Meaningful Paint </th> <th> Link To Details </th> </tr> <tbody id="tableBody"> </tbody> </table> <script> let timespent = %%TIME_SPENT%%; let timestamp = %%TIMESTAMP%%; let tableBody = document.getElementById("tableBody"); let content = ''; for(let i=0; i < timespent.length; i++) { content += `<tr style="border: 1px solid grey"> <td> ${i+1} </td> <td> ${timespent[i]} </td> <td> <a href="../../cases/lighthouse-report@${timestamp}-${i}.html">View Details</a> </td> </tr>` } let total = timespent.reduce((i, j) => { return i + j; }) let count = timespent.filter(function(i) { return i}).length content += `<tr> <td> AVG </td> <td> ${total / count} </td> </tr>` tableBody.innerHTML = content; </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能
关于vue中extend,mixins,extends,components,install的操作
Vue+Mock.js如何搭建前端独立开发环境
以上就是如何使用NodeJS + Lighthouse + Gulp搭建自动化网站性能测试的工具的详细内容,更多请关注Gxl网其它相关文章!