作者：谢维
阅读时间：15~20 min
背景
Now交友运营活动此前主要注重提升开发效率，在性能优化这块有所欠缺。近期在Now交友的常规活动项目中尝试接入了PWA-PLUS方案和Aegis测速方案，并在Now交友周年庆个人赛活动中上线验证，本文整理了接入效果对比和数据分析，并总结接入心得和问题，供大家参考。
PWA-PLUS方案是我们团队针对PWA技术提出的一套性能优化方案，可以利用
ServiceWorker的能力对页面加载资源进行缓存，提升页面加载性能。(目前仅在腾讯内部开源，后期会开源)
Aegis则是我们团队开源的一站式前端监控平台，涵盖了日志上报，错误监控，性能监控，资源测速等功能。“首屏渲染时间” 的计算大多数时候是依靠人工打点，但Aegis提供了一种“无打点测速上报”的思路，可以简化测速上报的开发。
接入项目：NOW交友常规活动 应用场景：NOW独立版交友房间挂件及活动页 接入方案：PWA-PLUS-CSR（前端本地渲染）及Aegis测速（无打点测速上报）
接入前后效果对比
因为PWA接入是在NOW交友周年庆活动上线后进行的，采用了逐步接入的方式，以保证不对现网造成异常影响。
活动于9月12日上线，9月29日后下线，期间于9月18日接入Aegis测速，9月20日接入PWA-PLUS静态资源缓存，9月24日接入PWA-PLUS非直出HTML缓存。
下面是针对不同阶段的数据对比分析。
首屏耗时
| 接入前(ms) | 接入后(ms) | 提升百分比 | |
|---|---|---|---|
| 仅缓存静态资源 | 2600+ | 2400+ | 大约8% |
| 完整CSR方案(加上接入HTML缓存) | 2600+ | 2000+ | 20+% |
从测速数据的变化趋势来看，接入PWA-PLUS方案后，首屏耗时呈减少趋势，大约提升了20%+(500ms左右)。
静态资源耗时
| 接入前(ms) | 接入后(ms) | 提升百分比 | |
|---|---|---|---|
| 接入静态资源缓存 | 400+ | 300+ | 大约25% |
附Aegis测速对静态资源耗时测速数据一览(活动中间有休赛期，这里举一些有效日期的数据)：
| 日期 | 请求成功率 | 平均速度 |
|---|---|---|
| 09-18 | 99.97% | 400ms+ |
| 09-20 | 99.98% | 350ms+ |
| 09-21 | 100% | 280ms+ |
通过分析数据，接入了PWA-PLUS方案后对静态资源耗时有不错的优化，提升百分比大概是25%。
因为当前Now交友常规活动的挂件和活动页在一个统一项目下的，所以在加载挂件后，活动页的静态资源可以被缓存。但是后面Now交友活动开始采用多挂件模式，挂件项目会独立出来，这样的话，挂件的离线包与活动页离线包不同，做不到提前缓存活动页资源，但PWA-PLUS的二级页面缓存方案却可以做到，这是优于离线包方案的一个点。
ServiceWorker上报
PWA的覆盖率也是一个比较关注的问题，对于Now交友房间内H5页面的场景，统计的ServiceWorker上报数据如下：
| 百分比 | |
|---|---|
| SW支持率 | 70%+ |
| SW注册成功率 | 90%+ |
| SW命中缓存率 | 90%+ |
可以看到PWA的整体覆盖率已经比较高了，能够覆盖大部分的用户。
PS: 这里的SW命中缓存率上报的是JS的命中率，HTML缓存命中率需要特殊打点，这次未加上
PWA-PLUS接入心得
PWA-PLUS的接入不是很复杂，具体接入方式可以参考PWA-PLUS官方文档（后期会开源）。
本项目采用是PWA-PLUS的CSR方案(前端本地直出渲染方案)，方案的原理在PWA-PLUS分享和官网都有阐述，这里不再赘述。
下面分享一下接入心得，供大家参考：
- 构建改造
pwa-plus-plugin是PWA-PLUS提供的用于为项目构建出sw.js的webpack插件，其中配置有很多参数，要根据实际项目情况调整
Now交友常规活动项目的构建配置伪代码：
- 数据上报
参考
PWA数据上报推荐上报项做的PWA数据上报：
这里没有对不同操作系统作区分，如果需要分别统计iOS和android的情况，此处上报代码应相应调整
- HTML缓存处理 启用CSR的缓存方案需要对HTML缓存时机和使用进行特殊处理，这里的代码改造如下：
Aegis测速接入心得
为了验证接入PWA方案后的优化效果，一定要完善项目的测速上报。
正好Aegis近期做了测速上报相关的功能，而且接入比较简单，Now交友常规运营活动项目此前也没有接其他测速，就果断尝鲜采用了Aegis的测速方案。
Aegis测速方案的接入同样很简单。
详细接入方式参考Aegis官方文档，本项目接入过程如下：
-
package.json依赖最新的Aegis SDK 最新的Aegis SDK提供了无打点测速上报能力
-
修改Aegis初始化代码 主要有关注两个点，一是尽可能早的初始化Aegis对象，二是配置启用测速上报能力
-
在Aegis管理平台查看测速数据 在项目上线后，就可以在Aegis管理平台查看到相关的测速信息。 3.1. 页面测速
3.2. 接口测速
3.3. 静态资源测速
从页面测速、接口测速和静态资源测速3个维度，基本满足对前端性能监控的诉求，针对不同方面，分别进行优化是个很好的思路。比如页面测速优化可以采用一些缓存方案(如PWA缓存方案)，接口测速则关注如何提升后台服务能力，静态资源测速要考虑是否使用了CDN，CDN的使用是否正确等等。
总结及规划
总结
- PWA-PLUS方案有效提升了页面的加载速度，在本案例中，提升性能大约20%+(500ms左右)。
- Aegis无打点测速方式大大简化了页面测速上报的难度。
- 运营活动中挂件和活动页是典型的二级关联场景，很适合采用二级页面缓存方案
规划
- 完善PWA上报，分别统计iOS和android的数据
- 在适用的场景启用二级页面缓存方案
- 接入并验证SSR方案
PWA-PLUS方案为前端性能优化提供了一个新的选择，那么PWA-PLUS方案具体是如何利用PWA能力实现性能优化的呢？请期待下一篇推送，pwa-plus架构篇。
关注【IVWEB社区】公众号获取每周最新文章，通往人生之巅！