写点什么

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

谌立

  • 2021-07-12
  • 本文字数:2503 字

    阅读完需:约 8 分钟

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

我想要一个能支撑动态化框架的布局引擎,要高性能、高效率,还要轻量级,这可能吗?在近日闭幕的 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 动态化框架。在跨平台框架、实时渲染领域有多年经验。

2021-07-12 16:525702

评论 1 条评论

发布
用户头像
ppppt?
2021-08-05 09:29
回复
没有更多了
发现更多内容

华南会议|AI驱动仿真未来 2025 Altair区域技术交流会华南站,报名开启!

Altair RapidMiner

人工智能 AI 汽车 数字孪生 CAE

智启未来 | 拓维信息携旗下开鸿智谷受邀参加开源鸿蒙开发者大会2025

极客天地

AI in Game,大模型能力与实时音视频技术融合,交出AI应用新答卷

腾讯云音视频

AI 实时音视频 GME

《独立开发工具 • 半月刊》 第 003 期

Immerse

以去中心化云计算角度,看杭州全球首场人形机器人格斗赛

PowerVerse

人工智能 AI 去中心化云算力

最全Java面试题及答案整理(2025最新版)

Geek_Yin

Java 程序员 Java 面试 Java面试题

应该如何理解“数据驱动”?

优秀

数据挖掘 数字化转型 数据驱动

AI赋能引爆短剧全球化风潮,腾讯云媒体处理助力短剧平台出海吸金

腾讯云音视频

AI 出海 媒体智能

决胜 Next.js 面试:深入剖析缓存机制

溪抱鱼

面试 Nex 缓存机制

联想重磅发布三大硬核数据网络新品,打造"一横五纵"战略智能底座

新消费日报

不同数据场景下的聚类算法

量贩潮汐·WholesaleTide

机器学习 算法

什么是低代码开发平台?2025年最热门的10大低代码开发平台盘点!

优秀

低代码 低代码开发平台 低代码平台

FlagOS 新里程:开源面向多种硬件架构的统一AI 编译器 FlagTree

智源研究院

一文彻底玩转Open Harmony三方库之从入门到实战,轻松拿捏lithe_refresh

程序员Feri

OpenHarmony HarmonyOS NEXT harmoyos

30k 的Java面试题,哭着也要背完!(附答案)

Geek_Yin

Java 程序员 Java 面试 Java 面试题

离线声音合成应用 RWKV Talk:多语言、多音色、支持声音克隆;马斯克:AI 将替代传统搜索丨日报

声网

京东商品详情 API 接口全攻略:从入门到精通

tbapi

京东商品详情API接口 京东API 京东数据采集

SIGGRAPH 2025 | 快手可灵团队提出3D感知的电影级文本到视频生成框架CineMaster

快手技术

#大模型

什么是信息化?什么是数字化?这两者有什么联系和区别?

优秀

数字化转型 数字化 信息化

AI赋能引爆短剧全球化风潮,腾讯云媒体处理助力短剧平台出海吸金

腾讯云音视频

出海

诚迈科技携HongZOS亮相开源鸿蒙开发者大会,加速生态繁荣与产业跃迁

极客天地

Web前端入门:JavaScript 运算符 == 和 === 有什么区别?

电子尖叫食人鱼

JavaScript 前端

快收藏!一个技巧从此不再搞混缓存穿透和缓存击穿

量贩潮汐·WholesaleTide

缓存

格灵深瞳发布视觉基础模型Glint-MVT,“分割一切”直接拿下SOTA

格灵深瞳

人工智能 视觉模型

“以光惠算”走进校园,湖北大学用F5G-A全光网赋能智慧校园

Alter

以正合,以奇胜,曙光信创公有云的兵法之道

脑极体

AI

Disruptor—核心源码实现分析(二)

不在线第一只蜗牛

Java

《算法导论(第4版)》阅读笔记:p156-p161

codists

算法

开源鸿蒙开发者大会2025交流区亮点纷呈,社区与生态伙伴共绘智能图景

极客天地

赋能未来教育!卓翼飞思携无人智能教科研一体化方案亮相高博会

科技热闻

技术流必备!京东商品列表 API 接口深度解读

tbapi

京东API 京东商品列表接口

已开源,腾讯自研的轻量级、高效率的布局引擎_开源_InfoQ精选文章