小程序 Skyline 在性能方面有什么秘籍？
微信开发者约 5 分钟小程序 Skyline 是由小程序团队自研提供的一套 GUI 渲染引擎，采用精简高效的渲染管线，提供一系列增强特性，小程序开发者可依此实现媲美 App 原生的用户交互体验。
在小程序开发者的支持下，Skyline 渲染引擎接入量同比增长 17 倍，PV 同比增长 4 倍。接入的小程序实测启动耗时平均降低 20%，跳页耗时平均降低 50%，用户的使用体验变得丝滑流畅！
很多开发者也会有疑问：Skyline有什么秘籍，可以在性能方面这么优秀？
深入 Skyline
在此之前，小程序一直采用 AppService 和 WebView 双线程模型，使用 WebView 和原生控件混合渲染渲染。
这套架构相比于普通网页，将原本逻辑 JS 和界面渲染共用同个线程，分拆成两个不同的线程分别处理逻辑和渲染，通过一系列的优化，保证了小程序可以在移动端上有良好的性能和用户体验。
随着业务的不断增长，小程序页面变得愈加复杂，这种架构就会出现一些问题：
JSBridge 进行跨线程通信，且涉及数据的序列化与反序列化。这导致高频交互（如页面滚动、手势系统）存在明显的延迟。虽然推出了 WXS 试图让部分逻辑在渲染层运行，但其语法受限且维护成本高，往往只能作为降级方案。WebView 与原生组件（如 Map, Video）的混合渲染（同层渲染）依赖于底层系统的实现手段。这导致同一套代码在不同端的表现往往不一致，且存在层级（z-index）控制混乱、滚动穿透等“黑盒”问题。WebView 模式下，每打开一个页面就需要初始化一个新的 WebView 实例（包含完整的 JS 引擎和 DOM 解析器），内存开销巨大，低性能手机很容易出现白屏或卡顿问题。尽管小程序团队持续对 Webview 架构进行修补，但受限于 Web 历史包袱和渲染管线的复杂性，始终难以彻底解决上述问题。为此，小程序团队重构了渲染体系，推出了 Skyline 渲染引擎。
相比于传统双线程架构， Skyline 有以下改变：
1. 独立的渲染线程与高效的管线
Skyline 摒弃了浏览器复杂的渲染流程，创建了一个专用的渲染线程（UI 线程）来专门负责 Layout（布局）、Composite（合成）和 Paint（绘制）任务。这使得渲染管线更加精简高效，能够直接对接底层图形库，性能更加接近原生。
2. 渲染逻辑去 WebView 化
原本在 WebView 内部负责的 JS 逻辑执行、DOM 树构建与计算工作被剥离，移入到了 AppService 的独立上下文中。这意味着底层不再需要为每个页面实例化 WebView，页面创建速度大幅提升，内存占用显著降低。
3. 去除跨线程的通信耗时
在 Skyline 下，虽然逻辑与渲染依然并行，但负责生成界面描述的框架代码与开发者的业务逻辑运行在同一个共享上下文（Shared Context） 中。这意味着页面更新不再需要经过耗时的 JSBridge 序列化传输，而框架层面可以直接通过共享内存或同步调用的方式更新视图，彻底解决了跨线程通信带来的延迟问题。
4. 引入 Worklet 动画机制
为了彻底解决复杂交互的卡顿，Skyline 引入了 Worklet 机制。它允许将部分对时效性要求极高的动画和手势逻辑（如拖拽、半屏滑动）运行在 UI 线程中。这不仅替代了 WXS，更提供了构建高性能、丝滑的原生级动画交互的能力，同时支持跨页面的共享元素动画，让小程序的体验真正对齐原生应用。
相比原有的传统双线程架构，Skyline 渲染引擎有以下特点：
无需为每个页面新建一个 WebView引擎实例（实例共享），减少了内存、启动时间开销。框架代码之间无需再通过 JSBridge进行数据交换，减少了大量通信时间开销。界面更不容易被逻辑阻塞，进一步减少卡顿。 支持更多原生特性，如酷炫的转场动画、完善的手势系统、长列表回收机制等
更多 Skyline 渲染引擎特性可参考微信官方文档
在性能方面，Skyline 使小程序启动耗时成功平均降低 20%，跳页耗时大幅降低 50%，尤其在低端机型的对比中表现非常出色，以下是团队实测的对比数据。
首屏时间对比（单位 ms）
打开首页静置 30 秒内存占用对比（单位 MB）
切换页面后静置 30 秒内存占用对比（单位 M）
打开首页 CPU 利用率对比（单位 %）
「同程旅行」小程序 首屏时间对比（单位 ms）
更多性能对比可参考微信官方文档
按需接入 skyline
Skyline 为开发者提供了一套可以媲美原生交互体验的增强模式，开发者可以根据业务的需要来灵活的接入 Skyline，从而达到局部或全部的原生体验。
在编码上，Skyline 与 WebView 模式保持一致，仍使用 WXML 和 WXSS 编写界面。并且微信小程序支持页面使用 WebView 或 Skyline 任一模式进行渲染，Skyline 页面可以和 WebView 页面混跳，因此开发者可以按照「页面粒度」或「分包粒度」逐步适配。
写到最后
小程序团队持续深耕 Skyline，目前微信鸿蒙 OS 版已灰度支持 Skyline 渲染引擎，另外还针对文本布局、JS 调用原生接口的性能进行了专项优化。
目前，越来越多的小程序接入了 Skyline，这里列举几个案例，欢迎前往各小程序体验（由左向右小程序依次为：京东购物、同程旅行、朴朴超市、有赞、腾讯频道）
看完这些的 Skyline 案例，你是不是也迫不及待想要尝试了呢？那就赶紧行动起来吧！
无论你在接入 Skyline 的过程中，还是使用期间，遇到了任何卡点难题，或是有宝贵的优化建议，欢迎在微信开放社区留言告诉我们！