前言
优酷客户端是一个多平台【Phone、Pad、OTT、MacPC】的娱乐生态综合体，为了升高多端产品迭代的开发成本，并提供给用户高性能、统一的产品体验，优酷技术团队在 19 年底启动了跨平台动静模板引擎技术计划的攻坚。
作为内容散发的主体，优酷客户端在产品展示层的次要特点是组件设计的规范化和卡片化。优酷动静模板引擎在问题定义上将组件作为了咱们的问题空间模型，不仅很好的躲避了如 Weex、React Native 等技术计划的复杂度和工程量，让咱们能够疾速试验及工程化。其次也在基本上让技术计划脱离 JS Bridge 的老路，保障了端侧的高性能。
概述
组件化在目前的挪动端来说是十分常见的组件 UI 状态，在优酷客户端的散发场景中，组件则更多的承载了影剧综漫等内容的信息出现。
当然，组件自身能够通过组合或嵌套来造成更加简单的展示模式，但从原子化角度来讲，作为繁多元素来看，组件有着十分强的结构化特色，形象后其逻辑形成如下：
1. 视觉元素：控件，图片、文本、富文本等
2. 布局：视觉元素的地位管制信息及元素绘制款式信息，如坐标及字体、字号等
3. 数据：要实在表白给用户的有意义的信息，如影剧综漫的名称、演职员、封面海报等
4. 事件：对用户交互的反馈及逻辑响应，如点按钮珍藏、预约、关注等
所有的原子化组件都能够形象为上述的元数据，那如何把这套数据结构进行有机组合造成模板，并在多端场景依照同样的行为表现进行渲染，是本篇文章要具体进行论述的内容。
什么是模板
在概述中介绍到，咱们能够将原子化的组件形象为元素、布局、数据、事件四类外围信息，其中元素信息，咱们通过 JSON 数据结构进行组织，来形容组件中的元素形成及层级关系；布局信息中布局关系通过合乎 css3 标准的 flexbox 盒模型进行形容，款式信息则通过标准化的 css 来进行形容；数据模型引入了 XPath 的理念，因为组件元素中最终出现的数据往往来自云端下发的 JSON 数据，因而，这部分要解决的是如何将组件中文本的 text 属性与云端 JSON 数据中某个层级的 data 实现动静绑定，相似于 root.path.router.title; 至此，通过将上述数据结构整体组合，打包后造成的一个物理文件，咱们称之为模板。当任一客户端残缺实现了对这个模板文件的解析与渲染，便可实现组件的绘制工作，从而实现跨端。
优酷动静模板引擎外围实现计划
优酷动静模板引擎是由优酷技术团队自研的，提供对上述模板文件进行跨端标准化解析、构建、渲染的客户端技术计划。因为优酷内容散发场景对用户体验和技术性能有极其刻薄的要求，因而，咱们制订的所有技术计划的最高前提是性能第一。
架构设计
动静模板引擎在优酷外部代号为 GaiaX，依照分层设计理念共分为 4 层。根底依赖层保持最小依赖准则，要重点阐明的是，为了保障模板布局计算的高性能，咱们引入了由 RUST 编写的 StretchKit 高性能布局计算引擎[https://github.com/vislyhq/st…]，其具备跨端、较小的包体积（170K）、计算性能卓越等特点；外围渲染层形成模板引擎的渲染内核，解决模板文件解析、虚构节点树构建、布局计算、表达式构建解析等外围逻辑；模板核心及模板服务层则更面向业务，与优酷业务架构进行联合实现对现有能力的复用，防止反复造轮子，并向下层业务提供标准化模板渲染及接入服务。
总线设计
对于动静模板引擎来说，输出结构化的模板文件，通过文件 IO、数据解析、虚构节点树构建、布局计算、表达式运算、渲染树构建到实在视图树组成了残缺的总线链路。
外围实现
虚构节点树
虚构节点是链接模板文件，生成布局，绑定款式，以及最初渲染 view 的外围模块，整个链路是属于线程平安，能够在在线程进行操作和布局，在生成 view 的时候回到主线程，能够为后续的预渲染和性能优化提供牢靠的保障。
下图是形容 index.json 通过 GaiaNode 和视图 View 的对应关系：
• Node 作为根底的虚构节点，负责 CSS 中 Style 信息生成客户端款式属性，以及 CSS 布局信息通过 StretchKit 生成的 frame 布局信息，同时获取父 node，以及和子 node 数组的对应关系。
• Node 和 View 的关系是一一对应的，Node 通过 creatView 的形式创立不同的 view 视图，以及 renderView 的形式将款式和 frame 一次性赋值给 view，缩小反复的赋值操作。
• 在此基础上依据模板中的视图 type 衍生出 rootNode，viewNode，imageNode，以及 textNode。
性能保障
• StretchKit 库的劣势
选中 Stretch 看中的就是其有着极好的性能体现和较高的内存使用率，而这些都是 Rust 语言个性所带来的。Rust 速度惊人且内存利用率极高，规范 Rust 性能与规范 C ++ 性能并驾齐驱，某些场景下效率甚至高于 C ++。因为没有运行时和垃圾回收，它可能胜任对性能要求特地高的场景。
• AST 层级极简
AST 即虚构节点树是依据模板文件构建的逻辑树，其层级构造的合理性齐全受制于模板创建者对 flexbox 布局的相熟水平，为了进步整体技术计划的性能下线，动静模板引擎在进行虚构节点树构建过程中，会被动进行层级优化和拍平，从而缩小不必要的元素冗余关系，晋升渲染性能。
• 线程减负
通过对虚构节点树进行 DIFF 运算，当实在存在数据扭转时才提交更新解决
缩小线程池线程数，防止不必要的并发线程间的资源开销及争夺
对数据遍历、JSON 解析赋值、布局计算等解决进行异步化，保障对于主线程非必要不提交
要害数据
技术计划横向比照
| 技术计划 | DSL | 最佳实际 | 胶水层 | 渲染计划 | 研发团队 |
|---|---|---|---|---|---|
| Weex | Vue/Rax | 页面动态化 | JSBridge | Native 渲染 | 阿里巴巴手淘技术团队 |
| ReactNative | React | 页面动态化 /App 整体架构计划 | JSBridge | Native 渲染 | |
| MTFlexbox | XML | 组件级接入 | 无 | Native 组件半异步渲染 | 美团终端业务研发团队 |
| GaiaX 动静模板引擎 | JSON | 组件级接入 | 无 | Native 组件半异步渲染 | 优酷利用技术团队 |
性能体现
| iOS | Android | ||||
| 低端机 | 中端机 | 高端机 | 低端机 | 中端机 | 高端机 |
| 54 | 57 | 58 | 38.99 | 57.5 | 58.81 |
| 55 | 58 | 57 | 38.9 | 58.09 | 58.91 |
| 55 | 58 | 57 | 40.6 | 57.77 | 58.86 |
线上成果
优酷动静模板引擎业务赋能
目前在优酷 15+ 业务团队中，均接入应用了动静模板引擎作为跨端提效技术计划；通过自 2020 年起一整年业务利用，从实际效果来看，对于多端组件开发整体研发效率晋升可达 30% 左右，单组件研发人力投入可由 0.5- 1 人日降落至 0.25-0.5 人日。
我的项目开源
动静模板引擎在优酷业务场景上线后，无论是线上的用户体验、还是研发端的效力度量上都有比拟良好的体现。从整个端侧开源社区来看，面向组件级的跨端动态化计划还是比拟少的，因而，优酷技术团队在 2021 年 10 月决策将计划进行开源，一方面无论是发现 issue 还是奉献代码，心愿通过社区的力量对技术计划实现继续迭代演进，将其打造为性能更加弱小的有社区影响力的产品。另外，也心愿成熟稳固的技术能力能够帮忙更多的集体开发者及中小技术团队，解决客户端日常开发中的痛点问题，实现多赢。
开源打算
我的项目空间
• 我的项目地址：https://github.com/alibaba/GaiaX
• 开源协定：我的项目遵循 Apache2.0 协定
• 我的项目文档地址：https://www.yuque.com/biezhih…
总结与瞻望
优酷动静模板引擎在优酷整体业务架构中，曾经作为散发场根底能力被各业务宽泛应用。因为模板 DSL 是前端技术栈领域，对于客户端同学来说有肯定的学习老本，因而，技术团队在引擎技术能力稳固后的次要研发方向是为使用者提供可视化、搭建化的 LowCodeIDE 平台能力。目前，该能力也曾经交付到各技术团队中，从实际效果来看，对升高模板搭建老本十分无效。在动静模板引擎的开源我的项目中，IDE 自身也进行了同步输入，宽广社区开发者能够间接应用平台进行模板搭建。
随着技术计划的开源，团队会依据社区的反馈将开发者关注的问题和能力尽快进行实现，同时，在业务场景孵化的一些新个性，也会实时向社区推出，让更多的开发者受害。
优酷技术团队目前在阿里巴巴开源社区曾经开源上线了不少技术计划，后续还将推出更多的能力，也心愿宽广技术爱好者关注阿里巴巴开源社区（https://github.com/alibaba），关注优酷端侧技术的倒退。