我们都知道Web性能关乎用户体验,进一步影响用户留存、转化率,显然用户体验不友好,最终导致流失。可见Web页面性能对用户和企业而言,可谓举足轻重。
因此,对Web页面的性能分析相关性能优化,是开发者不可忽视的工作环节。本篇文章将重点围绕在如何对微前端架构下的单页子应用进行Web性能分析展开。
微前端架构是指存在于浏览器中的微服务,微前端作为用户界面的一部分,通常由许多组件组成,并使用类似于React、Vue和Angular等框架来渲染组件。每个微前端下的子应用可以由不同的团队进行管理,并可以自主选择框架,独立开发、测试、部署等。
单页面应用SPA(Single Page web Application)指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口,一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转,就是切换相关组件,仅刷新局部资源。
Web 性能定义(来自MDN的解释)是客观的衡量标准,是用户对加载时间和运行时的直观体验,Web 性能指页面加载到可交互和可响应所消耗的时间,包括客观的度量如加载时间,每秒帧数和到页面可交互的时间;也包括用户的对页面内容加载时间的主观感觉。
谷歌认为之前的标准太复杂,指标太多了,在2020年重新进行了梳理,简化到了三个。
常用的Lighthouse、PageSpeed等工具都属于合成监控,这些工具采用 Web 浏览器模拟器来加载网页,通过模拟终端用户可能的操作来采集对应的性能指标,最后输出一个网站性能报告。包括首页白屏、首屏、可交互时间等性能指标和 SEO、PWA 等数据。
但是随着业务的发展,只关注首页性能已经远远不够满足用户体验。尤其是对B端需要登录的平台无法监控到
了解完合成监控工作原理后,会发现当用户在SPA 应用中改变路由后,浏览器会异步加载数据并更新组件状态渲染页面,而不是重新加载document,这时通过合成工监控工具测试性能,数据已经不在准确了。同理在微前端架构下的基座和子应用性能测试也变得更加困难和复杂。因为在微前端架构体系中,修改了页面路由后,会加载子应用重新渲染节点,主应用框架下最大元素不会再重新加载,所以测量加载时间的标准就改变了,而不是单独依靠标准的加载事件。
研发人员平时使用的都是在线分析工具,无法提供线下测试环境,通过chrome dev-tool的Perfomance进行分析,需要手动刷新,并手动记录,需要大量的重复工作,对于多平台测试需要本地安装各种浏览器和工具以及环境的搭建,这给研发人员带来许多额外的工作量,这时一款能够自动化测试的工具显得尤为重要。
前端页面性能测试本质上和本地应用性能测试类似,其性能和运行应用的设备的性能强相关,即运行被测系统的硬件性能越强,性能也越强。所以测试前端页面性能需要找到一个固定配置的硬件来测试其性能基线,然后通过这个基线推测或者计算其他硬件配置下的性能情况。
无法提供开发的过程中提供一个持续对一个固定配置的硬件进行性能测试的平台,无法判断性能在开发过程中趋势,从而第一时间发现性能问题。
在性能优化中,研发人员做完一项优化,如何知道这项优化是「正优化」还是「负优化」?这项优化对性能的提升贡献了多少?能不能通过简单的配置将这些优化数据持久化,并以大屏的形式展示出来。这时就需要一款性能统计分析工具来准确地解决。
虽然微前端项目和传统的SPA单页应用的在前端Web性能分析上有许多相似之处,但是在微前端架下存在子应用切换响应慢,子应用切换有闪动不流畅,子应用框架可能重复加载及多次执行,会导致首次加载资源增大,而且随着子应用数量增大重复加载的损耗就越多。尤其是涉及到父子应用和子应用之间通信,很难提前发现,造成严重的事故问题。
今天重点介绍的是Sitespeed.io开源的Web性能测试工具,上面说到现阶段的困境在这里都将很容易解决。
Sitespeed.io 是一款可监视和衡量网站前端性能的开源工具,该工具围绕:页面性能(Performance)、Web最佳实践(Web Best Practice)和可用性(Accessibility)三个核心指标进行打分,每个核心指标考核的内容可以在help.html文件中查找。页面中的其他指标,如文件压缩、文件大小、请求数、缓存时间、请求状态码、首次渲染时间、前端渲染用时、页面加载用时、DNS解析时长等,这些指标都有详细的统计。此外,它还与 Docker 引擎完美集成。
github:https://github.com/sitespeedio
官网地址:https://www.sitespeed.io/
官网提供npm和docker两种安装方式,在实际使用中发现通过docker安装和使用能够更大的发挥出sitespeed.io的优势,和带来更好的体验。
npm方式安装
npm install -g sitespeed.io
Docker方式安装
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:26.0.0 https://www.sitespeed.io/
在正式使用之前,我们先了解Sitespeed.io能干些什么,支持什么样式场景,以及生态的建设。
等等,更多的功能期待你去探索和了解,以下操作默认Sitespeed.io、docker、Grafana、Graphite等安装完成。
实战开始
module.exports = async function (context, commands) {
const By = context.selenium.webdriver.By
const webdriver = context.selenium.driver
// 未登录情况下跳转到sso地址页面Url
await commands.navigate(
"http://jagile.jd.com"
);
try {
await commands.cdp.send('Network.setCookie',{name:'sso.jd.com', value:'BJ.22CDA0282097A5AE0******20220927105709',domain:'.jd.com'});
//截个图,截图名称取为1,当然也可以不截图
await commands.screenshot.take("login1");
//打个日志,日志可以在命令行里面看到
context.log.info("日志:登录成功");
context.log.info("日志:打开行云首页");
//打开行云首页
await commands.measure.start("http://jagile.jd.com/myzone");
context.log.info("日志:打开行云应用中心");
// 等待10秒
await commands.wait.byTime(10000);
await commands.measure.start('module_center');
await webdriver.findElement(By.css('[data-menu-item-id="rootModuleCenter"]')).click()
await commands.measure.stop();
context.log.info("日志:打开神灯子应用");
// 等待10秒
await commands.wait.byTime(10000);
await commands.measure.start('shendeng');
await commands.click.bySelectorAndWait('body > div.app-root > section > section > main > section > main > div > div:nth-child(2) > div.settings-menu__grid > div:nth-child(4)');
await commands.measure.stop();
context.log.info("日志:查看一篇神灯文章")
// 等待10秒
await commands.wait.byTime(10000);
await commands.measure.start('shendeng-details');
await commands.click.bySelectorAndWait(' #sd-main > div > div > div > section.article_content.pageCommonStyle > div > section:nth-child(2)');
return await commands.measure.stop();
} catch (e) {
// We try/catch so we will catch if the the input fields can't be found
// The error is automatically logged in Browsertime an rethrown here
// We could have an alternative flow ...
// else we can just let it cascade since it caught later on and reported in
// the HTML
throw e;
}
};
jianshuangpeng@ZBMac-C02F2R9QM ~ docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:25.7.2 --preScript jagile_login.js http://jagile.jd.com -n 1 -b chrome --spa --multi
Google Chrome 104.0.5112.79
Mozilla Firefox 103.0
Microsoft Edge 104.0.1293.47
[2022-09-28 03:44:05] INFO: Versions OS: linux 5.10.104-linuxkit nodejs: v16.16.0 sitespeed.io: 25.7.2 browsertime: 16.13.2 coach: 7.1.2
[2022-09-28 03:44:05] INFO: Running tests using Chrome - 1 iteration(s)
[2022-09-28 03:44:06] INFO: Navigating to url http://jagile.jd.com iteration 1
[2022-09-28 03:44:14] INFO: 日志:登录成功
[2022-09-28 03:44:14] INFO: 日志:打开行云首页
[2022-09-28 03:44:14] INFO: Testing url http://jagile.jd.com/myzone iteration 1
[2022-09-28 03:44:27] INFO: Take after page complete check screenshot
[2022-09-28 03:44:28] INFO: Take cumulative layout shift screenshot
[2022-09-28 03:44:28] INFO: Take largest contentful paint screenshot
[2022-09-28 03:44:29] INFO: 日志:打开行云应用中心
[2022-09-28 03:44:39] INFO: Start to measure module_center
[2022-09-28 03:44:41] INFO: Take after page complete check screenshot
[2022-09-28 03:44:42] INFO: Take cumulative layout shift screenshot
[2022-09-28 03:44:42] INFO: Take largest contentful paint screenshot
[2022-09-28 03:44:43] INFO: 日志:打开神灯子应用
[2022-09-28 03:44:53] INFO: Start to measure shendeng
[2022-09-28 03:45:15] INFO: Take after page complete check screenshot
[2022-09-28 03:45:15] INFO: Take cumulative layout shift screenshot
[2022-09-28 03:45:16] INFO: Take largest contentful paint screenshot
[2022-09-28 03:45:17] INFO: 日志:查看一篇神灯文章
[2022-09-28 03:45:27] INFO: Start to measure shendeng-details
[2022-09-28 03:45:43] INFO: Take after page complete check screenshot
[2022-09-28 03:45:43] INFO: Take cumulative layout shift screenshot
[2022-09-28 03:45:44] INFO: Take largest contentful paint screenshot
......
......
[2022-09-28 03:46:30] INFO: HTML stored in /sitespeed.io/sitespeed-result/jagile.jd.com/2022-09-28-03-44-05
在查看详情的性能分页报告时,不经能够观察到个性能指标数据,还可以通过录制视频和关键帧图的方式查看。当然这里最重要是报告中给出了许多有价值的性能优化建议。
在COACH选项中,我们能够了解到需要针对性的优化建议。
下面sitespeed.io工具输出的html报告首页数据
1、Sitespeed优点:
2、Sitespeed.io原理和组件&作用:
3、Sitespeed.io测试执行过程:
4.Sitespeed.io最佳使用场景
欢迎评论指正!!!