新春集卡互动活动
为某全国连锁零售品牌打造的新春集卡活动，峰值扛住每秒三万次请求
Key Results
- 01
1240万
活动期 PV
- 02
3.1万 QPS
实测峰值
- 03
1.6秒
4G 环境首屏
- 04
0次
线上事故
01Challenge
客户面临的挑战
活动在除夕当晚开启，全国门店同时引导扫码。流量在开场十分钟内到达峰值，之后维持高位，没有任何缓冲余地。
客户往年的活动在这个节点崩过一次，直接影响了当天的门店转化，市场部对稳定性的敏感度远高于对创意的期待。
同时门店客群机型跨度极大，从最新旗舰到五年前的千元机都有，动效必须在低端机上也能跑。
02Solution
我们做了什么
01
把性能预算写进需求文档
立项第一周就定死了三条红线：首屏资源不超过 800KB、首屏时间 4G 下不超过 2 秒、低端机帧率不低于 30。所有创意方案先过这三条，过不了的在设计阶段就改，而不是开发完再优化。
02
三档动效降级
同一套视觉做了完整、简化、静态三个版本。运行时根据设备内存、GPU 型号和首帧渲染耗时自动选档，用户无感切换。低端机拿到的是静态版，但视觉完整度依然在线。
03
按峰值三倍压测
客户预估峰值一万 QPS，我们按三万做压测，并把抽卡与合成这类写操作全部改成队列异步处理。同时准备了限流开关和静态兜底页，异常时降级到只读模式而不是整体不可用。
04
除夕当晚值守
活动开启前后共 6 小时，开发与运维在线值守，监控面板按分钟粒度盯着错误率与响应时间。实际峰值到了 3.1 万 QPS，超出客户预估三倍，系统未触发降级。
Technical Highlights
- 首屏资源 762KB，4G 环境首屏 1.6 秒
- 三档动效自动降级，覆盖五年内全部主流机型
- 写操作全异步化，峰值 3.1 万 QPS 未降级
- 限流开关与静态兜底页全程待命，未启用
- 埋点字典随代码交付，活动后归因分析当天出结果
03Gallery
项目画面
Live Demo
链接待补充扫码或点击链接体验线上版本。
04Project Info
项目信息
- 项目周期
- 5 周
- 上线时间
- 2025.02
- 团队规模
- 6 人（1 PM + 3 前端 + 1 后端 + 1 测试）
- 技术栈
- Vue 3ViteGSAPNode.jsRedisCDN 边缘缓存
- 交付物
- H5 活动页抽卡服务端运营配置后台埋点字典压测报告
- 支持平台
- 微信内置浏览器iOS SafariAndroid Chrome
