已开源，腾讯自研的轻量级、高效率的布局引擎

我想要一个能支撑动态化框架的布局引擎，要高性能、高效率，还要轻量级，这可能吗？在近日闭幕的 GMTC 全球大前端技术大会（北京站）2021 的“跨端技术”专题中，腾讯动态化中台 PMC、腾讯文档客户端负责人柯灵杰分享了题为《腾讯跨平台 &动态化开发框架演进之路》的演讲，讲述了腾讯内部的动态化方案。而该方案采用的布局引擎，则是于近日开源的 Taitank。

交互体验一直是产品的核心体验。不论是传统的浏览器还是最新的动态化框架为了提供更好的交互体验都需要布局引擎在背后支持。布局引擎一直是整个 UI 系统的核心模块。传统的布局引擎由于历史原因实现非常复杂，支持了大量的历史不常用属性。为了支持腾讯内部的动态化框架 Hippy 和 新框架 TDF，TDF 团队实现了一个轻量级、高性能、高效率的 C++ 布局引擎。目前，该引擎已经在多款 App 中使用，它的高效及稳定被百亿次的线上业务的调用所验证。

Taitank 还有什么特性？如何设计实现的？本文将带你一探究竟。

布局引擎的实现

布局引擎的目的是计算出节点的正确位置和布局属性。为了实现它，我们首先要厘清测量和布局这两个概念。测量的目的是获取节点的尺寸，布局的目的是计算出节点的位置和属性。布局引擎通过递归使用测量和布局这两个流程来最终完成整个布局。既然了解了这两个概念，接下来我们就来看一下布局引擎是怎么被实现的。

布局算法

布局算法描述了整个布局的确切行为，通过布局算法可以确定地知道整个布局的结果。布局引擎需要高效地实现布局算法。Taitank 引擎则实现了如下布局算法。

• 确定当前 flex container 的 available space。测量子节点的 flex basis 的大小。 依据约束（例如 max-width 等属性）计算出子节点的 hypothetical main size。

• 根据 available space 和 子节点的 hypothetical main size 和 flex-wrap 属性来确定 flex lines 包含哪些子节点

• 遍历 flex lines 根据每个 line 中包含的子节点。来确定每个 flex line 的侧轴

• 遍历 flex lines 确定每个 flex length 中的子节点的 flexible length。根据计算结果得出最终的每个节点的主轴大小

• 按照属性进行主轴对齐

• 按照属性进行侧轴对齐

优化布局引擎

布局算法提供了整个布局引擎的行为描述。但实现高效的布局引擎需要多方面提高布局引擎的性能，Taitank 从多方面对布局引擎进行了性能优化。

算法流程优化：在一次布局流程中，首先要确定子节点的尺寸，需要对子节点进行测量获取节点尺寸。这个测量流程会递归进行，直到子节点的尺寸被全部测量出来。如何减少测量时间的消耗，加快测量的速度是优化的关键。

从布局算法可以看出，排版主轴时只需确定子节点的 main size。在计算 flex line 时只需要用到侧轴的 cross size。为了提高整个测量的效率，Taitank 引擎中提出了"一维测量"的概念。每次只对主轴或者侧轴进行测量。优化测量的时间来提高整个布局流程的效率。

布局边界优化：对于 Flex 来说由于其弹性布局特性，会不断触发子节点的重新布局。重新布局带了非常大的性能消耗。为了减少重新布局带来的性能损耗，需要控制布局影响的范围并减少重新布局的次数。Taitank 布局引擎提出了“布局边界”，通过布局边界来控制和优化重新布局的影响。

缓存优化：除了初次布局外，新增、修改和删除节点都会触发二次布局。节点的增、删、改不一定会影响整个节点树。针对二次布局的情况 Taitank 设计了缓存来优化排版速度。

布局和测量是布局引擎的两个流程。布局引擎分别对布局和测量两部分设计了缓存。通过精细的区分布局和测量缓存来提高二次重排的性能。

布局引擎的工程实践

对于在线上落地布局引擎需要从以下几个方面考虑，良好的性能、完整的标准支持、稳定性的在线表现、易用性、跨平台性等几个方面做出考虑。

性能对比

Taitank 引擎首先在 QQ 浏览器中落地，为其最重要的 Feeds 流业务带来了显著的性能提升。

标准的支持

TDF 团队最终的目标是服务前端开发者，如何降低前端用户的学习和使用成本，利用完善的前端生态并使的前端开发者能够“零成本”接入是 TDF 团队的核心考虑之一。

W3C 标准是浏览器的核心标准，基于 W3C 标准来实现布局引擎，对于前端开发同学来说可以做到几乎"零成本“。但 W3C 中有很多历史属性并不常用，为了减少历史包袱同时覆盖绝大部分的场景。 Taitank 支持了完整的Flex布局。

多个业务实际验证

Taitank 引擎已经在多款 App 中使用。经过线上业务的百亿次的调用，稳定且高效。

布局引擎非常复杂，出现布局异常难以发现。为了保障布局引擎修改的稳定性，Taitank 提供了完整的自动化测试流程。这套自动化测试系统保证了 Taitank 每次修改前后得到的 case 结果的一致性，以确保布局引擎本身的稳定性。目前引擎已经提供了上百测试用例， 覆盖了 flex 的每个属性。以此来保证 Taitank 的稳定性。

易用性

Taitank 布局引擎提供了一个模拟器，可以在浏览器中快速模拟布局的结果，方便使用者接入来验证布局的结果。

良好的跨平台性

跨平台是技术选择中一个非常重要的指标。 "Write once, run anywhere"一直是技术人员的梦想。对于任何一个 UI 系统来说保证跨度的一致性是必须实现的指标。Taitank 引擎支持了当前主流的平台。Taitank 还支持在浏览器和 Node.js 中使用。

社区协作及未来展望

社区协作机制

TDF 团队期望通过良好的社区协作机制来和开发者一同共建 TDF 的能力和生态。作为 TDF 的一部分 Taitank 也希望能有更多的开发者来参与其中的建设。 Taitank 团队希望可以通过公平良好的写作来让更多的开发者参与整个互联网标准技术的演进中，并共同促进 Taitank 以及行业标准的发展。

查看更详细的协作机制请移步github。

未来目标

布局需求一直是各个 UI 系统的核心之一，为了展示更丰富、更复杂的世界，对于布局系统提出了更极致的性能要求和更复杂的展示。Taitank 期望能和各位开发者一起来定义未来：

• 更完善的布局能力，Grid 布局等

• 更优秀的布局性能

• 更快的实现标准

最后，期望 Taitank 能给大家带来更好的体验及能力和大家一起共建 Taitank 生态。

作者简介

Charleeshen(谌立)，腾讯高级工程师，现在参与腾讯动态化框架中台。先后参与过 QQ 浏览器、叮当语音助手、腾讯看点等多项目。并为成为腾讯开源组件的贡献者。实现了腾讯离线语音合成引擎、参与了 Hippy 动态化框架。在跨平台框架、实时渲染领域有多年经验。