如何设计实现营销搭建系统 - 终端秒开

1. 如何设计实现 toC 营销搭建 | 终端秒开? 墨墨冥 2020.03.28

2. 个⼈人简介花名：墨墨冥团队：阿⾥里里巴巴-淘系技术部-营销活动主要经历 2011.6：东南⼤大学计算机系毕业，校招⼊入职阿⾥里里 2011~2014：天猫会员、天猫⾸首⻚页 2015~：淘系营销活动（双11等），搭建产品 - ⽅方⾈舟前端技术：搭建技术、终端性能

3. ⼤大纲业务简介关键架构营销搭建的终端秒开传统优化场景挑战核⼼心实现未来展望招贤纳⼠士

4. ⼀一、业务简介

5. 业务简介 - 营销活动⽬目标：品牌⼼心智、GMV 由平台组织商家提供特定⼼心智商品给消费者的脉冲式导购形式

6. 业务简介 - 营销搭建业务：快速构建营销⻚页⾯面技术：终端秒开营销搭建模式我们解决的问题

7. 业务简介 - ⽅方⾈舟终端秒开多端渲染、产品化秒开线上协同营销管控、安全⽣生产⽀支撑双11运作的核⼼心系统之⼀一⽅方⾈舟搭建系统服务千级运营、万级商家、亿级消费者覆盖淘系千级场次淘系⼤大促 + ⽇日常活动数据投放模块⽣生态千级丰富模块、D2C+可视化⽣生产排期计划、定向投放、算法排序

8. 业务简介 - 快速展示 - 搭建

9. 业务简介 - 快速展示 - 模块中⼼心

10. 业务简介 - 快速展示 - 终端体验 WIFI 4G 3G

11. ⼆二、关键架构

12. 关键架构 - 产品架构淘系营销活动搭建产品服务平台双11 双12 年年货节⼤大促狂暑季爱⻋车⽇日开学季 … ⽇日常 618 造物节 … 智慧搭建模块定投智能排序搭建个性化静态赛⻢马投放⼈人⼯工搭建 AB试验智能UI 资源位管理理排期计划营销管理理模块中⼼心模型中⼼心主题中⼼心权限中⼼心数据中⼼心活动管理理招商平台选品平台搭建平台投放平台算法平台数据平台测试平台

13. 关键架构 - 系统架构⽤用户端在线链路路 Browser 服务端接⼊入层模块信息营销管理理模块管理理数据配置插件信息投放主题信息模型管理理主题管理理资源位权限管理理搭建服务⻚页⾯面SDK 模块SDK 数据处理理⻚页⾯面配置模块代码搭建⽅方⾈舟核⼼心依赖数据合并渲染服务⻚页⾯面代码离线链路路数据服务 CDN 服务端引擎层资源（预）缓存服务数据预请求服务 App PWA 数据源活动管理理排期投放规则导购场管理理投放服务管理理SDK 资源位SDK 排期SDK 数据源SDK

14. 三、营销搭建的终端秒开

15. 营销搭建的终端秒开 - 传统优化 - Performance Timing

16. 营销搭建的终端秒开 - 传统优化 - 最佳实践 • • • • • • • • • • • 避免重定向域名、请求收敛资源按需加载资源合并压缩资源（预）缓存资源预请求减少DOM数量量、层级 CSS3动画代替脚本动画使⽤用requestAnimationFrame ⾼高频事件⾥里里减少计算和操作使⽤用CSS3 触发GPU渲染终端体验影响⼤大搭建场景有特殊挑战 • • • 减少重绘和回流缓存DOM选择与计算尽量量使⽤用事件代理理尽量量使⽤用ID选择器器 • • • • 01 使⽤用CSS等代替图⽚片合并⼩小图正确使⽤用图⽚片格式、尺⼨寸适当压缩图⽚片懒加载图⽚片加载优化 05 渲染优化 04 JS优化 • • 02 图⽚片优化 03 CSS优化 • • • • CSS写在头部避免CSS表达式移除空的CSS规则避免内联Style

17. 营销搭建的终端秒开 - 传统加载优化分析 Page Page Bundle = Page Code（PI） + Page Info + Module Code x N Module Data 各不不相同变更更频率：Module Data > Page Bundle Page Code（PI） Page Info Module 1 Code 1 Data 1 Module 2 Page Bundle 和 Module Data 分离 Code 2 Data 2 （预）缓存 Page Bundle 每个Module 初始化独⽴立异步请求 Module Data 后渲染⻚页⾯面组成分析

18. 营销搭建的终端秒开 - 搭建模式下加载优化的特殊挑战模块的独⽴立性：独⽴立异步请求数据与渲染渲染不不确定性和卡顿感模块的动态性：运营随时调整模块组合⽆无限的模块组合与有限的（预）缓存容量量的⽭矛盾变更更导致（预）缓存频繁失效如何设计缓存服务、数据服务，使搭建出的所有⻚页⾯面最⼤大化受益？

19. 营销搭建的终端秒开 - 进⼀一步加载优化分析 Page = Page Code + Page Info +（Module Code + Module Data）x N 不不同 Page 的 Page Code 相同不不同 Page 的相同 Module 的 Module Code 相同 Page Info 均不不相同 Module Data 均不不相同根据 Page Info可获取Module List 进⽽而获取 Module Data List 变更更频率： Module Data > Page Info > Module Code > Page Code Page 1 Page 2 Page Code（PI） Page Code（PI） Page Info 1 Page Info 2 Module 1 Module 1 Code 1 Code 1 Data 1-1 Data 2-1 Module 2 Module 3 Code 2 Code 3 Data 1-2 Data 2-3 ⻚页⾯面组成分析

20. 营销搭建的终端秒开 - 加载优化核⼼心思路路 Page = Page Code + Page Info +（Module Code + Module Data）x N 不不同 Page 的 Page Code 相同不不同 Page 的相同 Module 的 Module Code 相同 Page Info 均不不相同 Module Data 均不不相同根据 Page Info可获取Module List 进⽽而获取 Module Data List （预）缓存Page Code 并跨⻚页⾯面共享（预）缓存Module Code并跨⻚页⾯面共享聚合 Page Data = Page Info + Module Data * N 分离 Page Code、Module Code、Page Data 预请求 Page Data 客户端容器器能⼒力力实现（预）缓存、预请求变更更频率： Module Data > Page Info > Module Code > Page Code 需要缓存的代码收敛为：Page Code + Module Code * N （N：模块池模块数量量）

21. 营销搭建的终端秒开 - 加载优化核⼼心架构消费者访问 https://pages.tmall.com/test/wupr?wh_pid=main-174358 客户端数据预请求 Page Data 在线链路路数据服务 Module Data 离线链路路⽅方⾈舟 Page Info Module Code（预）缓存 Page Code（预）缓存 Module Code Page Code 渲染服务 Module Code Page Info 变更更 Page Code 变更更 Module Data 变更更 Module Code 变更更 Page Code 变更更通知 Page Code 客户端预缓存管理理服务 Module Code 变更更通知

22. 营销搭建的终端秒开 - 加载优化核⼼心时序理理论最佳情况： 1. 直接从客户端预缓存中读取Page Code 和 Module Code 2. 预请求⾸首屏数据后直接开始渲染

23. 营销搭建的终端秒开 - 未来展望阿⾥里里客户端外：PWA （Progressive Web App）快照渲染 … 阿⾥里里客户端内：PHA （Progressive Hybrid App） NSR：Native Side Render … ⾛走向未来的终端架构： Web渲染为主多端统⼀一渐进增强

24. 四、招贤纳⼠士

25. 招贤纳⼠士简历投递：moming.lq@alibaba-inc.com 有趣的团队：https://www.yuque.com/zaotalk/ued/ali-promotion ⼀一起来做双11，此时此刻，⾮非你莫属！

26. QA

27.