您现在的位置是：首页 > 文章详情

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

日期：2022-01-13点击：548收藏

前言

经过 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 封装成自定义组件，并且在前端使用。

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

在前端通过标准的 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 的源码下来自行编译。