微信小程序推出新的渲染引擎Skyline,基于flutter渲染

chat

微信小程序在 WebView 渲染之外新增Skyline渲染引擎 , Skyline 在底层使用 Flutter 渲染。安卓微信 8.0.25 起内置了 Skyline 渲染引擎,更新到该版本体验 Skyline。

特性

Skyline 以性能为首要目标,因此特性上在满足基本需求的前提下进行了大幅精简,目前 Skyline 只实现了 CSS 特性的子集。在编码上,Skyline 与 WebView 模式保持一致,仍使用 WXML 和 WXSS 编写界面。在不采用 Skyline 新增特性的情况下,适配了 Skyline 的小程序在低版本或未支持 Skyline 的平台上可无缝自动退回到 WebView 渲染。

支持与 WebView 混合使用

小程序支持页面使用 WebView 或 Skyline 任一模式进行渲染,Skyline 页面可以和 WebView 页面混跳,开发者可按需适配 Skyline 渲染。

// page.json
// skyline 渲染
{
  "renderer": "skyline"
}

// webview 渲染
{
  "renderer": "webview"
}

更高的渲染性能

Skyline 在渲染流程上较 WebView 更为精简,其对节点的渲染有着更精确的控制,尽量避免不可见区域的布局和绘制,以此来保证更高的渲染性能。WebView 由于其整体设计不同以及兼容性等问题,渲染流水线的实现更加冗长复杂。

在光栅化策略上,Skyline 采用的是同步光栅化的策略,WebView 是异步分块光栅化的策略。两种策略各有千秋,但 WebView 的策略存在一些难以规避的问题,例如:快速滚动会出现白屏问题;滚动过程中的 DOM 更新会出现不同步的问题,进而影响到用户体验。

更低的内存占用

在 WebView 渲染模式下,一个小程序页面对应一个 WebView 实例,WebView 的创建会占用一定的内存,并且每个页面需要重复注入一些公共资源。而 Skyline 只有 AppService 线程,并且连续跳转的页面都是 Skyline 的话,会运行在同一个渲染引擎实例下,因此可以做到更细粒度的页面间资源共享(例如:全局样式、公共代码、缓存资源等)。由于降低了内存占用,也不会发生页面回收的现象。

更快的样式计算

同 WebView 传输 CSS 文本不同,Skyline 在后台构建小程序代码包时会将 WXSS 预编译为二进制文件,在运行时直接读取二进制文件获得样式表结构,避免了运行时解析的开销(预编译较运行时解析快 5 倍以上)。

Skyline 通过精简 WXSS 特性大幅简化了样式计算的流程。在样式更新上,与 WebView 全量计算不同,Skyline 使用局部样式更新,可以避免对 DOM 树的多次遍历。Skyline 与小程序框架结合也更为紧密,例如: Skyline 结合组件系统实现了 WXSS 样式隔离、基于 wx:for 实现了节点样式共享(相比于 WebView 推测式样式共享更为精确、高效)。在节点变更、内联样式和继承样式的更新上,Skyline 也进行了一些优化,从而保证样式计算的性能。



  {{index}}

更高的组件性能

Skyline 内置组件的行为更接近原生体验,部分内置组件(如 scroll-view、swiper 等)借助于底层实现,有更好的性能和交互体验。同时,我们将部分内置组件(如 view、text、image 等)从 JS 下沉到原生实现,相当于原生 DOM 节点,降低了创建组件的开销。未来我们也计划采用更高性能的单线程版本的组件框架进一步提升性能。

Skyline 还针对长列表的场景做了一些优化,使 scroll-view 组件只渲染在屏节点,并且增加 lazy mount 机制优化首次渲染长列表的性能,后续我们也计划在组件框架层面进一步支持 scroll-view 的可回收机制,以更大程度降低创建节点的开销。

在 WebView 模式下,原生组件目前采用同层渲染将其插入到 WebView 中混合渲染,但仍存在手势冲突、插入失败等问题。Skyline 将原生组件加入到正常的渲染流程中,彻底解决了原生组件的渲染问题。

更多的扩展能力

Skyline 支持了一些 Web 所缺失的但很重要的能力,以满足开发者实现更好的交互体验:

1. Worklet 动画

基于 Worklet 机制的 动画模块,能够在渲染线程同步运行动画相关逻辑。

2. 手势系统

基于 Worklet 机制的 手势系统

  • 在渲染线程同步监听手势、执行手势相关逻辑;
  • 支持手势协商处理;

3. 自定义路由

基于 Worklet 机制的 自定义路由模块,支持实现自定义路由动画和交互。

4. 共享元素动画

支持 跨页面共享元素,能够将上一个页面的元素“共享”到下一个页面,并伴随着过渡动画。

文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/features.html

本文通过 YUQUE WORDPRESS 同步自语雀

版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/3019/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
微信小程序推出新的渲染引擎Skyline,基于flutter渲染
微信小程序在 WebView 渲染之外新增Skyline渲染引擎 &#……
<<上一篇
下一篇>>
chat