抚州南城网站建设,管理系统论文,八戒网站做推广,管理咨询师证书为了进一步提升小程序的渲染性能和体验#xff0c;我们推出了一套新渲染引擎 Skyline#xff0c;现在#xff0c;跟随着基础库 3.0.0 发布 Skyline 正式版。
我们知道#xff0c;小程序一直用 WebView 来渲染界面#xff0c;因其有不错的兼容性和丰富的特性#xff0c;且… 为了进一步提升小程序的渲染性能和体验我们推出了一套新渲染引擎 Skyline现在跟随着基础库 3.0.0 发布 Skyline 正式版。
我们知道小程序一直用 WebView 来渲染界面因其有不错的兼容性和丰富的特性且各大厂商也在不断优化 Web 的渲染性能但 Web 体系相比于原生开发在性能上仍然有较大差距并且特性上发展缓慢使得小程序很难做出类原生的体验。因此我们开发了一套新渲染引擎 Skyline旨在替代 WebView 作为小程序的渲染层以提供更优秀的渲染性能和诸多增强特性让小程序能达到原生的体验。
以下为你全方位介绍 Skyline 的特点。
提供更好的性能
在渲染流程上WebView 因其需要向后兼容积累了较多历史包袱加之整体设计目标不同使其渲染流水线更加冗长复杂而 Skyline 则更为精简同时只保留更现代的 CSS 特性。在此基础上我们还进一步实现了很多优化点
单线程版本组件框架。Skyline 下默认启用了新版本的组件框架 glass-easel该版本适应了 Skyline 的单线程模型使得建树流程的耗时有效降低优化 30%-40%同时 setData 调用也不再有通信开销。组件下沉。我们将部分内置组件如 scroll-view、swiper、picker-view 等直接在底层实现以追求更流畅的交互体验。此外我们也将常用的内置组件view、text、image从 JS 下沉到原生实现相当于原生 DOM 节点有效降低了创建组件的开销优化 30%。长列表按需渲染。长列表是一个常用的但又经常遇到性能瓶颈的场景Skyline 对其做了一些优化使 scroll-view 组件只渲染在屏节点用法上有一定的约束并且增加 lazy mount 机制优化首次渲染长列表的性能后续我们也计划在组件框架层面进一步支持 scroll-view 的可回收机制以更大程度降低创建节点的开销。WXSS 预编译。同 WebView 传输 WXSS 文本不同Skyline 在后台构建小程序代码包时会将 WXSS 预编译为二进制文件在运行时直接读取二进制文件获得样式表结构避免了运行时解析的开销预编译较运行时解析快 5 倍以上。样式计算更快。Skyline 通过精简 WXSS 特性大幅简化了样式计算的流程。同时 Skyline 与小程序框架结合也更为紧密例如 Skyline 结合组件系统实现了 WXSS 样式隔离、基于 wx:for 实现了节点样式共享相比于 WebView 推测式样式共享更为精确、高效。降低内存占用。在 WebView 渲染模式下一个小程序页面对应一个 WebView 实例并且每个页面会重复注入一些公共资源。而 Skyline 只有 AppService 线程且多个 Skyline 页面会运行在同一个渲染引擎实例下因此页面占用内存能够降低很多还能做到更细粒度的页面间资源共享如全局样式、公共代码、缓存资源等。
总体上由于 Skyline 在渲染流程上更加可控我们能让小程序的特性尽可能融合进渲染流程中完成还有很多在细节上的优化比如对 rpx 的处理、image modewidthFix 的处理等都是融入渲染流程中而避免在 JS 做太多额外的计算就不再一一介绍。另外我们也在持续优化中Skyline 会是之后小程序性能优化的重点。
至于目前整体的性能情况我们从已上线的小程序数据观测到基础库 3.0.0 glass-easel 带来的优化暂未体现启动耗时方面即点击到完全渲染LCP的耗时WebView 对比 Skyline 为 2492ms vs 2052ms减少 17.6%渲染阶段耗时方面即框架建树到完全渲染LCP的耗时WebView 对比 Skyline 为 626ms vs 312ms减少 50%。 根除旧有架构的问题
在基于 Web 体系的架构下小程序的部分基础体验会受限于 WebView 提供的能力特别是 iOS WKWebView 限制更大一些使得一些技术方案无法做得很完美留下一些潜在的问题。
原生组件同层渲染更稳定。iOS 下原生组件同层渲染的原理先前有介绍过本质上是在 WKWebView 黑盒下一种取巧的实现方式并不能完美融合到 WKWebView 的渲染流程因此很容易在一些特殊的样式发生变化后同层渲染会失效而在 Skyline 下可以很好地融合到渲染流程中因此会更稳定。无需页面恢复机制。iOS 下 WKWebView 会受系统的管理当内存紧张时系统就会将不在屏的 WKWebView 回收会使得小程序除前台以外的页面丢失虽然在页面返回时我们对页面做了恢复但页面的状态并不能 100% 还原而在 Skyline 下则不再有该问题。无页面栈层数限制。由于 WebView 的内存占用较大页面层级最多有 10 层而 Skyline 在内存方面更有优势因此在连续 Skyline 页面跳转复用同一引擎实例的情况下不再有该限制。 全新的交互动画体系
我们发现要达到类原生的体验渲染性能与交互动画缺一不可渲染性能能让页面更快渲染出来而交互动画能让浏览页面的体验更佳。但在 Web 体系下难以做到像素级可控交互动画衔接不顺畅究其原因在于缺失了一些重要的能力为此我们提供一套全新的交互动画能力。
Worklet 动画机制。在原来双线程的架构下若要对界面元素做逐帧动画是需要频繁在逻辑层和渲染层之间通信的这会带来较大的延迟动画也就不会流畅。而 Worklet 动画正是为了解决这类问题而诞生的其运行机制与 WXS 类似但比 WXS 更靠近渲染流程而性能更好而且支持的特性更多可扩展性更强这个是 Skyline 交互动画体系的基础。手势系统。在原生的交互动画里手势识别与协商是一个很重要的特性而这块在 Web 体系是缺失的因此 Skyline 下补全手势系统相关特性包括常用手势的识别如缩放、拖动、双击等还有很重要的手势协商机制在遇到手势冲突常见于滚动容器下时决定让哪个手势生效以实现更顺畅的动画衔接。自定义路由与共享元素。页面间的自定义转场动画在原生应用里也是一个很常见的交互动画。在原来的小程序架构下每个页面都是独立的 WebView 渲染互相隔离其跨页能力是基本不具备的。因此Skyline 提供了一套自定义路由机制能实现市面上大多数页面转场动画同时也提供了共享元素机制能很方便地做到同一元素在页面间飞跃的效果。
此外对内置组件的扩展也是重要一环特别是 scroll-view 组件我们优化了下拉刷新的体验并且实现“下拉二楼”的交互也添加很多控制能力这都是些在 Web 下很难做到又非常重要的特性。总之这套全新的交互动画体系是 Skyline 能实现类原生交互体验的关键。 释放更多高级能力
除了上面提到的交互动画能力外Skyline 所能释放的能力还远不止于此借助 Skyline 的特点我们还提供以下新的组件
grid-view 瀑布流组件。瀑布流是一种常用的列表布局方式得益于 Skyline 在布局过程中的可控性我们直接在底层实现并提供出来渲染性能要比 WebView 更优。snapshot 截图组件。大多数小程序都会基于 canvas 实现自定义分享图的功能但分享图的布局较复杂时canvas 的方案实现成本会更大而 Skyline 是具备对 WXML 子树截图的能力的因此我们直接封装后开放出来这样能复用更完善的 WXSS 能力极大降低开发成本。
除了新增的组件还有不少是原有内置组件扩展的小特性这里就不一一介绍可 查看文档 或 更新日志。未来我们还会持续在 Skyline 上开放更多高级功能如全局跨页面组件scroll-view 列表节点 builder 模块支持节点可回收等更多可查看 文档特性状态 一栏同时也欢迎开发者在社区给我们提议。 至此Skyline 的主要特点已基本介绍完毕更完整的介绍、用法、迁移指引、注意点等等请查阅 文档。建议开发者现在就使用起来尽早享受到 Skyline 带来的优化和丰富的特性如果开发中遇到问题可在开发者社区发贴反馈我们也会邀请加入沟通交流群。
