在网站建设过程中，任何一个细节都可能影响网站的访问速度。如果开发者不了解前端性能方面的知识，很多不利于网站访问速度的因素就会在线上积累，严重影响网站的性能，导致网站访问速度变慢，用户体验变差，最终导致用户流失。页面性能对于网页来说非常重要。因此，测试和分析页面的性能是开发者不可忽视的课题。那么我们如何监控、分析和判断页面的性能呢？绩效评估的规则是什么？从技术角度来说，前端性能监控主要分为两种方式，一种叫综合监控（SYN），一种叫真实用户监控（RUM）。综合监控就是提交一个需要在模拟场景下进行性能测试的页面，通过一系列的工具和规则运行你的页面，提取一些性能指标，绘制出性能报告。真实用户监控是指当用户浏览我们的页面时，在浏览过程中会产生各种性能数据。我们将这些性能数据上传到我们的日志服务器进行数据提取、清洗和处理，最后在我们的A进程中展示在监控平台上。前者侧重于“检测”，后者侧重于“监控”。下面将介绍正财云前端“百测”ZooTeam的网页性能优化分析系统如何从多方面采集页面性能数据，通过一系列的计算和处理生成页面性能报告。百策，以历史人物魏征命名。魏征，字宣诚。唐太宗李世民的谏臣，因敢于直言，故称谏臣。因多次指出唐太宗李世民的错误，提出行之有效的政策，被称为“魏百策”。如何采集页面性能数据百测系统采用了前文提到的“综合监测”方案，获取一组与宿主环境无关的性能数据。说到综合监控解决方案，那就是谷歌浏览器团队出品的开源自动化分析工具Lighthouse。Lighthouse工作流程有几个主要步骤。一些步骤发生在浏览器中，其余步骤由Lighthouserunner执行。Lighthouse的工作原理以下是Lighthouse的组件：驱动程序与Chrome调试协议交互。Collector使用驱动程序来收集网页信息。尽量减少后处理。收集器的输出称为Artifact。检查员将工件作为输入，检查员对其运行1次测试，然后分配通过/失败/分数结果。Category将审查结果分组为面向用户的报告（例如最佳实践）。对这些部分进行加权和求和以得出分数。简单来说，流程就是：建立连接->收集日志->分析->生成报告。我们的百泽系统在Lighthouse的基础上，对一些功能进行了定制和创新。与Lighthouse不同的特点1）使用PuppeteerPuppeteer是一个Node库，它提供了一个高级API，通过DevTools协议来控制Chromium或Chrome。与Selenium或PhantomJs相比，它最大的特点是它的DOM操作可以完全模拟在内存中，即在不打开浏览器的情况下在V8引擎中处理，V8引擎Chrome团队正在维护它，这将有更好的配伍性和前景。运行以下代码获取窗口可见区域的宽高：constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto('https://example.com');constdimensions=awaitpage.evaluate(()=>{return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight};});console.log('Dimensions:',dimensions);awaitbrowser.close();})();复制代码Lighthouse的解决方案是使用更底层的DevTools协议与浏览器进行交互。我们选择Puppeteer是因为它比较简单，封装了一些常用的接口，足以满足我们的需求。2）访问页面前模拟登录我们不仅要检测可以匿名访问的前台页面，还要检测登录后才能操作的后台页面。所以在检测之前，我们需要添加一个登录操作。当然，用户名和密码也是可选的。当检测到该URL需要登录时，会提示用户输入用户名和密码。3)采集到的数据存储在数据库中。我们将每一次检测数据存储在数据库中，对数据进行整理，获取页面性能变化趋势，为支持后续统计分析提供数据保障。改造后的流程是：建立连接->登录检测->收集日志->数据存储->分析->生成报告如何分析页面性能自定义各种指标在系统设计初期，我们制定了一系列权重以及性能指标的权重Threshold：Lighthouse也制定了很多性能指标，比如：uses-webp-images：提供新一代格式的图片dom-size：DOM节点总数network-requests：页面打开时的请求数isloaded...另外，我们自定义添加了更多的特征指标，比如：OSS镜像是否使用了压缩后缀。由于公司的图片都放在了阿里云OSS上，阿里云OSS提供了一个非常方便的优化图片大小的方法，就是在图片末尾添加一个类似的参数?x-oss-process=image/resize,w_187/quality,Q_75/format,webp，理论上所有放在OSS上的图片都需要加压缩后缀。为什么是理论上的？因为我们发现如果图片在上传到OSS之前经过其他压缩工具压缩，加上压缩后缀，图片的大小不会有太大的变化，甚至会出现负增长。因此，我们调整了审核算法，不再简单地检查图片是否有OSS后缀，而是将当前图片的体积与添加OSS压缩后缀后的体积进行比较，看差异是否超过比例。自定义检测模型在试运行了一段时间的检测系统后，我们发现并不是所有的指标都适用于所有类型的页面。比如我们前台页面加载的图片比较多，对图片分辨率要求高，而后台页面图片比较少。我们既有传统的后端渲染+jQuery类型的页面，也有客户端渲染的React页面，也有预渲染的Vue页面。按照同一个标准来检测所有类型的页面显然是不合适的，所以我们引入了检测模型的概念。根据页面的类型，我们根据相应的检测模型进行性能检测。一个检测模型可以关联多个指标，可以配置指标的权重和等级。权重越大，扣分越多。级别分为错误和警告。警告级别扣分不计入总分。例如，请求是否使用Gzip。因为这个item前端无法优化，需要推送到服务器。提升。页面得分计算提供优化建议和趋势优化建议对于每一个扣分的评论项，我们都提供详细的扣分原因和相应的解决方案：页面性能趋势变化图除了开发新功能，我们也在积极重构旧功能页面，为了分析重构前后的收益，我们还提供了查询历史数据和变化趋势的功能：总结最佳策略系统为前端页面提供性能优化分析服务，结合两者的差异行业解决方案和业务场景，为完善符合公司业务情况的最佳实践，BestCareSystem制定了一套网页性能测试标准。通过页面测试和模型分析，发现页面中请求耗时过长、请求资源过大、页面结构不合理等影响用户体验的问题，并提供相应的优化建议，帮助开发者制作渲染速度更快，资源占用更少，体验更好的页面。
