关于微信小程序新提供的渲染引擎Skyline的理解

对Skyline的理解

1、背景

小程序一直以来都是采用的AppService和 WebView的双线程模型,基于WebView和原生控件混合渲染的方式,小程序优化扩展了Web的基础能力,保证了再移动端上的良好性能和用户体验。为了进一步优化小程序性能,提供更为接近原生的用户体验,在WebView渲染之外新增了一个渲染引擎Skyline。

2、Skyline的特点

当小程序基于WebView环境下,WebView的DOM数创建、JS逻辑、CSS解析、Layout、paint(Composite)、样式计算都发生在同一线程上。如果在WebView上执行过多的JS逻辑可能回造成渲染阻塞,导致界面卡顿。Skyline则创建了一条渲染线,单独负责Layout、paint(Composite)、应用样式任务。并在AppService中划出一个独立的上下文来运行之前WebView承担的js逻辑、DOM树创建、样式计算。其特点是:

  • 界面更不容易被逻辑阻塞,减少界面卡顿
  • 不用给每个页面都新建一个JS引擎实例,减少了内存和节约了时间
  • Skyline框架可以在页面之间共享更多的资源,进一步减少运行时的内存
  • Skyline框架的代码之间无需再通过JSBridge进行数据交换,减少了通信时间开销

Notes:Skyline能够很好地兼容原来的框架。基于WebView环境的小程序代码基本上无需任何改动就可以在新的框架下运行。新的渲染流程如下图所示:
在这里插入图片描述

### 微信小程序 Skyline 开发概述 微信小程序 Skyline 提供了一种的渲染机制,旨在提升应用性能并改善用户体验。通过采用更高效的布局算法和绘制方式,Skyline 能够显著减少页面加载时间和资源消耗[^1]。 对于希望利用这一特性构建高效应用程序的开发者来说,理解如何正确配置和使用 Skyline 至关重要。下面是一些关键知识点: #### 配置 Skyline 渲染模式 要启用 Skyline 渲染引擎,需在 `app.json` 文件中设置 `"renderMode": "skyline"` 参数。此参数告知编译工具应优先考虑使用 Skyline 进行组件渲染[^2]。 ```json { "pages":[], "window":{ ... }, "usingComponents": {}, "renderMode": "skyline" } ``` #### 实现常见交互效果 基于 Skyline 的开发同样遵循标准的小程序编程模型,这意味着大多数现有功能仍然适用。例如,创建轮播图可以通过 WXML 和 WXSS 结合 JavaScript 来完成。由于 Skyline 对动画的支持更加友好,因此这些视觉元素的表现会更为流畅自然[^3]。 ```html <!--index.wxml--> <swiper indicator-dots="{{true}}" autoplay="{{true}}"> <block wx:for="{{images}}" wx:key="unique"> <swiper-item> <image src="{{item.src}}"></image> </swiper-item> </block> </swiper> ``` ```css /* index.wxss */ swiper { height: 300rpx; } swiper image { width: 100%; height: 100%; } ``` #### 解决 URL 格式错误引发的问题 当遇到因路径格式不当而导致的功能异常时,确保所有跳转链接均以正斜杠 `/` 开始是非常重要的。这不仅适用于导航操作,也涵盖了 API 请求中的相对路径定义[^4]。 ```javascript // 正确做法 wx.navigateTo({ url: '/pages/productDetail/index?id=1' }); ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值