性能检测网页核心的性能指标应该是随着时间的推移而不断演变的。当前 2020 年主要关注用户体验的三个方面——加载、交互性

性能的度量

RAIL模型

Response：100ms内响应用户任何输入
Animation：每帧动画在16ms内完成
Idle：最大化空闲时间，空闲时间内执行的任务尽量控制在50ms以内
Load：1s内加载完成我们的站点

PWA（渐进式web应用）

以用户体验为中心的度量标准

FCP：首次内容绘制时间
LCP：最大内容绘制时间
FID：首次输入延迟
TTI：页面可交互时间
TBT：主线程累计阻塞时间
CLS：累计布局偏移

新一代 Web 性能体验和质量指标：core web vitals

大量的性能指标让我们无从下手？Google于2020年5月提出了core web vitals，目的就在于简化场景，降低学习成本，适用于所有web页面的核心指标：网页核心的性能指标应该是随着时间的推移而不断演变的。当前 2020 年主要关注用户体验的三个方面——加载、交互性和视觉稳定性。

Google计划于2021年将core web vitals作为网络排名算法的一个因子。

web-vitals

性能监控的两架马车

从技术方面来讲，前端性能监控主要分为两种方式，一种叫做合成监控，另一种是真实用户数据监控。

两种监控方式各有优缺点，选取那种方式取决于你的目的，合成监控更多的是为了提高页面能性能，并且针对页面中性能欠缺的地方提出一些指导性建议。

合成监控在业界的实践

1、lighthouse（Google）

2、百策（政采云团队）

如何实现合成监控

业务模型

1、分析业务痛点

面向的对象
使用场景
收集用户吐槽点 2、不同的业务采用不同的检测模型
前台导购页
中台表单页

技术实现

1、整体架构：

2、实现思路：

const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const {URL} = require('url');

(async() => {
const url = 'https://www.chromestatus.com/features';

// 启动puppeteer，在后台生成一个不可见的浏览器
const browser = await puppeteer.launch({
  headless: false,
  defaultViewport: null,
});

// 注册钩子函数，等待页面打开后收集性能数据
browser.on('targetchanged', async target => {
  const page = await target.page();
  if (page && page.url() === url) {
    do something
  }
});

// lighthouse打开页面
const {lhr} = await lighthouse(url, {
  port: (new URL(browser.wsEndpoint())).port,
  output: 'json',
  logLevel: 'info',
});

console.log(`Lighthouse scores: ${Object.values(lhr.categories).map(c => c.score).join(', ')}`);

await browser.close();
})();

性能优化建议

收集整理业界的性能优化建议，针对不同的性能问题，给出改进的建议。形成自己团队的一个文库

结语

通过一个性能监控系统，让开发者可以清楚的知道：页面有什么问题？该怎么改？

性能检测