对于小程序性能提升这件事，这些业务有经验

小程序 Skyline 是由小程序团队自研提供的一套 GUI 渲染引擎，采用精简高效的渲染管线，提供一系列增强特性，小程序开发者可依此实现媲美 App 原生的用户交互体验。

相比原有的传统双线程架构，Skyline 渲染引擎有以下特点：

1. 无需为每个页面新建一个 WebView 引擎实例（实例共享），减少了内存、启动时间开销。
2. 框架代码之间无需再通过 JSBridge 进行数据交换，减少了大量通信时间开销。
3. 界面更不容易被逻辑阻塞，进一步减少卡顿。
4. 支持更多原生特性，如酷炫的转场动画、完善的手势系统、长列表回收机制等

在小程序开发者的支持下，Skyline 渲染引擎接入量同比增长 17 倍，PV 同比增长 4 倍。接入的小程序实测启动耗时平均降低 20%，跳页耗时平均降低 50%，用户的使用体验变得丝滑流畅！

「同程旅行」小程序 首屏时间对比（单位 ms）

如果你想深入了解，可阅读Skyline 文章合集。

Skyline 为开发者提供了一套可以媲美原生交互体验的增强模式，开发者可以根据业务的需要来灵活的接入 Skyline，从而达到局部或全部的原生体验。

在编码上，Skyline 与 WebView 模式保持一致，仍使用 WXML 和 WXSS 编写界面。并且微信小程序支持页面使用 WebView 或 Skyline 任一模式进行渲染，Skyline 页面可以和 WebView 页面混跳，因此开发者可以按照「页面粒度」或「分包粒度」逐步适配。

如果你的小程序刚刚起步或业务不是很复杂，接入Skyline很简单，你不需要多少工作量就可完成适配改造工作。

但如果你的小程序业务复杂或流量巨大，想在不影响线上用户体验的情况下接入 Skyline，不知道如何下手，可以看看其他团队怎么做的。

本文分享同程旅行小程序开发团队接入Skyline的过程经验，一起来看看他们是怎么做的吧！

方案确定

作为微信生态内的头部应用，「同程旅行」小程序承载着火车票、机票、酒店等高频复杂的出行服务场景。在长期的 WebView 架构演进中，团队逐渐遇到了性能优化的天花板（低端机型页面切换白屏时间长、复杂列表滚动掉帧、原生组件同层渲染不稳定）。

随着 Skyline 的推出，同程旅行启动了架构升级专项。面对庞大的存量代码，以及众多的业务线，摆在团队面前的有两条路：

考虑到首页业务逻辑极度复杂且流量巨大，主包体积受限无法承载两套代码。同程最终选择了“适配方案”。

在保持功能不变的基础上，先完成对 Skyline 渲染引擎的兼容，待运行稳定后，再分步接入 Skyline 的增强特性（Worklet、手势等）。

页面样式改造

Skyline 与 WebView 的主要差异在于样式支持度，因此大部分兼容工作主要集中在样式适配，这里可以利用开发者工具的 WXML 调试工具，通过定位到有问题的节点，分析对应的样式兼容性。

对于具体样式兼容的策略上，由于 Skyline 中部分样式的默认值与 web 不同，因此使用默认值而省略的样式需要显示指定，如 flex-direction: row，但此处更推荐开启默认 Block 布局和默认 ContentBox 盒模型，默认值处理与 web 更接近。

这部分改造可参考Skyline WXSS 样式支持与差异。

接入 Skyline 原生能力

完成基础兼容只是第一步，真正的质变体验来自于 Skyline 独有的增强特性。

高性能交互与 Worklet

同程在首页搜索栏的吸顶动画中引入了 Worklet。通过将动画逻辑运行在 UI 线程，搜索栏随页面滚动的变化不再有任何延迟。此外，城市选择页和日历页采用了半屏路由（Half Screen）结合手势驱动，用户可以通过下滑或侧滑手势自然关闭页面，这种交互此前在 WebView 中极难流畅实现。

复杂列表性能

在门票和里程商城的瀑布流场景中，利用 grid-view 和 scroll-view 替代传统的 View 循环。组件内部实现了节点的回收复用，即使加载上千条数据，内存占用依然平稳，彻底解决了长列表滚动的卡顿问题。

丝滑的转场动画

利用共享元素动画，同程实现了商品卡片点击后平滑放大过渡到详情页的效果，消除了页面切换时的割裂感。

灰度上线与监控

架构升级伴随着风险，同程采取了严谨的灰度策略：

上线后，同程旅行持续使用 We 分析平台进行性能各指标的监控，包括启动耗时、页面间跳转耗时、闪退异常监控、内存监控、白屏监控等。

另外还通过 we 分析平台实验工具，创建 AB 实验，通过指定页面，指定基础库版本或者客户端版本，开启 skyline 和 webview 渲染引擎的实验，对比 AB 版本中的支付人数、次数等业务相关信息，以及启动耗时、初次渲染耗时、次页路由耗时、资源初始化耗时等性能相关数据，制定下一步的研发规划。

写到最后

小程序团队持续深耕 Skyline，目前微信鸿蒙 OS 版已灰度支持 Skyline 渲染引擎，另外还针对文本布局、JS 调用原生接口的性能进行了专项优化。

目前，越来越多的小程序接入了 Skyline，这里列举几个案例，欢迎前往各小程序体验（由左向右小程序依次为：京东购物、同程旅行、朴朴超市、有赞、腾讯频道）

看完这些的 Skyline 案例，你是不是也迫不及待想要尝试了呢？那就赶紧行动起来吧！

无论你在接入 Skyline 的过程中，还是使用期间，遇到了任何卡点难题，或是有宝贵的优化建议，欢迎在微信开放社区留言告诉我们！