北海(Kraken)v0.10.0 发布 - 支持 Flutter Widget 混合渲染

2022年01月14日 阅读数:2
这篇文章主要向大家介绍北海(Kraken)v0.10.0 发布 - 支持 Flutter Widget 混合渲染,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前言

通过 2 个多月紧张的开发工做,今天咱们发布了全新的 0.10.0 版本,该版本的核心功能是支持 Flutter Widget 混合渲染方案,将 Flutter Widget 简单封装成 Custom Element 就能够提供给前端使用,不只丰富了前端的组件生态,并且能够经过接入 Native 的高性能容器接入更多的业务场景。如下介绍该版本的主要更新内容。前端

更新内容

支持 Flutter Widget 混合渲染

以前 Kraken 对于 Flutter Widget 的支持只限于简单的 leaf 节点(如图片、视频、文本等),在 0.10.0 版本中 Kraken 支持了完整的混合渲染,能够接入相似瀑布流、长列表这种的复杂容器类型,使得 Flutter Widget 与 Kraken 互相嵌套成为可能。git

下面示例演示了如何将 Flutter 的下拉刷新与瀑布流 Widget 封装成自定义组件,而且在前端使用。github

  1. 在 Dart 侧将 EasyFresh 与 WaterfallFlow Widget 封装成 Custom Element。

  1. 在前端经过标准的 DOM API 建立自定义组件,而后在 JSX 中使用。

Web 与 Flutter Widget 混合渲染能力在大前端的技术体系融合的背景下,使得前端能发挥自身渲染能力强、开发效率高的优点专一于页面排版和业务逻辑组装,客户端能发挥性能好、交互丰富的优点专一于各类高性能容器(以下拉刷新、可回收列表、瀑布流)的开发,达到能力与生产效率的最大化。详细的技术方案能够参考《北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案 这篇文章。缓存

样式能力加强

0.10.0 版本在渲染能力上主要是补强了样式方面的能力,咱们补齐了 <style><link> 标签与 className 这些经常使用的 CSS 能力,经过 className 实现的样式共享,相对于内联样式能减小样式字符串在 JSBridge 上的传输时间,并减小 dart 侧内存占用。性能优化

另外咱们支持了 CSS Variables 特性,经过 CSS Variables 能够在前端方便地适配 APP 的深色模式(Dark Mode),下图为问你们页面的深色模式示例。架构

性能优化

0.10.0 版本的另外一个重点是优化性能与提高应用稳定性,经过代码架构上系统的重构,咱们修复了诸多影响首屏性能、滚动帧率、内存占用的问题,保证了落地的业务可以经过发布的性能基线。工具

JSBridge 性能优化

在 JSBridge 侧经过优化 JS 对象建立时间、以及优化 createElement 与 createTextNode 的耗时的手段,提高 C++ 侧建立 JS DOM tree 的总体时间。性能

Layout 性能优化

经过加缓存的方式减小没必要要 renderObject 的 constraints 计算减小 Layout 阶段耗时,在深度 Flex 容器嵌套的场景下性能提高 45% 左右。另外咱们也优化了长文本的渲染性能,在 overflow hidden 容器中只渲染可见部分本文,减小没必要要的文本渲染。开发工具

性能测试

咱们构造了一个无限加载的长列表页面,测试机为低端安卓机小米 6,分别对比了 0.9.0 与 0.10.0 版本在首屏加载与滚动帧率方面的表现。测试

下面视频为两个版本在 0.5 倍速下首屏加载时间的对比,左侧为 0.10.0 版本,右侧为 0.9.0 版本,优化首屏时间提高 10% 左右。

下面视频为两个版本滚动帧率的对比,左侧为 0.10.0 版本,右侧为 0.9.0 版本,无限滚动时滚动到必定的数量的节点会动态建立新的节点,旧版本 Layout 耗时较多有比较明显的卡顿,新版本优化后滚动会顺畅许多,在低端安卓机小米 6 上帧率能达到 50 fps 左右。

Flutter 版本支持

0.10.0 版本对 Flutter 的支持度升级到了 2.5.3,Flutter 2.5 是 Flutter 历史上排名第二的大版本更新,主要对性能与开发工具方面进行了大量改进。

另外 0.10.0 版本会继续支持 Flutter 2.2 版本,直到 0.11.0 版本发布为止,注意 Kraken 0.10.0 只会发布支持 Flutter 2.5.3 版本的 release 包,支持 Flutter 2.2 版本的 release 包须要开发者在 Kraken 的 Github 上 checkout 0.10.0-flutter-2.2tag 的源码下来自行编译。

Linux 支持

0.10.0 版本新增了对于 Linux 系统的支持,编译方式请参考 README

其余更新

除了以上介绍的能力以外,咱们也修复了大量渲染一致性方面与性能方面的 bug,详细请见 CHNAGELOG

关于北海 KRAKEN 更多的内容

社区协做机制

咱们指望经过一种良好的社区协做机制,来与社区的众多开发者一块儿共建 Kraken 底层能力及生态。 Kraken 团队经过协做者的方式来参与 Kraken 功能迭代以及 issue 讨论等工做。同时,经过由一部分协做者组成的技术委员会(TSC)来肯定技术方向、发布以及定制标准等工做。

简单地说,只要向 Openkraken Group 提交必定质量和数量的代码便可成为协做者;对项目提交建设性的贡献后,TSC 成员有权提名协做者参与到 TSC 中。

Kraken 团队指望经过一种友好、共同参与的协做机制,让社区的开发者可以更好地参与到对项目的演进中去,让每一个人的声音都能被听到,共同促进 Kraken 以及 Web 标准 的发展。

更详细的协做机制能够移步 Github TSC