南昌中小企业网站制作,广告推广渠道,wordpress保存帖子数据库,建设工程信息比较好的网站页面性能对于用户体验、用户留存有着重要影响#xff0c;当页面加载时间过长时#xff0c;往往会伴随着一部分用户的流失#xff0c;也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素#xff0c;也是一个网站口碑的重要评判标准。
一、名称解释
前端监控…页面性能对于用户体验、用户留存有着重要影响当页面加载时间过长时往往会伴随着一部分用户的流失也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素也是一个网站口碑的重要评判标准。
一、名称解释
前端监控一般分为合成监控和真实用户监控。
1.1、合成监控
合成监控就是模拟用户的使用场景访问一个页面通过一些工具和规则去检测页面提取一些性能指标生成一份检测报告注重检测。
合成监控的优缺点
优点缺点实现简单社区方案成熟配置复杂不能完全还原用户真实场景能采集到更丰富的数据登录等场景需要单独处理不影响真实用户的页面访问性能单次检测数据不够准确
1.2、真实用户监控 真实用户监控是指用户在页面上访问访问时会产生各类性能数据在用户访问停止的时候将这些性能数据传输到服务端进行数据整理分析的过程注重监控。
真实用户监控的优缺点
优点缺点完全还原用户真实场景对用户的访问性能有一定影响登录等场景无需单独解决无法采集完整的资源加载瀑布图数据样本足够大且真实数据价值高无法可视化展示页面加载过程
1.3、定义合适的性能指标
首次内容渲染时长First Contentful Paint, FCP 页面最新出现的内容渲染时长首次展现平均值Speed Index, SI 页面内容可见填充的速度最大内容绘制时间Largest Contentful Paint, LCP 页面核心内容呈现时间不采用 loading 状态的数据可交互时间Time to Interactive, TTI 用户是否会体验到卡顿总阻塞时间Total Blocking Time, TBT 主线程被阻塞的时间无法作出输入响应累计布局样式偏移Cumulative Layout Shift, CLS 二、为什么做
基于需要对公司的 Web 产品进行性能优化在做性能优化的同时优化的衡量标准也不可或缺。在页面开发时观察页面的性能并不够准确因为不同的开发设备性能表现不同所伴随的变量也较多不能够准确的反映性能优化效果也无法观察产品的性能变化趋势。为什么自研呢自研有以下好处
1借助第三方的性能检测服务往往不能保证检测数据的安全性。
2第三方的性能检测服务一般无法与公司内部系统打通流程一般无法自动化检测公司内部产品。
3可以做一些自定义开发比如根据产品特点调整不同的性能指标权重从而更准确的计算分数。
那么在检测收集到了这么多的指标数据后页面性能到底如何呢如果你的老板问你公司的产品页面性能如何你该如何回复呢假设列举一大堆时间指标、偏移量等数据老板看到这些数值的时候可能就是一头雾水根本理解不了产品的页面性能到底如何。那么自研可以针对产品类型给出一个统一的标准这样就方便去对比各个产品的性能表现了。
三、怎么做
3.1、基础依赖
下面是检测系统的整体架构 这里设计的性能检测系统主要包含前端页面和服务端其中
前端页面展示性能检测入口、检测结果、性能趋势、性能排行榜等。
服务端基于 Nestjs Lighthouse Puppeteer 实现通过 Typeorm 操作 MySQL 数据库记录和查询性能检测数据。
另外辅助一些插件进行定时监测、结果通知等操作实现自动化检测相比页面开发时通过开发者工具中的 Lighthouse 检测有以下好处
1不用开发者主动触发
2不会阻塞开发过程无需等待
Lighthouse 用于检测 Web 网页的性能主要基于 4 个主要步骤实现分别是交互驱动、性能数据收集、审计整理以及记录。具体为
1用户在性能检测入口输入待检测的页面地址点击开始检测页面通过接口调用性能检测服务
2Lighthouse 遍历当前页面的收集器方法并合成一个总的收集器方法以便于采集数据
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): Promiseobject {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 次去掉最高分去掉最低分从其余分数中选择中位数作为每天的检测评分。
性能检测时的数据采集可能因为网页服务的不稳定性导致有偏大或偏小的数据所以提供某个时间段某个指标的直方图来分析数据的基本特征。也会提供某个产品的整体分数趋势便于统计某个时间段内该产品的性能变化也可以提现性能优化前后的效果。
