【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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

谌立

  • 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:524402

评论 1 条评论

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

Discourse 为什不建议使用 Gmail 的 SMTP

HoneyMoose

设计模式之美--MVC(1)的贫血模型、充血模型

GalaxyCreater

设计模式

「Go易错集锦」释放有限的资源以避免泄露

Go学堂

golang 程序员 个人成长 defer 11月月更

hashmap 的重新散列和装载因子

HoneyMoose

弹性伸缩、安全高效!华为云服务器助力企业数字化转型!

路过的憨憨

华为

体验华为云桌面的新办公形式,让你轻松办公

秃头也爱科技

华为云 CDN ,做企业网络“快人一步”的幕后英雄!

IT科技苏辞

GO学习之路-5.方法与接口

子不语Any

Go 编程语言 11月月更

企业上云原来如此简单,华为云带你体验云上风采

清欢科技

华为云CDN,为你开启更快速的上网体验!

秃头也爱科技

一站式解决方案,华为云CDN这波双十一很强!

秃头也爱科技

CleanMyMac4.12.1最新版安装包下载及功能详情

茶色酒

CleanMyMac CleanMyMac X CleanMyMac X2023

华为云云服务器:赢麻了是种什么体验?

路过的憨憨

华为

会议都在云上开,华为云会议具有超高性价比

清欢科技

云上办公便捷、安全,就用华为云桌面!

IT科技苏辞

GO学习之路-4.String和Slice,Map

子不语Any

Go 编程语言 11月月更

php常用函数

J.Smile

php

架构实战营模块一作业

张贺

架构实战营

企业运维强驱动

秃头也爱科技

华为云CDN,带你畅享更快速的上网体验!

IT科技苏辞

企业如何高质量上云?华为云服务器告诉你!

路过的憨憨

华为

华为云企业应用上云解决方案,为企业排忧解难

清欢科技

2022腾讯全球数字生态大会数据库SaaS专场召开 腾讯云数据库SaaS产品全面升级

腾讯云数据库

腾讯云 SaaS 腾讯云数据库

Kafka 消费者之 findCoordinator源码解析

石臻臻的杂货铺

kafka 11月月更

2022-11-30:小红拿到了一个仅由r、e、d组成的字符串 她定义一个字符e为“好e“ : 当且仅当这个e字符和r、d相邻 例如“reeder“只有一个“好e“,前两个e都不是“好e“,只有第三个

福大大架构师每日一题

算法 rust 福大大

GO学习之路-6.GO语言函数

子不语Any

Go 编程语言 11月月更

企业数字化办公利器——华为云桌面Workspace

清欢科技

@企业主们看过来,用华为云CDN给你的网页加个速

IT科技苏辞

Zebec节点Zepoch销量接近800个,生态发展信心十足

BlockChain先知

GO学习之路-2.GO开发环境搭建

子不语Any

Go 编程语言 11月月更

GO学习之路-3.GO基础语法

子不语Any

Go 编程语言 11月月更

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