阿里巴巴历时 3 年自研开发的 Web 渲染引擎 北海(英文名:Kraken)正式开源,致力打造易扩展,跨平台,高性能的渲染引擎,并已在优酷、大麦、天猫等业务场景中使用。

基于 W3C 标准 Kraken 最终要服务的用户还是前端开发者,那么如何降低前端开发者的学习熟悉成本以及如何将老项目快速地迁移到 Kraken 之上呢?我们并不想重新创造一套新的 DSL 作为研发框架来给开发者用,如果需要的话,那 Flutter 本身的 Widget + Dart 已经做得很不错了。前端开发者可能是用 Rax,也有可能是用 Vue 或是 React 的,我们都期望 Kraken 的用户能够做到“零成本”的快速接入。那么,就需要依赖一套开发者非常熟悉的标准来实现 Kraken。

渲染一致性 Kraken 的渲染能力是对其 W3C 标准的,所以可以保证跟 Web 渲染的结果完全一致。 Kraken(iOS),Kraken(Android)以及 Web 版本,可以看到渲染结果是完全一致的。

无限滚动列表 在业务开发中,有时开发者会遇到一些无法用分页却又大量数据的「无限滚动列表」。在客户端开发中有 RecyclerView/UITableView 来实现滚动回收的布局容器,而 Web 标准上尽管也有很多前端侧的优化方案来处理这个问题,但也一直是个难题。Kraken 尝试在容器侧解决了此问题,增加 CSS Display 属性值——sliver。

插件化能力 除了上面的那些超越 Web 的体验与能力以外,Kraken 非常重要的一个特性就是插件化能力,插件化能力提供给前端工程师重新定义浏览器能力的机会,开发者只需要编码一个 Flutter plugin,就可以扩展 Kraken 本身的能力。

稳定性保障 渲染引擎非常复杂,经常出现改一个 Bug 牵一发而动全身,所以需要高覆盖率的自动化测试来保障渲染引擎的稳定性,每次修改后都需要保障已有的 case 没有问题。通过自动化测试来保障每个 case 与修改之前的结果做对比,如果有差异,可以通过 case 以及差异的 diff 来修改 Bug。

官网地址:https://openkraken.com/