几十亿pv的大型春节活动页前端要怎么做(进场篇)

·  阅读 3156
几十亿pv的大型春节活动页前端要怎么做(进场篇)

本文是azuo和萌妹俩技术创作之旅的第11篇原创文章,内容创作@azuo😄,精神支持@大头萌妹😂

  • 前言:我曾有幸在参加过手机QQ平台上的春节抢福袋红包活动项目,并负责该活动的主场景H5页面的前端开发工作。就如何完成一个几十亿PV的大型活动的前端开发,会遇到了哪些困难,又是怎样解决的呢?笔者将这段艰难又有趣的令人难以释(忘)怀的毒打(开发)经历,整理成系列文章,欢迎读者阅读。

一、项目背景

手机QQ作为国民APP,每逢春节都会搞一个大型平台活动来供QQ用户愉快地玩耍。这些大型活动在往年是以客户端原生界面作为主入口承接页面,但是在2019年QQ春节红包活动开发却首次以H5形式作为春节红包活动主场景的承载页。

承载页主要提供各个领取福袋的专场活动的入口,特点峰值并发流量高(预估峰值流量 4631Gbps),并且动画丰富(7个动画区域作为入口,来吸引用户点击)。

Jietu20220814-230515-HD.gif

本文将分享用户在客户端聊天窗口(原生界面)下拉界面到活动主场景页面(H5)展示过程中,如何消除H5页面加载过程中白屏影响达到无缝衔接的效果?

二、H5尝试

主场景承载页是H5开发,如何解决页面打开前白屏问题是该活动遇到的第一个难题。

用户点击入口加载H5场景加载流程,如下:

加载.png

H5端侧能优化再有加载HTML、CSS、JS和动画素材这三个环节。但是,页面包体积不到1MB,优化空间已经很小,只能优化加载逻辑,但是,哪怕我们把CSS内联到HTML页面里,不加载JS和动画素材,首屏先展示一个静态页面,再进渐式地加载js脚本和动画素材后播放动画。

极简加载.png

H5端侧哪怕做出最大的努力,表现最好的 ios 端也要400毫秒的,白屏出现的时间,远超过一帧动画时间(大于20ms),视觉还是能感知。

H5在技术上是无法消除白屏问题!想要屏蔽的白屏影响达到进场流畅的效果,需要借助客户端的能力。

三、借助客户端

H5在技术上是无法消除白屏问题,想要加载过程流畅。屏蔽的白屏,需要借助客户端,由客户端来提供一个加载动画,盖在webview上,等webview加载完H5页面后再消失,H5页面就可以无缝的进场。

3.1 客户端执行流程

客户端并行执行动画播放和启动webview加载活动H5,在页面未完成首屏渲染完成时,在其webview上盖上一个loading动画,等页面完全渲染好了再置顶显示,整体流程如下:

客户端.drawio.png

3.2 通知客户端

通知客户端采取 JSBridge 方式来通知客户端,通知时机选择在页面顶部头图动画播放后,代码如下:

mqq.invoke('FD', 'H5NotifyWebviewShow', {ars: 1});
复制代码

3.3 兜底错误页

春节活动这种全民活动,为了防止闪崩的情况。我们还将一个简单的html页面内置到客户端的安装包中。作为loading动画长时间播放但有接受不到H5的移除事件后的一个错误兜底页面。

服务可用率要达到4个9(99.99%)。若有10亿访问量,错误页面的访问量: 1000000000 * (1-0.9999)= 10W 。在大流量压力下,一个错误页面也会有十几万的访问量,要非常谨慎!作为用户界面层,前端要兼容各端可发生一切的错误,保证好的用户体验。

兜底的错误页面是要预埋在客户端的安装包里,不需要网络也可以访问,但是不无法实时更新的。所以,错误页面的内容要精简不能包含太多具体的信息,并且错误提示通用,保证各种未不活的错误都可用。

四、效果展示

通过客户端和H5的通力合作,最终过渡效果,如下:

Jietu20220814-141813-HD.gif

(注意在聊天界面下拉后的效果)

五、下篇预告

本文已经讲解了消除白屏影响,H5页面进场达到如丝般柔滑。

能参与一个有几十亿浏览量的大型活动,作为程序员,我是非常幸运!感谢QQ平台带给我这段珍贵的经历!

在中国,大概有好几亿的人,ta的手机曾运行过我写的代码,ta的手机流量,我曾无意地浪费过,也曾竭尽全力来节省。正如你我也未曾相见~

下篇预告:在百万QPS流量并发下如何处理H5页的资源加载难题,揭秘大厂平台下的黑科技。(欢迎关注等更新😄)

收藏成功!
已添加到「」, 点击更改