基于 Flutter 的 Web 渲染引擎「北海」正式开源

背景

互联网业务如火如荼地发展离不开跨平台技术,而最成熟的跨平台技术就是大家熟悉的浏览器了,它与生俱来的跨平台能力、开放的标准以及强大的生态使它成为炙手可热的容器之一。而由于其本身不是为了性能而设计的,并且历史包袱重、兼容性、厂商更新慢等问题,浏览器在移动端的表现并不突出。尽管网络以及硬件的发展带来了足够多的性能红利,但是日益复杂的业务总能把已有的性能吃透。

过去也有很多对跨平台方案的探索与实践,新的技术方案也随着历史的浪潮不断地发展。从最早的 H5 方案到 Hybrid 方案,以及后来的 Weex/React Native 方案,到现在如火如荼的 Flutter。


Flutter 由于其精简的渲染管线,高效的布局渲染能力,以及自绘渲染的特性,一跃成为这两年跨端届的新宠。而在 Flutter 出现之前,主流的方案还是用 React Native(Weex)的,这套方案的底层调用了原生的 View。正是因为如此,导致这套方案很难保证完全的多端一致性,因为原生 View 本身就存在一些限制,有限的能力不能满足开发者所有的需求,所以在实现 W3C 标准时有些牵强。而 Flutter 基于更底层的 Skia 做自绘渲染,可以很好地保证多端一致性。

熟悉 Flutter 的同学肯定知道 Flutter 是用 Dart 语言以及 Widget 来开发的,虽说 Dart 语言对熟悉 JavaScript 的前端同学来说上手成本并不是很高,对于 Widget 这种基于状态驱动的开发模式也已经是非常熟悉,但是整体上与已有基建与前端生态割裂的矛盾是无法接受的。再者,动态化能力对于互联网业务来说简直就是刚需,而目前来看 Flutter for Web 并不理想。

毕竟,引入一项新技术的第一步是解决引入这项新技术的成本问题。所以我们积极探索一种向上对接前端生态,向下使用原生渲染的跨平台方案。

于是诞生了这款基于 W3C 标准的高性能跨终端渲染引擎——北海(Kraken)。

基于 W3C 标准

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


W3C 标准是互联网最重要的标准之一,也是前端开发者非常熟悉的标准,基于 W3C 标准来实现渲染引擎,对于熟悉浏览器的前端开发者可以做到近乎“零成本”的快速上手。同时,我们可以摈弃一些沉重的历史包袱,使得 Kraken 的渲染效率更高。

强大的前端开发者生态

受益于基于 W3C 标准来开发,在 Kraken 上前端开发者完全可以使用目前熟悉的庞大的前端生态。

首先,在研发框架的选择上,无论开发者使用的是 Rax 或者 Vue ,还是 React 或者 Angular 的,都可以保证在 Kraken 上很好地完成渲染。


再次,前端拥有非常繁荣的生态,社区海量的 NPM 包都可以在 Kraken 项目上直接使用,大量成熟的模块保证了业务开发的效率。


除此之外,开发者平时在开发项目使用的各式各样的工具,都可以在 Kraken 项目上直接使用,无需任何额外的熟悉以及学习成本。


通过对接了 Chrome DevTools Protocol,使开发者可以直接使用非常熟悉的 Chrome DevTools 来调试所开发的页面。无论开发者需要修改 CSS 样式,还是查看 DOM 结构,或者是通过断点调试 JavaScript 代码,都能保证跟 Web 开发一致的调试体验。

渲染一致性

Kraken 的渲染能力是对其 W3C 标准的,所以可以保证跟 Web 渲染的结果完全一致。

下图是实际业务的截图,从左到右分别是 Kraken(iOS),Kraken(Android)以及 Web 版本,可以看出渲染结果是完全一致的。

比 Web 更好的体验与能力

那么到这里会有同学想问了,除了与目前前端开发一致的开发及调试体验,以及渲染一致性,那么最终到底能得到怎么样的能力,以及跟浏览器比,到底可以获得哪些收益呢?

无限滚动列表

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

当 Sliver 容器中的子元素滚动出该容器的 Viewport 时,可以将该子元素中用于渲染的 renderobject 回收以达到节省内存占用的目的。当子元素重新出现时,根据 DOM 描述重新生成 renderobject。

这是一个上万个节点的 demo,左边是 overflow: scroll 的容器,而右边是 display: sliver 的容器,可以看到 sliver 容器在「无限滚动列表」场景下滚动明显流畅很多。左上角有 FPS 的数据,可以看到 display: sliver 的容器 FPS 一直维持正常水平,而 overflow: scroll 的容器 FPS 明显下降。此外,在内存方面也有较大收益。

同步光栅化

在浏览器中,光栅化是异步进行的,进行惯性滚动时,会出现白屏,这个是 WebView 始终无法避免的问题。而借助 Flutter 足够高效的同步光栅化实现,Kraken 可以做到长列表快速滚动不白屏。

增强的手势能力

Kraken 通过对常用手势进行内置,使业务开发者使用手势能力的时候,再也不需要引入一个 JavaScript lib 以劫持 Touch event 来做开发了。

以轻扫手势“swipe”为例,开发者只需要通过以下方式就可以获得一个 element 上默认提供的手势能力。直接使用内置增强的手势能力,能够更快速地开发复杂的可交互应用。

element.addEventLisenter('swipe',(gestureEvent) => {
 ///...
})

增强的手势能力解决了 Web 下原本需要频繁传递事件的性能问题以及 JavaScript 处理手势占用 UI 线程的问题。此外,通过容器内部实现的竞争场能力,可以解决 Web 下手势穿透等问题。

而内置的标准化手势能力,也保证同个容器的不同应用下,手势交互能力的标准化以及统一性。

插件化能力

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

通过插件化能力,开发者可以在内部实现许多自定义的标签(譬如说 Camera 或者自定义的视频播放器等),也可以基于性能的考虑将常用的业务组件(譬如说 Slider)下沉到容器层。由于浏览器厂商开发以及标准制定往往是滞后的,用插件化能力开发者可以快速地自定义各种渲染能力,使业务开发可以用到最新的或者增强的各种能力。

除了扩展渲染能力,开发者还可以扩展手势能力,扩展手势能力可以将以往需要在前端劫持 Touch Event 实现的能力下沉到容器本身,除了增强了交互体验,也给交互提供了更多可能性。

稳定性保障

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

这套自动化测试系统保证了 Kraken 每次修改前后得到的 case 结果的一致性,以确保渲染引擎本身的稳定性。

目前已经有近 3000 个测试用例,未来还会根据更多的场景继续增加,以此来保证 Kraken 的稳定性。

业务落地

讲了那么多 Kraken 的能力,肯定有同学想知道 Kraken 在实际生产场景的表现如何。

目前 Kraken 在 C 端场景移动设备以及低性能 IoT 设备均有相关业务接入,完全可以使用在实际生产场景。

在优酷 APP 中,Kraken 已经落地了大量业务。以下方所示身份详情页为例,Kraken 改造后启动有了一个质的提升,相较于同个页面的 原方案,首屏渲染提升28.4%,帧率提升 8.3%。

在 IoT 设备上,我们的天猫 U 先业务在线下低性能的 IoT 设备上,Kraken 也有非常不错的表现。在线下相对较复杂的 Slider 等场景下,动画以及交互性能都表现较好,长时间运行应用,内存稳定并无明显增长,保证线下 IoT 应用的稳定性。

社区协作机制

kraken 团队期望通过一种良好的社区协作机制,来与社区的众多开发者一起共建 Kraken 底层能力及生态。

kraken 团队期望通过协作者的方式来参与 Kraken 功能迭代以及 issue 讨论等工作。同时,通过由一部分协作者组成的技术委员会(TSC)来确定技术方向、发布以及定制标准等工作。

kraken 团队期望通过一种公平良好的协作机制,让社区的开发者能够更好地参与到对 Web 标准的容器技术的演进中去,让每个人的声音都能被听到,共同促进 Kraken 以及行业的发展。

查看更详细的协作机制可以移步github。

未来展望

以往我们在做前端性能优化的时候,往往优化到浏览器层面就优化不动了,很难向下进行进一步的优化。而 Kraken 的出现,给予了前端工程师新的机会与挑战,它提供了前端工程师一个重新定义浏览器的能力的机会,拥有非常大的想象空间:

  • 超越 Web 的能力,比肩 Native 的性能与体验。
  • 比浏览器厂商更快地实现标准,站在标准的前沿定义问题,通过实现的能力去反推标准,促进行业的发展。
  • 可以自顶向下看整个渲染链路的优化及体验,通过全链路的手段去优化性能以及定义一些新的渲染能力。
  • 目前日益复杂的前端应用导致 JS bundle 的已经显得越来越臃肿,开发者也可以把常用能力抽象复用并下沉到容器层面,渲染与公用能力的复用不再只依赖于 NPM,可以通过下沉通用能力来做更多事情。
  • 通过“云+端”的结合,也有机会去探索面向未来的新一代渲染技术。
  • 基于 Kraken,探索更多的可能性......

最后,期望 Kraken 能给大家带来更好的体验及能力,也希望大家可以积极参与到 Kraken 项目中去,大家一起共建 Kraken 生态。


https://mp.weixin.qq.com/s/vE9jQzrYSTYviY5G0N0-FQ

借助 Flutter 顺畅地开发多平台应用

发布于:9天以前  |  55次阅读  |  详细内容 »

基于 Flutter 的 Web 渲染引擎「北海」正式开源

发布于:22天以前  |  123次阅读  |  详细内容 »

如何快速提升 Flutter App 中的动画性能

发布于:26天以前  |  111次阅读  |  详细内容 »

Flutter 使用 Riverpod+Retrofit 构建 MVVM 开发模式

发布于:26天以前  |  109次阅读  |  详细内容 »

使用 Flutter 加速应用开发

发布于:1月以前  |  174次阅读  |  详细内容 »

深入分析 Flutter 渲染性能

发布于:1月以前  |  161次阅读  |  详细内容 »

深入分析 Flutter 渲染性能

发布于:1月以前  |  172次阅读  |  详细内容 »

Flutter 不是真正的跨平台框架

发布于:1月以前  |  289次阅读  |  详细内容 »

Flutter 2 来了!

发布于:2月以前  |  291次阅读  |  详细内容 »

Flutter Worker —— 闲鱼这样实现“逻辑跨平台”

发布于:2月以前  |  271次阅读  |  详细内容 »

针对 Web,移动端和桌面端构建的下一代 Flutter

发布于:2月以前  |  233次阅读  |  详细内容 »

使用 flutter_driver 进行集成测试

单元测试可以确保应用的各个部分正常工作,但如何确保整个应用正常工作呢?这就需要用到集成测试了。

发布于:6月以前  |  719次阅读  |  详细内容 »

详解:Flutter内存泄漏解决方案

众所周知,内存的高低是评判一款app的性能优劣的重要的指标之一。如何更简单的帮助开发者分析、暴露且解决内存泄漏问题,几乎是每一个平台或框架、开发者亟需的一个的"标配"的feature。但是对于flutter社区,缺少一款用得顺手的内存泄漏工具。 对于使用flutter而言,因使用dart语言,通过形成渲染树提交到c++的skia进行渲染,从dart层到c++层拥有很长的渲染链路,使用者必须对整个渲染链路有通盘深刻的理解,才能深刻此时此刻的内存使用情况。本文提出一种基于渲染树个数的方式寻找内存泄漏的解决方案。

发布于:6月以前  |  795次阅读  |  详细内容 »

开始使用 Flutter 构建 Windows 桌面应用吧!

我们的使命是为开发者提供一个开源的高效框架,帮助他们在任何平台上构建美观的原生应用。截至目前,我们已经为 Android 和 iOS 带来了生产级别的支持,发布了 8 个稳定版本,仅在 Google Play 商店中就有超过 10 万款应用使用 Flutter。我们在继续努力,将支持范围扩展至 web、macOS 和 Linux 等其他平台。如今,Flutter 的另一个目标,即支持 Windows 的 Flutter Alpha 版本已经发布。

发布于:6月以前  |  827次阅读  |  详细内容 »

如何有效定位Flutter内存问题?

内存水位升高导致的稳定性问题严重影响app用户体验,所以开发者们非常关注Flutter的内存表现。随着Flutter业务越来越多,闲鱼也面临着oom导致的crash率提升的问题,下面我们结合项目中实际遇到的内存问题和解决思路跟大家分享下flutter内存优化的经验。

发布于:7月以前  |  721次阅读  |  详细内容 »

推荐5个Flutter重磅开源项目!

大家好,我是hub哥,近年来,随着移动智能设备的快速普及,移动多端统一开发框架已成为一个热门话题。这里为大家整理了5个Flutter优质的开源项目,希望对大家有帮助

发布于:9月以前  |  1596次阅读  |  详细内容 »

Flutter在PLUS业务中的探索和实践

2016年京东为向核心客户提供更优质的购物体验,特别推出京东PLUS会员,旨在全方位提升和丰富用户网购体验,目前京东PLUS会员已成为电商行业付费人数最多的会员体系。作为PLUS的前端开发,我们思考最多的就是如何让页面更快更好的呈现在用户面前,如何用技术为用户提供最好的购物体验。

发布于:10月以前  |  1184次阅读  |  详细内容 »

京东技术中台Flutter实践之路(二)

发布于:10月以前  |  1453次阅读  |  详细内容 »

首发 | 闲鱼公开多年 Flutter 实践经验

Flutter从诞生到现在,已经成为了跨端开发的领跑者。闲鱼应用在flutter能够以模块形式存在前,进行了很长时间的混合app架构的探索,对原生工程进行较多改动,在官方推出flutter模块模式后,我们进行了大量调研,最终推出了一套开箱即用的混合工程脚手架flutter-boot,帮助大家快速搭建混合工程。

发布于:10月以前  |  1195次阅读  |  详细内容 »

打破重重阻碍,Flutter 和 Web 生态如何对接?

Flutter 设计之初是不考虑 Web 生态的,原因很简单:两种技术设计理念不同,强行融合很可能让彼此都丧失了优势。但是业界又有很多团队在做这种尝试,说明需求是存在的。今天,阿里无线开发专家门柳就来手把手教如何实现 Flutter 和 Web 生态的对接?

发布于:10月以前  |  1177次阅读  |  详细内容 »

最多阅读

Flutter的手势GestureDetector分析详解 1年以前  |  4356次阅读
Flutter插件详解及其发布插件 1年以前  |  3758次阅读
在Flutter中添加资源和图片 2年以前  |  3541次阅读
发布Flutter开发的iOS程序 2年以前  |  2782次阅读
Flutter 状态管理指南之 Provider 1年以前  |  2500次阅读
在Flutter中发起HTTP网络请求 2年以前  |  2451次阅读
使用Inspector检查用户界面 2年以前  |  2367次阅读
Flutter for Web详细介绍 1年以前  |  2362次阅读
Flutter Widget框架概述 2年以前  |  2203次阅读
Flutter框架概览 2年以前  |  2043次阅读
JSON和序列化 2年以前  |  2035次阅读
为Flutter应用程序添加交互 2年以前  |  2032次阅读
Flutter路由详解 1年以前  |  1977次阅读
使用自定义字体 2年以前  |  1889次阅读
处理文本输入 2年以前  |  1886次阅读
编写国际化Flutter App 2年以前  |  1829次阅读
发布Flutter开发的Android程序 2年以前  |  1814次阅读
使用包来开发Flutter应用 2年以前  |  1805次阅读