乐趣区

关于前端:搭建自动化-Web-页面性能检测系统-设计篇

jiezi

咱们是袋鼠云数栈 UED 团队，致力于打造优良的一站式数据中台产品。咱们始终保持工匠精力，摸索前端路线，为社区积攒并流传教训价值。。

本文作者：琉易 liuxianyu.cn

页面性能对于用户体验、用户留存有着重要影响，当页面加载工夫过长时，往往会随同着一部分用户的散失，也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素，也是一个网站口碑的重要评判规范。

一、名称解释

前端监控个别分为合成监控和实在用户监控。

1.1、合成监控

合成监控就是模仿用户的应用场景，拜访一个页面，通过一些工具和规定去检测页面，提取一些性能指标，生成一份检测报告，重视检测。

合成监控的优缺点：

长处 毛病
实现简略，社区计划成熟 配置简单，不能齐全还原用户实在场景
能采集到更丰盛的数据 登录等场景须要独自解决
不影响实在用户的页面拜访性能 单次检测数据不够精确

1.2、实在用户监控

实在用户监控是指用户在页面上拜访，拜访时会产生各类性能数据，在用户拜访进行的时候，将这些性能数据传输到服务端，进行数据整顿剖析的过程，重视监控。

实在用户监控的优缺点：

长处 毛病
齐全还原用户实在场景 对用户的拜访性能有肯定影响
登录等场景无需独自解决 无奈采集残缺的资源加载瀑布图
数据样本足够大且实在，数据价值高 无奈可视化展现页面加载过程

1.3、定义适合的性能指标

  1. 首次内容渲染时长（First Contentful Paint, FCP）
    页面最新呈现的内容渲染时长
  2. 首次展示平均值（Speed Index, SI）
    页面内容可见填充的速度
  3. 最大内容绘制工夫（Largest Contentful Paint, LCP）
    页面核心内容出现工夫，不采纳 loading 状态的数据
  4. 可交互工夫（Time to Interactive, TTI）
    用户是否会体验到卡顿
  5. 总阻塞工夫（Total Blocking Time, TBT）
    主线程被阻塞的工夫，无奈作出输出响应
  6. 累计布局款式偏移（Cumulative Layout Shift, CLS）

二、为什么做

基于须要对公司的 Web 产品进行性能优化，在做性能优化的同时，优化的衡量标准也不可或缺。在页面开发时察看页面的性能并不够精确，因为不同的开发设施性能体现不同，所随同的变量也较多，不可能精确的反映性能优化成果，也无奈察看产品的性能变化趋势。为什么自研呢，自研有以下益处：

（1）借助第三方的性能检测服务往往不能保障检测数据的安全性。

（2）第三方的性能检测服务个别无奈与公司外部零碎买通流程，个别无奈自动化检测公司外部产品。

（3）能够做一些自定义开发，比方依据产品特点调整不同的性能指标权重，从而更精确的计算分数。

那么在检测收集到了这么多的指标数据后，页面性能到底如何呢，如果你的老板问你公司的产品页面性能如何，你该如何回复呢？假如列举一大堆工夫指标、偏移量等数据，老板看到这些数值的时候可能就是一头雾水，基本了解不了产品的页面性能到底如何。那么自研能够针对产品类型，给出一个对立的规范，这样就不便去比照各个产品的性能体现了。

三、怎么做

3.1、根底依赖

上面是检测零碎的整体架构：

这里设计的性能检测零碎次要蕴含前端页面和服务端，其中：

前端页面展现性能检测入口、检测后果、性能趋势、性能排行榜等。

服务端基于 Nestjs + Lighthouse + Puppeteer 实现，通过 Typeorm 操作 MySQL 数据库，记录和查问性能检测数据。

另外辅助一些插件进行定时监测、后果告诉等操作，实现自动化检测，相比页面开发时通过开发者工具中的 Lighthouse 检测有以下益处：

（1）不必开发者被动触发；

（2）不会阻塞开发过程，无需期待；

Lighthouse 用于检测 Web 网页的性能，次要基于 4 个次要步骤实现，别离是交互驱动、性能数据收集、审计整顿以及记录。具体为：

（1）用户在性能检测入口输出待检测的页面地址，点击开始检测，页面通过接口调用性能检测服务

（2）Lighthouse 遍历以后页面的收集器办法并合成一个总的收集器办法以便于采集数据

（3）对上述采集到的性能数据进行计算和评分

Lighthouse 次要提供六个收集器，通过以下六个收集器即可采集到和理论拜访靠近的性能数据，每个收集器的性能不一，如下：

（1）收集 DOM 元素相干数据、DOM 节点最大深度、滚动条等

（2）收集页面内的所有图片资源，并记录下每个图片元素的宽高和定位等属性

（3）收集相干指标，如：FCP、LCP、CLS 等

（4）收集 JS 事件监听数量、JS 堆栈等

（5）收集页面的所有申请，包含状态码、申请头、响应头、申请形式等

（6）收集 window.performance 下的性能数据，用于计算加载工夫

Puppeteer 是 Chrome 团队提供的一个无界面 Chrome 工具，俗称无头浏览器，通过提供的 API 能够管制 Node 端的 Chrome 工具进行指定的操作。在这里设计的性能检测零碎中，因为 Lighthouse 进行检测时关上的相似于无痕窗口，没有登录信息，所以 Puppeteer 次要帮忙咱们实现模仿登录。

当检测页面须要登录时，剖析出页面属于哪个 devops 实例，而后通过 Puppeteer 跳转到对应的登录页面，而后输出用户名、明码、验证码，待登录实现后跳转至正确的页面，再进行页面性能检测。如果登录后还在登录页，示意登录失败，则获取谬误提醒并抛出。

以下是检测零碎的一个流程图：

3.2、要害代码 

// 开始检测
async run(urlDto: UrlDto): Promise<object> {const start = new Date().getTime();
    try {const { url, loginUrl} = urlDto;
        const needLogin = url.includes('devops') || loginUrl;
        console.log(` 本次检测 ${needLogin ? '':' 不 '} 须要登录 `, url);

        const runResult = needLogin
            ? await this.withLogin(urlDto)
            : await this.withOutLogin(url);

        // 保留检测后果文件，便于预览
        const urlStr = url.replace(/http(s?):\/\//g, '').replace(/\//g,'');
        fs.writeFileSync(`./static/${urlStr}-report.html`, runResult?.report);

        // 性能数据
        const performance = runResult?.lhr?.categories?.performance || {};
        const data = {
            ...performance,
            auditRefs: performance?.auditRefs?.filter((item) => item.weight),
        };
        // console.log(data);
        console.log(` 本次耗时：${((new Date().getTime() - start) / 1000).toFixed(2)}s`);

        return {
            code: 200,
            data,
            message: ` 耗时：${((new Date().getTime() - start) / 1000).toFixed(2)}s`,
        };
    } catch (error) {
        return {
            code: 401,
            message: error,
        };
    }
}

3.3、检测规定

零碎除了反对手动输出网页地址检测，也反对自动检测。为了便于统计每个子产品的实在体现，每天凌晨自动检测 10 次，去掉最高分，去掉最低分，从其余分数中抉择中位数作为每天的检测评分。

性能检测时的数据采集可能因为网页服务的不稳定性，导致有偏大或偏小的数据，所以提供某个时间段某个指标的直方图来剖析数据的基本特征。也会提供某个产品的整体分数趋势，便于统计某个时间段内该产品的性能变动，也能够提现性能优化前后的成果。

四、写在前面

这篇文章简略介绍了下该性能检测零碎的初步设计、一些页面性能的概念以及采纳的技术点，后续请关注《搭建自动化 Web 页面性能检测零碎 —— 实际篇》。

最初

欢送关注【袋鼠云数栈 UED 团队】~
袋鼠云数栈 UED 团队继续为宽广开发者分享技术成绩，相继参加开源了欢送 star

  • 大数据分布式任务调度零碎——Taier
  • 轻量级的 Web IDE UI 框架——Molecule
  • 针对大数据畛域的 SQL Parser 我的项目——dt-sql-parser
  • 袋鼠云数栈前端团队代码评审工程实际文档——code-review-practices
  • 一个速度更快、配置更灵便、应用更简略的模块打包器——ko
退出移动版