史上最快破5亿用户的互动 - 2020双11养猫技术大揭秘

前言

在电商领域，互动是一个重要的用户增加方案，在提高用户黏性、活跃以及拉新上都发挥着重要的做用。今年双11，淘系互动团队推出了“超级星秀猫”，咱们不盖楼、不开车，全民参与养猫出道，3只风格各异的萌猫咪一经问世，瞬间俘获了无数消费者的心。经过 EVA 互动体系一整套解决方案，大幅提高研发效率，支撑全民养猫猫在手淘、猫客、支付宝等多个 APP 互通。借助客户端能力及 EVA 互动体系将性能与内存良好控制，让多数用户体验高清稳定的互动，实现 0 故障及秒开，同时星秀猫参与人数再创新高。这篇文章将主要从页面渲染基建、EVA 研发体系和全局稳定性方案 3 个方面，来具体阐述淘系互动前端团队是如何作到双11互动又快又好又稳的。前端

（更多干货请关注【淘系技术】公众号）web

页面渲染基建

不知道你们有没有发现，今年的双11养猫互动（如下简称双11互动）页面打开特别快，具体可看下面与去年双11互动主页在 iPhone 11 PRO 机器手机淘宝上的主页加载对比视频。不只如此，还有个明显的变化是以往互动页面的标配--进度条没有了。设计模式

见多识广的你也许会问，是否是今年双11互动使用了 Native 版本？是否是今年双11互动使用了缓存方案？是否是今年双11互动也使用了预渲染技术？然而，答案是，都没有，今年双11互动与历年狂欢城同样，仍然是 web 页面，且资源所有走 CDN 无额外缓存。缓存

那么，咱们是如何作到如此顺滑的加载体验呢？这就要从 Solution 提及。前端框架

Solution 是 天马搭建体系的概念，主要解决的问题是将模块+数据组合成页面，简单理解就是负责页面渲染 Layout

自去年618起，淘系互动团队所有业务都开始迁移到天马搭建体系，Solution 也使用了官方推荐的通用 Solution。可是，通用 Solution 因为其通用性，冗杂了淘宝/天猫 60% 以上业务逻辑（粗略估计），体积大的同时易受其余业务影响致使稳定性风险高；而互动因为其业务特殊性，不少优化甚至稳定性保障方案的实现也须要在 Solution 层面进行定制。基于此，淘系互动团队定制了本身的页面渲染方案，即互动专用 Solution，这也是今年双11互动之因此那么快的核心缘由。微信

得益于天马团队提供的新版 Solution 解决方案，既提供了标准化端渲染机制，又提供了基于插件进行业务定制的能力，还提供了产品化平台。互动专用 Solution 是在上述解决方案的基础上扩展实现，主要作了如下事情：架构

• 精简基础依赖/逻辑，去除非必要依赖及非必要逻辑
• 根据互动场景定制模块加载顺序，提供分批加载能力（当前主要是首屏/非首屏）
• 提供数据处理能力，经过去除渲染无关字段实现数据自动瘦身
• 内置基于客户端评分的稳定性保障方案，保障互动页面稳定性，详见下面稳定性方案章节
• 增长资源及模块加载监控，保障稳定性
• 集成互动通用能力，包括规范化 CSS/通用的渲染干预能力/经常使用的移动端调试方案/页面上下线能力等

EVA 研发体系

今年双11互动，很是多的用户反馈猫猫们太好看了、太萌了、特别可爱，不少人都纷纷来咨询小编是如何开发出来的。框架

接下来将重点阐述双11星秀喵加工厂--EVA 研发体系，TA 是淘系互动团队提供的从素材上传到端上渲染的互动研发的一整套解决方案，以引擎、框架、工具、平台为支点，致力于为广大前端带来简单温馨的互动研发体验。工具

EVA 研发体系，提供互动研发一条龙服务，咱们是认真的

EVA Store：素材上传服务

你们看到的星秀喵，并非3D模型，而是如假包换的2D骨骼动画。它使用 Spine 制做，经过网格自由变形和蒙皮技术在视觉上呈现“3D轴”的偏转，应用此类技术的动画软件还有大名鼎鼎的 Live2D。在 Spine 强大动画创做的支持下，双11的星秀喵才有了“3D化”的动画化表现力。一个标准的Spine动画文件包含一张雪碧图、一份骨骼数据以及一份动画数据，那么，咱们应该如何上传到 CDN 呢？布局

EVA 为了解决互动业务中常见且频繁的动画和模型素材，提供了一站式的素材上传服务 EVA Store，包括帧动画、雪碧图、DragonBones、Spine、音频等，这些互动素材的协议标准是由阿里巴巴经济体互动小组统一制定。

EVA JS：2D 互动引擎

互动引擎是互动研发的基础，一款好的互动引擎能大大下降研发成本，EVA JS 应运而生。EVAJS 是一款轻量级，用于开发互动游戏的前端框架。EVA JS 支持插件体系，全部的互动游戏能力都是由插件提供的。EVA JS 一方面可以让前端互动游戏开发更加专业，另一方面帮助前端开发者无需深度学习互动游戏技术便可开发互动游戏。TA 的总体设计是以游戏行业最佳实践的 ECS 设计模式为基础，拆分核心功能和组件能力，按需使用。

EVA JS 引擎

值得一提的是，EVA JS 还提供了无障碍化的支持。以往，游戏区实现无障碍须要手动在图层上添加辅助 DOM 来指定无障碍内容。今年双11，EVA JS 研制了 Canvas 上的无障碍技术，可以在手机淘宝/支付宝客户端上自动识别无障碍对象上的交互事件，下降研发成本的同时，让广大有障碍人士也能全方位体验到撸猫的乐趣，真正作到了互动无障碍体验。

双11养猫无障碍体验

EVA JS 计划在2021年6月份前完成开源，了解更多，可参考 淘系前端互动引擎EVAJS架构与生态实现

Rax EVA：Rax 解决方案

素材和引擎都准备好后，就能够上手开始写代码了。市面上大多数的游戏引擎没法和 JSX、Hooks 结合在一块儿，这样，开发者就须要学习“两套框架”，再加上游戏引擎的学习成本也不低，总体上增长了开发门槛。为解决门槛高、上手难的问题，淘系互动前端团队设计了一套用于开发互动的 Rax 解决方案--Rax EVA，TA 是一个可以在Rax技术体系下，利用 EVA JS 的游戏研发能力，开发动画、游戏类场景的框架。它可让开发同窗用熟悉的 JSX 和 Hooks 语法编写动画、游戏场景的代码。

例如，咱们把上一章节上传好的 Spine 动画显示出来（此处为示意版伪代码）

另外，对于前端来讲，DOM 和 CSS 有自然的排版能力，这也是它们的优点。而游戏引擎是经过图形引擎渲染的，并不具有 CSS 那样高级的排版能力。因而在整个游戏互动的项目里，即存在 Canvas 又存在 DOM+CSS，也就是所谓的混合开发。Rax EVA 也为这类混合开发提供了方便快捷的方式，在 EVA 组件内，使用background / hud 这两个原生标签划分了游戏区域Z轴方向的三层布局，在这两个标签内以及 EVA 组件外，任何DOM 标签或其余熟悉的 JSX 均可以照常使用。

互动项目分层最佳实践

EVA Ware：弹窗规模化生产

除了基础的游戏研发外，EVA 研发体系还提供了一系列的低代码工具或服务，其中表现尤其突出的就是在今年 618 互动中就表现优异的弹窗规模化生成方案（如下称 Super Modal）。

互动研发最大的工做量之一就是弹窗的开发，相比今年 618，今年双11互动弹窗数量更甚。得益于 Super Modal 在弹窗研发上的抽象，全部的弹窗样式都是在平台上简易拖拽复制生成，经过 DSL+Runtime 提供端上稳定的渲染服务。弹窗的样式、文案能够做为页面配置项快速修改，前端在开发弹窗功能时，不用过多关注弹窗的样式问题，专一于弹窗的显示、关闭逻辑便可。除此以外， Super Modal 还在今年 618 功能的基础上，增长了相对定位布局、自定义组件、弹窗队列管理器插件等功能，并提供了简单的项目管理能力，进一步下降了弹窗开发的成本。

Super Modal 核心理念

了解更多，可参考 2020年618淘系技术分享-互动生产力进化之路

全局稳定性方案

细心的同窗会发现，今年双11互动主页动效特别多，除了开场视频外，养猫和比拼的主界面上每一个区域都在各类动。你必定在好奇，为何你没有感受到卡或者出现闪退的状况呢？这一切的背后，除了手机淘宝客户端架构组底层升级外，也有全局稳定性方案在护航。

互动场景中存在大量动效、视频，而太高的内存占用可能会引起客户端 crash 影响业务结果。一边是客户端须要更炫酷的玩法去支撑业务发展，一边是一些设备性能较差的用户反馈卡顿，如何让全部设备都能流畅的参与互动呢？比起不顾一切的上动效或是一刀切的砍玩法，显然存在一个更合理的选项--体验分级。淘宝技术质量团队提供了名为 Kite 的获取设备评分的统一降级 SDK，结合互动特性，以下图所示，咱们将设备划分为 4 个等级，其中，容灾等级时页面将进入到一个异常兜底页面，用于应对一些低版本或者兼容性较差的机器场景。至此，咱们完成了体验分级。

互动设备分级

接下来，就是针对不一样设备等级的机型作不一样降级方案，这也是互动的稳定性保驾护航重要的一环。基于客户端架构组提供的稳定性指标，咱们须要总体考虑页面的内存、帧率、CPU 3 个指标，而动效、图片尺寸、游戏区画布尺寸、FPS 等配置则直接影响这 3 个指标的结果。然而，众所周知，在实际的开发过程当中，对每张图片、每一个动效作针对性的降级每每须要各类配置项，且人人参与，操做起来很是繁琐和耗时。所以，淘系互动前端团队在上面体验分级的基础上，经过 1 份静态全局降级规则 + 1 个运行时获取配置的稳定性保障 SDK，设计了一套完整的全局稳定性保障方案。

全局稳定性保障方案

正是这套稳定性方案，让双11互动在极大程度作到了高清互动、符合了架构组验收标准并且在线 22 天全程 0 故障。TA 让互动稳定性保障更加系统，也已经成为营销互动的标配。

总结展望

今年双11总体节奏从以前的“光棍节”到今年的“双节棍”，在这样变化的背景下，今年双11互动依然作到了参与人数再创新高。将来，咱们但愿完善 EVA 体系，经过不一样的技术方案不断地优化咱们的开发方式和生产关系，逐渐让更多的人来开发互动，实现“人人可开发，到处有互动”。

加入咱们

淘系互动团队目前负责“芭芭农场”、“金币小镇”、“淘宝人生”等手淘内千万级的互动产品，重点打造双促、春节、市场PR等S/A级营销互动，同时为商家、达人、主播等沉淀和提供私域内的互动玩法。若是你对 工程/搭建/低代码研发方向 或者 WebGL/图形渲染/特效方向 等存在兴趣，欢迎微信联系/钉钉进群了解更多，完整 Job Model。