基于Flutter的网页渲染引擎“北海”正式开源，已应用于优酷、大麦、天猫等业务场景。官网：https://openkraken.comGithub：https://github.com/openkraken/kraken背景互联网业务的快速发展离不开跨平台技术，而最成熟的跨平台技术就是大家耳熟能详的浏览器.与生俱来的跨平台能力、开放的标准、强大的生态使其成为最火的容器之一。但由于其并非为性能而生，且存在历史包袱重、兼容性强、厂商更新慢等问题，该浏览器在移动端的表现并不突出。虽然网络和硬件的发展带来了足够的性能红利，但日益复杂的业务总能充分了解现有的性能。过去也有很多跨平台方案的探索和实践，新的技术方案随着历史的潮流不断发展。从最早的H5方案到Hybrid方案，再到后来的Weex/ReactNative方案，再到现在如火如荼的Flutter。Flutter凭借其精简的渲染管线、高效的布局渲染能力、自绘渲染等特性，成为近两年跨端领域的新宠。在Flutter出现之前，主流的方案还是使用ReactNative（Weex），这个方案的底层叫原生View。也正是因为如此，这种方案很难保证完全的多端一致性，因为原生的View本身有一些局限性，有限的能力不能满足开发者的所有需求，所以有点牵强实施W3C标准。而Flutter则是基于更底层的Skia做自绘渲染，可以很好的保证多端一致性。熟悉Flutter的同学一定知道Flutter是用Dart语言和Widget开发的。虽然Dart语言对于熟悉JavaScript的前端同学来说并不算贵，但是对于Widget这种状态驱动的开发模式已经非常熟悉了，但整体而言，现有基础设施与前端生态分离的矛盾是无法接受的。再者，动态能力是互联网业务的单纯需求，FlutterforWeb目前并不理想。毕竟，引入新技术的第一步是解决引入它的成本问题。因此，我们正在积极探索一种向上连接前端生态，向下使用自绘渲染的跨平台解决方案。于是这款基于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项目上使用，无需任何额外的熟悉和学习成本。通过对接ChromeDevToolsProtocol，开发者可以直接使用非常熟悉的ChromeDevTools调试开发好的页面。开发者无论是修改CSS样式，查看DOM结构，还是通过断点调试JavaScript代码，都能保证与Web开发一致的调试体验。渲染一致性Kraken的渲染能力符合其W3C标准，因此可以保证结果与Web渲染完全一致。下图是实际业务的截图。从左到右分别是Kraken(iOS)、Kraken(Android)和网页版。可以看出渲染结果是完全一致的。比Web更好的体验和能力那么这里有同学会想问，除了和现在前端开发一致的开发调试体验，还有渲染的一致性，那还能有什么？你到底搞定了吗？功能，与浏览器相比，可以获得哪些好处？无限滚动列表在业务开发中，有时开发者会遇到一些无法分页但数据量大的“无限滚动列表”。在客户端开发中，有RecyclerView/UITableView来实现滚动和回收布局容器。尽管Web标准中有很多前端优化方案来处理这个问题，但一直是个问题。Kraken试图通过增加CSSDisplay属性--sliver的值来解决容器端的这个问题。当Sliver容器中的子元素滚出容器的Viewport时，可以回收子元素中用于渲染的渲染对象，以节省内存使用。当子元素重新出现时，根据DOM描述重新生成renderobject。这是一个有数万个节点的demo。左边是overflow:scroll容器，右边是display:sliver容器。可以看到在“无限滚动列表”场景下，sliver容器滚动的更加顺畅。左上角有FPS数据。可以看到display:sliver的容器FPS一直保持在正常水平，而overflow:scroll的容器FPS有明显下降。此外，在内存方面也有很大的收获。同步光栅化在浏览器中，光栅化是异步执行的。执行惯性滚动时，会出现白屏。这是WebView无法回避的问题。借助Flutter足够高效的同步光栅化实现，Kraken可以实现长列表的无白屏快速滚动。增强手势能力Kraken内置常用手势，让业务开发者在使用手势能力时，不再需要引入JavaScript库劫持Touch事件进行开发。以滑动手势“swipe”为例，开发者只需要通过以下方法获取某个元素默认提供的手势能力。直接使用内置的增强手势功能可以更快地开发复杂的交互式应用程序。element.addEventListener('swipe',(gestureEvent)=>{///...})增强的手势能力解决了Web上频繁传递事件的性能问题和JavaScript处理手势占用UI线程的问题。另外，通过容器内部实现的arena能力，可以解决Web下的手势穿透等问题。内置的标准化手势能力也保证了同一容器内不同应用下手势交互能力的标准化和统一性。插件能力除了Web上面的体验和能力之外，Kraken还有一个很重要的特点就是插件能力。插件功能为前端工程师提供了重新定义浏览器功能的机会。开发者只需要编写一个Flutter插件即可。它可以扩展Kraken本身的功能。通过插件能力，开发者可以在内部实现很多自定义标签（比如Camera或者自定义视频播放器等），或者基于性能考虑层将常用的业务组件（比如Slider）下沉到容器中。由于浏览器厂商的开发和标准的制定往往滞后，具有插件能力的开发者可以快速定制各种渲染能力，让业务开发可以使用最新或增强的能力。除了扩展渲染能力，开发者还可以扩展手势能力。扩展手势功能可以将之前需要在前端劫持TouchEvent实现的功能下沉到容器本身。在增强交互体验的同时，也为交互提供了更多的可能性。稳定性保证渲染引擎非常复杂，经常会出现改个bug牵一发而动全身的情况。因此需要高覆盖率的自动化测试来保证渲染引擎的稳定性。每次修改后，都要保证现有的案例没有问题。使用自动化测试来确保每个案例都与修改前的结果进行比较。如果有差异，可以通过case的diff和差异来修改bug。这套自动化测试系统保证了Kraken每次修改前后案例结果的一致性，保证了渲染引擎本身的稳定性。目前已经有近3000个测试用例，未来会不断增加更多的场景来保证Kraken的稳定性。说了这么多Kraken的能力，肯定有同学想知道Kraken在实际生产场景中的表现如何。目前，Kraken在C端场景下已经有移动设备和低性能IoT设备的相关业务接入，可以在实际生产场景中使用。在优酷APP中，Kraken已经落地了不少业务。下面以“发电王排行榜”分会场页面为例。经过Kraken的转型，创业公司有了质的提升。与同页原方案相比，首屏渲染提升28.4%，帧率提升8.3%。.在IoT设备上，我们天猫U-first业务线下低性能IoT设备，Kraken也有非常不错的表现。在Slider等相对复杂的离线场景下，动画和交互表现良好，应用运行时间长，内存稳定性没有明显增加，保证了离线物联网应用的稳定性。社区协作机制kraken团队期望通过良好的社区协作机制，与社区内的众多开发者共建Kraken的底层能力和生态。kraken团队希望通过合作者参与Kraken功能迭代和问题讨论。同时，通过部分合作者组成的技术委员会（TSC）来确定技术方向、发布和定制标准。kraken团队希望通过公平良好的协作机制，让社区内的开发者更好地参与Web标准容器技术的演进，让大家的声音得到倾听，共同推动Kraken和行业发展。发展。更详细的协作机制，可以移步github。未来展望过去我们在做前端性能优化的时候，往往优化到浏览器层面就停止优化，往下很难进一步优化。Kraken的出现给了前端工程师新的机遇和挑战。它为前端工程师提供了重新定义浏览器功能的机会。它的想象空间非常大：超越Web的能力，媲美Native的性能和体验。比浏览器制造商更快地实施标准，站在标准的最前沿定义问题，并利用实施标准的能力来扭转标准，促进行业发展。大家可以从上到下查看整个渲染链路的优化和体验，通过全链路优化性能和定义一些新的渲染能力。目前前端应用越来越复杂，导致JSbundle越来越臃肿。开发者也可以抽象复用通用能力，下沉到容器层面。渲染和公共能力的重用不再仅仅依赖于NPM。下沉一般能力做更多。通过“云+端”的结合，也有机会探索面向未来的新一代渲染技术。基于Kraken，探索更多可能……最后，希望Kraken能给大家带来更好的体验和能力，也希望大家积极参与到Kraken项目中，共同建设Kraken生态。官网：https://openkraken.comGithub：https://github.com/openkraken/kraken
