微信小程序全新渲染引擎Skyline（入门篇）

前言

最近看小程序文档的时候发现了 swiper 组件新增了 Skyline 特有的属性，直接使用竟然没有效果。

不信邪的我打算来研究研究究竟什么是 Skyline！经过一系列文档阅读与实践，长时间闭门造车的我打开了新世界的大门，我惊讶的发现 Skyline 引擎很可能是微信小程序未来发展的重点方向，有着更类似原生的交互体验，新增的特性让人连连称叹，特以此文来总结性地介绍一下 Skyline。

双线程模型

了解 Skyline 之前，我们有必要重新复习一下什么是小程序的双线程模型。

如官方文档所言，小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理：

• 
  
• 渲染层的界面使用了WebView 进行渲染，一个小程序存在多个界面，所以渲染层存在多个WebView线程；
  
• 逻辑层采用JsCore线程运行JS脚本。
  

这两个线程的通信会经由微信客户端（原生） 做中转，逻辑层发送网络请求也经由微信客户端 （原生） 转发，有了微信小程序客户端 （原生） 作为媒介系统，使得我们开发者能够专注于数据与逻辑。

如上所述，小程序的通信模型如下图所示。

什么是 Skyline 引擎

前文提到，基于 WebView 和原生控件混合渲染的方式，小程序优化扩展了 Web 的基础能力，所以小程序相对于普通的Web页面有着更为良好的性能与体验。

由于 Web 在移动端的表现与原生应用仍有一定差距，亦或许是 Web 的优化遇到了瓶颈，为了进一步优化小程序性能，微信在 WebView 渲染之外新增了一个渲染引擎，也就是我们本文的重磅主角： Skyline，它使用更精简高效的渲染管线，并带来诸多增强特性，让 Skyline 拥有更接近原生渲染的性能体验。

Skyline 引擎 vs Webview 引擎

我们知道：WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿，大致流程如下图所示。

但是，在 Skyline 环境下改变了这个情况，它创建了一条渲染线程来负责计算图层布局，图层的绘制以及整合图层页面等渲染任务，并在 AppService 中划出一个独立的上下文，来运行之前 WebView 承担的 JS 逻辑、DOM 树创建等逻辑。

据官方统计数据表明，Skyline 与 WebView 性能相比，具有如下优势：

Skyline 的首屏时间比 WebView 快约 66%

单个页面 Skyline 的占用比 WebView 减少约 35%

单个页面 Skyline 的占用比 WebView 减少 35%，两个页面 Skyline 的内存占用比 WebView 减少 50%，随着打开的页面变多，内存差距越明显。

Skyline 引擎的优点

• 
  
• 界面更不容易被逻辑阻塞，进一步减少卡顿
  
• 无需为每个页面新建一个 JS 引擎实例（WebView），减少了内存、时间开销
  
• 框架可以在页面之间共享更多的资源，进一步减少运行时内存、时间开销
  
• 框架的代码之间无需再通过 JSBridge 进行数据交换，减少了大量通信时间开销
  
• 保持和原有架构的兼容性，基于 WebView 环境的小程序代码基本上无需任何改动即可直接在新的架构下运行
  

更多Skyline的特性更新请详见Skyline 渲染引擎 / 概览 / 特性 | 微信开放文档

Skyline 引擎的缺点

• 
  
• WXS效率可能有所下降 (WXS 由于被移到 AppService 中，虽然逻辑本身无需改动，但询问页面信息等接口会变为异步，效率也可能有所下降)
  

但是，也不必过多的担心，微信推出了新的 Worklet 机制，它比原有的 WXS 更靠近渲染流程，用以高性能地构建各种复杂的动画效果。

Skyline 引擎的使用

前文提到，我想使用 swiper 组件新增的 Skyline 特有属性无果，是因为我没有完成 Skyline的配置。如果想要使用 Skyline引擎，我们可以按页面级别来选择性的配置是走 Skyline 引擎或是 Webview 引擎来渲染。

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

// page.json
{
"renderer": "webview"
}

配置完成之后，我们就可以愉快的使用 Skyline 专有的新特性了。

Skyline 引擎的兼容性

我们可能会担心开启了 Skyline 的渲染模式会不会带来兼容性问题。官方表示：

所以我们完全可以放下对兼容性的顾虑，拥抱新的 Skyline 引擎，让大部分的用户优先体验到新一代微信小程序的渲染技术，做第一批吃螃蟹的人！对于我们开发者而言，有必要深入了解一下Skyline引擎的更新带来了哪些开发层面的变化与创新，毕竟，吃螃蟹的人会越来越多嘛。

后记

感谢您的阅读，本文仅为微信小程序 Skyline 引擎的入门介绍篇，后续会持续更新有关 Skyline 引擎相关实际操作及使用的文章，如有兴趣，欢迎持续关注。