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

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

前言

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

更新内容

支持 Flutter Widget 混合渲染

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

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

  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),下图为问大家页面的深色模式示例。

O1CN01jvEFYU1nTGi9SBJNi_!!6000000005090-0-tps-1080-2160.jpg

性能优化

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% 左右。

首屏对比.gif

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

帧率对比.gif

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

目录
相关文章
|
5月前
|
JSON Dart Android开发
Flutter 2024: Impeller引擎引领渲染新纪元
Flutter 2024以Impeller引擎引领渲染新时代,全面提升性能与流畅度。Impeller已在iOS及Android(支持Vulkan/OpenGL)全面部署,Material 3集成深化视觉体验,多视图支持增强复杂UI管理。Dart 3.2与3.4版本迭代优化语言特性与性能,引入宏编程简化JSON处理。桌面与Web端持续优化,深化平台适配。
287 14
|
1月前
|
容器
Flutter Widget 解析
Flutter Widget 解析
|
1月前
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
|
2月前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
99 8
|
2月前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
118 2
|
3月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
2月前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
91 0
|
5月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
182 1
|
6月前
|
Dart JavaScript Java
flutter 架构、渲染原理、家族
flutter 架构、渲染原理、家族
116 3
|
6月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
218 0