wordpress固定链接设置,百度网站源码优化检测,论文写作网站5000字怎么写,微信网页编辑器Lighthouse简介
Lighthouse是一个开源的自动化性能测试工具#xff0c;我们可以使用该功能检测我们的页面存在那些性能方面的问题#xff0c;并会生成一个详细的性能报告来帮助我们来优化页面
使用方式
LH一共有四种使用方式
Chrome开发者工具Chrome扩展Node 命令行Node …Lighthouse简介
Lighthouse是一个开源的自动化性能测试工具我们可以使用该功能检测我们的页面存在那些性能方面的问题并会生成一个详细的性能报告来帮助我们来优化页面
使用方式
LH一共有四种使用方式
Chrome开发者工具Chrome扩展Node 命令行Node module
前两种方式是在用户浏览器端直接运行以开发者工具为例我们打开控制台可以看到有一个Lighthouse的选项点击之后就可以直接检测当前页面的性能了。 这里有几个选项一个是模式一般我们选择默认模式即可。一个是设备可以模拟移动端设备或者桌面设备还有一个是检测的类别。确定选项之后点击分析网页加载情况即可开始对当前页面进行性能分析。以京东的首页为例经过一段时间的检测后会生成如下的报告 我们可以看到报告中会审计各种各样的指标其中时间维度比较重要的就是下面6个指标
SIFCPTTITBTLCPCLS
在此之后还有一些优化的建议比如图片的预加载移除阻塞渲染的资源和减少未使用的js加载等等…
后两种模式我们可以将lighthouse运行在自己的服务上这样结合一些自动化的手段就无需用户自己在浏览器端主动进行检测了而是可以在需要的时候比如开发的页面上线前在测试阶段可以主动在我们的服务中对该页面进行性能的检测确保我们上线的页面会有一个比较好的性能表现下面会重点以Node module的方式来介绍使用
整体架构
我们看github上官方文档对lighthouse的整体架构设计有这么一张图
Puppeteer Chrome
由上图左下侧我们可以看到lighthouse是通过Driver模块和Puppeteer(一个 Node 库它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome)来控制浏览器我们可以通过Puppeteer来模拟用户对浏览器的各种操作比如点击元素滚动页面键盘操作。一个常见的场景就是我们自己的产品使用lighthouse进行检测的时候往往需要用户先登录此时我们就可以使用Puppeteer来帮助我们先模拟用户登录登录之后利用Cookie的同源策略再次检测我们的页面就可以了。
Gatherers
顾名思义如翻译之后的意思这是一个收集器。需要在配置文件中定义需要运行的Gatherer每一个Gatherer都有一个在配置文件中同名的文件来实现收集器的功能。以达到在审计一个页面的时候需要收集这个页面的各种指标数据收集这些指标数据就是Gatherers模块完成的。比如在lighthouse内置收集器中有这些文件都是gatherer。 这些gatherer都需要继承一个标准的Gather来实现功能在后面我们演示自定义Gatherer时也需要继承这个基类
beforepass、pass、afterpass
在这个里面有个很重要的概念就是pass包含三个阶段即beforepass、pass、afterpass。来控制页面是如何加载以及在加载过程中采集那些数据。 关于beforepass、pass、afterpass这三个的区别从名称上也能看出一个导航到目标页面之前一个是目标页面加载之后一个是目标页面加载后并且所有的pass都执行完之后。我们可以直接看lighthouse源码部分
Audits
我们从架构图中可以看到Gathering模块运行之后会生成一个artifacts其实就是一些采集的数据这些数据进行一些列的计算之后再传递给Audits由Audits来对这些数据进行进一步的审计计算出每一项的具体得分为生成的报告提供数据。 与gatherers类似在配置文件中也会定义需要运行的audit。每一个audit也都有一个与之对应的同名文件来实现具体的审计功能。 每个audit都会实现一个静态的meta()方法和一个静态的audit()方法。如果没有实现这两个方法的话就会抛错哦
Lighthouse Audit源码
meta
Audits中的meta是对当前Audit的一些描述。一共有如下一些字段 其中比较重要的一个是ID,这个需要和传入的配置中的auditRefs数组中的ID相对应否则找不到。另一个就是requiredArtifacts这是一个数组表示该Audit需要哪些gatherer模块
audit
lighthouse中的audit函数如下
/**** param {LH.Artifacts} artifacts* param {LH.Audit.Context} context* return {LH.Audit.Product|PromiseLH.Audit.Product}*/static audit(artifacts, context) {throw new Error(audit() method must be overriden);}这个函数接受两个参数一个是制品即gatherer采集的那些数据挂在artifacts.ResourceGatherer属性中以及context当前的上下文。 我们一般会在audit中由传递过来采集的数据和该指标的权重来计算出该项指标具体的得分最终会返回一个对象。我们可以看一下源码中的定义看看返回对象的数据形状是什么样的。 首先是audit函数说明上会return 一个LH.Audit.Product的东西。我们可以点击去看看这是个啥。 源码部分 /** The shared properties of an Audit.Product whether it has a numericValue or not. We want to enforce numericUnit accompanying numericValue whenever it is set, so the final Audit.Product type is a discriminated union on numericValue in audit*/interface ProductBase {/** The scored value of the audit, provided in the range 0-1, or null if scoreDisplayMode indicates not scored. */score: number | null;/** The i18nd string value that the audit wishes to display for its results. This value is not necessarily the string version of the numericValue. */displayValue?: string | IcuMessage;/** An explanation of why the audit failed on the test page. */explanation?: string | IcuMessage;/** Error message from any exception thrown while running this audit. */errorMessage?: string | IcuMessage;warnings?: Arraystring | IcuMessage;/** Overrides scoreDisplayMode with notApplicable if set to true */notApplicable?: boolean;/** Extra information about the page provided by some types of audits, in one of several possible forms that can be rendered in the HTML report. */details?: AuditDetails;/** If an audit encounters unusual execution circumstances, strings can be put in this optional array to add top-level warnings to the LHR. */runWarnings?: ArrayIcuMessage;}/** The Audit.Product type for audits that do not return a numericValue. */interface NonNumericProduct extends ProductBase {numericValue?: never;}/** The Audit.Product type for audits that do return a numericValue. */interface NumericProduct extends ProductBase {/** A numeric value that has a meaning specific to the audit, e.g. the number of nodes in the DOM or the timestamp of a specific load event. More information can be found in the audit details, if present. */numericValue: number;/** The unit of numericValue, used when the consumer wishes to convert numericValue to a display string. A superset of https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier */numericUnit: byte|millisecond|element|unitless;}/** Type returned by Audit.audit(). Only score is required. */type Product NonNumericProduct | NumericProduct;
具体的字段名称的含义可以看上面的说明吐槽一下lighthouse的使用文档写的真是一般但代码中的注释写的倒是还阔以。 Audit函数字段说明
Lighthouse Report
由架构图我们可以看到由Audits审计之后会生成一个LHR.json的文件这个文件就是最终的数据报告了。然后会基于此由report模块来对这些数据进行渲染生成一个html文件
使用方式
官网的demo
整体代码如下
/*** 官网示例* https://github.com/GoogleChrome/lighthouse/blob/main/docs/readme.md#using-programmatically**/
import fs from fs
import lighthouse from lighthouse
import chromeLauncher from chrome-launcher
// https://github.com/GoogleChrome/lighthouse/discussions/12058
import desktopConfig from lighthouse/lighthouse-core/config/desktop-config.js// const chrome await chromeLauncher.launch({ chromeFlags: [--headless] })
const chrome await chromeLauncher.launch()
const options { logLevel: info, output: html, onlyCategories: [performance], port: chrome.port }
const runnerResult await lighthouse(https://www.jd.com/, options, desktopConfig)// .report is the HTML report as a string
const reportHtml runnerResult.report
fs.writeFileSync(lhreport.html, reportHtml)// .lhr is the Lighthouse Result as a JS object
console.log(Report is done for, runnerResult.lhr.finalDisplayedUrl)
console.log(Performance score was, runnerResult.lhr.categories.performance.score * 100)await chrome.kill()
在运行的时候我们可以将{ chromeFlags: [‘–headless’] }参数去除不使用无头模式这样我们可以观察整个程序的执行流程。这里也稍作修改一下在Node module中默认是移动端模式我们这里修改成PC端模式需要对lighthouse传入第三个参数。第三个参数就是模拟的PC端的桌面模式。这里还是以京东首页为例子。效果如下 在项目中会生成一个lhreport.html报告文件
官网的demo是比较简单的但实际我们在应用的时候场景会比较复杂比如我们大多数的产品都需要登录如果不登录就没法访问页面那就没法检测了。后面会接着分享如果使用puppeteerlighthouse来解决这个场景以及自定义gatherers 和audits。
参考资料
lighthouse 架构图SI指标说明FCP指标说明TTI指标说明TBT指标说明LCP指标说明CLS指标说明Puppeteer 中文文档Gather部分源码Lighthouse Audit源码Audit函数字段说明Node module使用
