为了进一步提升小程序的渲染性能和体验,我们推出了全新的渲染引擎,目前正式版已随基础库3.0.0一同发布。
我们知道小程序因为兼容性好、功能丰富,一直以来都被用来渲染界面,各大厂商也在不断优化 Web 的渲染性能。但 Web 系统相较原生开发在性能上还是有很大差距,功能开发也比较慢,导致小程序很难提供原生般的体验。因此我们开发了全新的渲染引擎来替代小程序的渲染层,以提供更优的渲染性能和诸多增强功能,让小程序达到原生般的体验。
下面就针对各个特性进行全面的介绍。
提供更好的性能
在渲染环节,由于需要向后兼容,积累了不少历史包袱,而且整体设计目标也不同,使得它的渲染管线更加冗长复杂,而 则更加精简,同时只保留了更多现代的 CSS 特性。在此基础上,我们进一步实现了很多优化点:
总体来说,由于渲染流程可控性更强,我们可以将小程序的特性尽可能的融入到渲染流程中。细节上的优化还有很多(比如rpx、mode=的处理,都融入到渲染流程中,避免在JS中做太多额外的计算),就不一一介绍了。另外我们也在持续优化,这也是未来小程序性能优化的重点。
就目前整体性能而言,我们从已经上线的小程序数据观察到(基础库 3.0.0 带来的优化——尚未体现),在启动时间方面,即从点击到完全渲染(LCP)的时间,相比之下,减少了 17.6%;在渲染阶段时间方面,即从框架构建到完全渲染(LCP)的时间,相比之下,减少了 50%。
消除遗留架构的问题
在Web化架构下,小程序的一些基础体验会受到提供的能力限制(尤其是iOS的限制较大),使得一些技术方案变得不切实际,也留下了一些潜在的问题。
新的交互式动画系统
我们发现,要实现类原生的体验,渲染性能和交互动画缺一不可。渲染性能可以让页面渲染得更快,交互动画可以让页面浏览体验更好。但在 Web 系统中,很难实现像素级的控制,交互动画衔接不顺畅,原因是缺少了一些重要的能力。为此,我们提供了一套全新的交互动画能力。
另外,内置组件的扩展也是很重要的一部分,特别是-view组件。我们优化了下拉刷新的体验,实现了“下拉到二楼”的交互,还增加了很多控件能力,这些都是Web上很难实现的非常重要的功能。总之,这套全新的交互动画系统,是实现类原生交互体验的关键。