前端早早聊大会，前端成长的新起点，与掘金联合举办。 加微信 codingdreamer 进大会专属内推群，赢在新的起跑线。
第十四届|前端成长晋升专场，8-29 即将直播，9 位讲师(蚂蚁金服/税友等)，点我上车👉 (报名地址)：
正文如下
本篇为第三届 - 前端页面搭建专场墨冥讲师的分享：
一、前言
大家好，非常高兴今天能以这样一种特别的方式，代表阿里淘系技术部营销活动前端团队来跟大家交流一下在阿里做双 11 的实践过程中，关于搭建，关于终端性能的思考和实践。
二、个人简介
1.我是谁？
大家好,我叫墨冥，是阿里淘系技术部营销活动前端团队的 Team Leader，团队的核心业务就是支撑包括家喻户晓的集团双11网购狂欢节在内的营销活动以及支撑这个体系的营销搭建产品。
2.我的前端历程
- 我是在阿里土生土长的前端，2011 年 6 月份计算机专业毕业校招入职阿里，一干就是近 9 年时间。
- 2011~2014 年先后负责天猫会员，天猫首页的业务，折腾当时的PC性能优化，前端质量监控。
- 2015年之后开始接触双11，负责淘系营销活动的业务，有幸做过几次双11的前端PM，期间结合双11的场景需要，带领团队构建了支撑淘系营销活动的内部搭建产品 - 方舟。
3.怎么联系我？
因为有双 11 的特殊场景，在搭建技术以及终端性能方面有一些实践和思考，对双11感兴趣的前端同学们可以加我微信做进一步的沟通和交流。
三、分享大纲
今天的分享主要会围绕以下几个方面跟大家展开：
- 业务简介：淘系营销活动简介，让大家对业务场景以及我所在的团队要解决的核心问题有个初步的概念和体感。
- 关键架构：这次的大主题是搭建，简单用两张大图给大家介绍一下团队负责的搭建产品的产品和技术架构。
- 营销搭建的终端秒开：分别从传统的前端性能优化、搭建场景的特殊挑战、核心实现以及未来的思考几个方面来讲一讲营销搭建的终端秒开。
- 招贤纳士：最后，非常重要的，欢迎对双11感兴趣的前端一起加入我们。
四、业务简介
1.营销活动
1.1 简介
淘系营销活动是阿里平台组织商家提供特定心智商品给消费者的脉冲式导购形式，业务的主要目标是打造活动品牌IP和 短期内的 GMV 爆发，最为典型的营销活动集团双11已经从一次“营销策划”发展为家喻户晓全球消费者的狂欢节，创造了2019年单日 2684 亿这样的惊人的 GMV 数字。
1.2 目标
具象来看，我们在线上构建了无时间和空间阻隔的大型线上卖场页面，表达活动心智，向消费者展示个性化的货品、商家、玩法，最终促成成交。
2.营销搭建
2.1 为什么做营销搭建？
为了解决淘系电商高频次，长周期，高投入的营销活动页面制作诉求。
2.2 营销搭建有哪些组成？
- 研发链路：开发者通过集成的研发套件研发符合标准的可复用营销模块
- 搭建链路：运营通过积木搭建的方式生产成百上千的页面
2.3 营销搭建核心目标
- 帮助业务快速制作生成页面
- 为消费者提供极致的终端浏览体验
对于前者，我们正在基于平台积累的大数据以及算法的能力，开始从人工搭建模式转向智能化生产模式，这块不是今年的主题内容，有兴趣的可以加我微信私聊。对于后者，后续章节会详细展开
3.方舟-支撑双11运作的核心搭建平台
- 模块生态：基于阿里通用的搭建服务生态，我们的搭建平台已经积累了千级的模块玩法，并且支持 D2C（Design To Code）+ 可视化编辑快速生产
- 数据投放：针对如何链接货品和消费者，平台上提供了丰富的数据投放能力，比如排期计划、定向（区域、人群）投放，页面、坑位、素材粒度的算法千人千面排序等等
- 线上协同：
- 面向运营角色营销管控的需要，提供了多角色线上化协同管理的能力，例如统一的活动主题氛围，统一的内置玩法要求，统一的流量管控等等
- 面向开发者安全生产的需要，提供了涉及线上变更全链路的卡口，可灰度，可监控，可回滚能力
- 终端秒开：一个页面，一个 URL，一份数据，多端渲染（PC、Web、类 Native），同时平台级支持可持续的秒开体验
- 覆盖淘系：支撑包括双11在内，每年千级场次的淘系大促+日常活动
五、方舟-快速展示
1.搭建
运营通过左侧选取添加模块，移动模块的顺序，添加模块的数据投放规则，预览效果后，最终发布上线
2.模块中心
分门别类的丰富营销玩法模块：商品，店铺，优惠券，品牌，分流等等
3.终端体验
这是其中一年双11的主入口页面在 WIFI，4G，3G 下的体感感受。极致流畅的加载和交互体验对用户的点击率等业务指标有显著的帮助，这点非常重要。
六、关键架构
1.服务平台
依托于阿里强大的产品生态，底层我们依赖了包括招商、选品、搭建、投放、算法、数据、测试平台提供的基础产品能力
2.搭建产品
核心的产品能力分为三个部分
- 搭建：人工搭建、智慧搭建两套核心的生产页面解决方案，同时提供了包括模块定投，AB 试验，智能排序，智能UI等多种精细化运营能力
- 投放：资源位管理、排期计划管理，人工静态，个性化排序，赛马排序等数据投放能力
- 管理：模块、模型、主题、权限等产品实体的管理，以及面向营销活动运营和开发者的线上协同活动管理能力
3.淘系营销活动业务：
- 大促：强心智，体量规模巨大，如：双11、双12、618年中促等等
- 日常：短平快的营销事件，如爱车日、护眼日、开学季等等
4.技术架构
4.1 离线链路：面向内部用户的链路
- 核心依赖：依托于阿里强大的技术生态，营销搭建系统底层有两个强依赖服务
- 搭建服务：提供了基础的模块，页面，管理实体的 SDK，负责各种搭建实体的增删改查以及协议规范
- 投放服务：提供了资源位，排期，数据源，投放规则的 SDK，负责各种投放实体的增删改查以及协议规范
- 方舟：对应产品架构中的产品能力，调用底层搭建服务、投放服务，封装业务层的实体管理，接受来自用户的交互输入，最终向在线链路输出
- 页面和模块代码
- 页面配置：搭建体系里核心的模块组成页面的协议描述，比如页面基本信息，包含哪些模块，模块的对应的资源位等
- 模块的资源位数据配置
4.2 在线链路：面向外部消费者用户的链路
- 服务端：
- 渲染服务：基于从离线链路获取的页面和模块代码、页面配置组装出页面的模板
- 数据服务：基于从离线链路获取的模块资源位数据配置，进行数据处理，并合并生成页面需要的数据
- 用户端：阿里系 App 内以及浏览器内，获取页面模板，调用页面数据，渲染出消费者访问的页面
七、营销搭建的终端秒开
1.终端秒开的传统优化分析
- 从这张经典的图里，我们可以大致看到一个网页从url输入到主要资源加载完成的主要过程：获取 url -> 重定向 -> 服务端缓存 -> DNS查询 -> 建链 -> 文档传输 ->** 文档资源解析和处理 **-> 主要资源加载完成。
- 传统的前端秒开性能优化基本上是通过优化以上各个节点的时间来完成的。
2.终端秒开的最佳实践
上图展示了传统的性能优化最佳实践（如之前常提的雅虎军规），从加载优化、图片优化、CSS 优化、JS 优化等，这里网上基本是能搜索得到，由于时间关系，无法一一列举。结合这次的搭建的主题，接下来重点对终端体验影响大，且在搭建场景有特殊挑战的加载优化上切入，给大家分享一下我们遇到的问题、思考和方案
3.搭建场景下加载优化的传统分析
3.1 搭建出的页面 Page 由哪些部分组成?
- Page Code（PI）：页面级代码，主要包含页面的文档、页面初始化的代码
- Page Info：页面的配置信息，也就是上文搭建体系里核心的模块组成页面的协议，比如页面基本信息，包含哪些模块，模块的对应的资源位等
- Module：一个完整的模块
- Code：模块的代码资源
- Data：模块对应资源位的数据
3.2 传统搭建页面优化方案
经过页面抽象之后，我们可以看到页面主要分为代码和数据两个部分，代码相对稳定，数据频繁变更，基于此我们很容易想到的方案是
- 代码和数据分离
- 代码做（预）缓存
- 每个模块初始化时请求自身数据后渲染
4.搭建场景下加载优化的特殊挑战
4.1 传统搭建的问题
做完以上传统优化后，通过PPT里的一个简单视频录屏，可以感受一下某次活动的实际体验，似乎跟想象中的不一样：明显加载白屏时间，页面不确定区域的局部渲染带来卡顿感受。
4.2 问题出在哪里？
我们进一步分析了一下，搭建场景远比想象中复杂：
- 模块的独立性：独立异步请求数据与渲染
- 渲染不确定性和卡顿感
- 模块的动态性：运营随时调整模块组合
- 无限的模块组合与有限的（预）缓存容量的矛盾
- 变更导致（预）缓存频繁失效
如何设计缓存服务、数据服务，使搭建出的所有页面最大化受益？
5.搭建场景下加载优化的进一步分析
依然是上面提到的页面组成内容的抽象，我们从多张页面的维度上看，发现了一些有趣的规律：
6.搭建场景下加载优化的核心思路
基于以上分析，根据变更频率的不同，组成页面的不同部分做了更细粒度的拆分，采取不同的加载和（预）缓存策略，我们可以得到核心思路：
6.1 优化的核心思路
- （预）缓存Page Code 并跨页面共享
- （预）缓存Module Code并跨页面共享
- 聚合 Page Data = Page Info + Module Data * N
- 分离 Page Code、Module Code、Page Data
- 预请求 Page Data
- 客户端容器能力实现（预）缓存、预请求
6.2 解决的痛点
- 需要缓存的代码收敛为：Page Code + Module Code * N （N：模块池模块数量）
- 数据由模块独立异步请求合并成了页面级统一请求后分发给模块，避免了体验上的卡顿感觉
7.搭建场景下加载优化的核心架构
上图展示了加载优化的核心的终端架构，这里还有一个非常重要的点，就是我们充分利用了阿里系App内的端能力：数据预请求，页面级（预）缓存，模块级（预）缓存。当搭建系统发生了局部内容的变更后，会通过客户端（预）缓存管理服务更新客户端内的缓存。
优化完成之后，从上图右侧的录屏里，我们再来看一下终端的体验，这是我们希望给到消费者的。
8.搭建场景下加载优化的核心时序
从整个加载和渲染过程中我们可以看到，理论最佳情况，我们实现了
- 直接从客户端预缓存中读取 Page Code 和 Module Code
- 预请求首屏数据后直接开始渲染
9.终端秒开的未来愿景
9.1 阿里客户端外：PWA（Progressive Web App）
- 快照渲染：利用PWA的能力
- ...
9.2 阿里客户端内：PHA（Progressive Hybrid App）
- NSR：Native Side Render，在客户端获取数据、页面文档和脚本，然后在客户端中运行JS最终生成 HTML 字符串，再将生成的字符串传给 WebView 渲染出来
- ...
9.3 基于5G到来、手机设备硬件能力大幅提升的背景，走向未来的终端架构：
- Web渲染为主
- 多端统一
- 渐进增强
八、招贤纳士
1.我们的团队
- 有趣的团队：www.yuque.com/zaotalk/ued…
- 我们是阿里淘系营销活动前端团队，主导集团超大型营销活动双11全球狂欢节，负责淘系电商每年几千场营销活动以及支撑这个体系的搭建技术产品，服务千级运营，万级商家，亿级消费者，提供如丝般顺滑的线上购物浏览体验。
- 同时我们团队隶属于东半球最大的前端组织，阿里巴巴-淘系技术部-前端技术团队。这里，凝聚着双11背后的核心力量；有着亿级用户量的消费者导购产品；有着大规模人机互动场景；有着强大的中后台业务解决方案；有着面向未来的云+端工程研发体系；海量的的学习课程与前端大牛的经验分享，满足你积极向上渴望成长的心。
2.我们招人了！！！
- 简历投递: 扫描PPT中的微信二维码，畅谈人生理想！
- 一起来做双11，此时此刻，非你莫属！
