自动化 Web 性能优化分析方案

原创不易，但愿能关注下咱们，再顺手点个赞~~

本文首发于政采云前端团队博客： 自动化 Web 性能优化分析方案

在构建 Web 站点的过程当中，任何一个细节都有可能影响网站的访问速度。若是开发人员不了解前端性能相关知识，不少不利网站访问速度的因素会在线上造成累加，从而严重影响网站的性能，致使网站访问速度变慢、用户体验低下，最终致使用户流失。页面性能对网页而言，可谓举足轻重。所以，对页面的性能进行检测分析，是开发者不可忽视的课题。那么咱们如何对页面进行监控分析及性能评判？对性能评判的规则又是什么样的呢？

从技术方面来说，前端性能监控主要分为两种方式，一种叫作合成监控（Synthetic Monitoring，SYN），另外一种是真实用户监控（Real User Monitoring，RUM）。

• 合成监控，就是在一个模拟场景里，去提交一个须要作性能检测的页面，经过一系列的工具、规则去运行你的页面，提取一些性能指标，得出一个性能报告。

• 真实用户监控，就是用户在咱们的页面上访问，访问以后就会产生各类各样的性能数据，咱们在用户离开页面的时候，把这些性能数据上传到咱们的日志服务器上，进行数据的提取清洗加工，最后在咱们的监控平台上进行展现的一个过程。

前者注重 ”检测“，后者注重”监控“。

下文将从多个方面，向你们介绍政采云前端 ZooTeam 的 Web 性能优化分析系统—— “百策”，是如何采集页面性能数据，并经过一系列计算加工，产出页面性能报表的。

百策，取名自历史人物魏征。魏征，字玄成。唐太宗李世民的谏臣，因勇于直谏，被称为诤臣。因屡次指出台唐太宗李世民的过错并能提出有效政策，由于被称为 “魏百策”。

如何采集页面性能数据

百策系统采用了上文提到的 “合成监控” 的方案，获得了一组与宿主环境无关的性能数据。说到合成监控方案，当属 Google Chrome 团队出品的开源自动化分析工具 Lighthouse。

Lighthouse 的工做流程有几个主要的步骤。部分步骤发生在浏览器中，其他的步骤由 Lighthouse 运行器执行。

Lighthouse 工做原理

下面是 Lighthouse 的组成部分：

• 驱动 和 Chrome Debugging Protocol 进行交互。
• 收集器  使用驱动程序收集网页信息。最小化后处理。收集器的输出结果被称为 Artifact。
• 审查器 将 Artifact 做为输入，审查器会对其运行 1 个测试，而后分配经过/失败/得分的结果。
• 类别   将审查的结果分组到面向用户的报告中（如最佳实践）。对该部分加权求和而后得出评分。

简单来讲流程就是：创建链接 -> 收集日志 -> 分析 -> 生成报告。

而咱们的百策系统是在 Lighthouse 的基础上，进行了部分功能的定制和创新。

区别于 Lighthouse 的功能

1）使用 Puppeteer

Puppeteer 是一个 Node 库，它提供了一个高级 API 来经过 DevTools 协议控制 Chromium 或 Chrome。相比较 Selenium 或是 PhantomJs ，它最大的特色就是它的 DOM 操做能够彻底在内存中进行模拟，即在 V8 引擎中处理而不打开浏览器，并且 V8 引擎 Chrome 团队在维护，会拥有更好的兼容性和前景。

运行下面这段代码就能获取到视窗可视区域的宽高：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  });

  console.log('Dimensions:', dimensions);

  await browser.close();
})();
复制代码

Lighthouse 的方案是使用更底层的 DevTools 协议和浏览器交互，咱们选择 Puppeteer 是由于其更简单，封装的一些经常使用的接口足够知足咱们的需求。

2）访问页面前模拟登陆

咱们不只须要检测可匿名访问的前台页面，也须要检测登陆后才能操做的后台页面。因此在检测前，咱们须要增长一步登陆操做。固然这个用户名密码也是可选的，当检测到这个 URL 须要登陆时，才会提醒用户输入用户名密码。

3）收集到数据存入数据库

咱们将每一次的检测数据保存入库，对数据进行整理，获取页面性能变化所呈现的趋势，为支持后续的统计分析提供数据保证。

改造以后的流程是：创建链接 -> 登陆检测 -> 收集日志 -> 数据入库 -> 分析 -> 生成报告

如何分析页面性能

定制各项指标

系统设计初期，咱们拟定了一系列性能指标的权重和阈值：

Lighthouse 也制定了不少性能指标，譬如：

• uses-webp-images：采用新一代格式提供图片
• dom-size：DOM 节点总数
• network-requests：页面加载完成时的请求数
• …...

除此以外咱们定制了更多的特点指标，譬如：OSS 图片是否使用了压缩后缀。

因为公司的图片都是放在阿里云 OSS 上的，阿里云 OSS提供了很方便的优化图片体积的方法，就是给图片的末尾加上相似参数 ?x-oss-process=image/resize,w_187/quality,Q_75/format,webp，理论上放在 OSS 上的图片都须要添加压缩后缀。为何说是理论上呢？由于咱们发现若是图片上传 OSS 前，事先通过了其余压缩工具的压缩，再添加压缩后缀后，图片的体积变化不大，甚至会出现负增加。因此咱们调整了评审算法，再也不是简单地检查图片是否增长了 OSS 后缀，而是比较当前图片的体积与添加 OSS 压缩后缀后体积的差值是否超出比例。

定制检测模型

检测系统试运行一段时间后，咱们发现并非全部的指标都适用于全部类型的页面。譬如咱们的前台页面加载图片不少且对图片分辨率要求较高、然后台页面图片则比较少。咱们既有传统的后端渲染 + jQuery 类型的页面、客户端渲染 React 页面、也有通过预渲染的 Vue 页面。

将全部类型的页面按同一标准进行检测显然不太合适，因此咱们引入了 检测模型 的概念。咱们根据页面所属的类型，按照对应检测模型进行性能检测。一个检测模型能够关联多个指标，并能够配置指标权重和级别。

权重越大扣分越多，级别分为 error 和 warning，其中 warning 级别的扣分项不算入总分中，譬如请求是否使用 Gzip 就是，由于这一项是前端没法优化的，须要推进服务端去改进。

计算页面评分

提供优化建议和趋势

优化建议

针对每项扣分的审查项，咱们都提供了详细的扣分缘由，以及对应的解决方案：

页面性能趋势变化图

除了开发新的功能，咱们还积极地对老页面进行重构，为了分析重构先后的收益，咱们还提供了查询历史数据和变化趋势的功能：

总结

百策系统为前端页面提供性能优化分析服务，结合行业方案及业务场景的差别性，完善符合公司业务状况的最佳实践，百策系统制定了一套 Web 页面性能的检测标准，经过页面检测及模型分析，发现页面中请求耗时过长、请求资源过大、页面结构不合理等影响用户体验的问题，并针对问题提供相应的优化建议，帮助开发者产出渲染速度更快、资源占有更少、体验更好的页面。

后续，咱们还会对 “百策系统” 进行系列分享，欢迎你们先关注微信公众号 “政采云前端团队”，或者掘金上关注 “政采云前端团队”，以便第一时间获取最新信息。分享预告：

• 《爬虫实战：模拟用户登陆抓取页面性能数据》
• 《初识 NestJS：不用写 SQL 我也能开发后台》
• 《文档站点：不用 Gitlab CI 搭建持续集成的文档站点》
• 《图片体积优化：四舍五入我为公司节省一个亿》
• 《Node 性能优化：我是如何懵逼应对 Node 定时批量任务爆栈的》

招贤纳士

招人，前端，隶属政采云前端大团队（ZooTeam），50 余个小伙伴正等你加入一块儿浪～ 若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变“5年工做时间3年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手参与一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给ZooTeam@cai-inc.com

推荐阅读

前端工程实践之可视化搭建系统（一）

看完这篇，你也能把 React Hooks 玩出花

自动化 Web 性能优化分析方案