自动化 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();})(); 

复制代码

本文转载自网络，原文链接：https://mp.weixin.qq.com/s/2CHA5ewWz_SIlBrdEuVv7w
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！