# 最佳实践

# 按需注入

Skyline 依赖按需注入特性。按需注入特性开启后，小程序的部分表现会发生变化，有可能带来兼容问题（具体见按需注入特性文档）；因此建议在开始适配 Skyline 前，先开启按需注入并妥善测试，以提前排除该特性带来的影响。

# 渐进式迁移

对于已有的项目，建议渐进式迁移，即逐个页面打开，推荐迁移使用该小程序的关键路径上的页面，以便让大多数用户获得更好的体验；对于新增页面，建议默认开启 Skyline；而对于全新项目，建议直接全局打开，除了有更好的体验外，也能使小程序的内存占用更低

# 使用局部滚动

在 WebView 下，页面全局默认是可以滚动的，因此大多数开发者会直接使用全局的滚动，这使得

无需滚动的元素使用 position: fixed 固定位置，如自定义导航栏，这是用全局滚动模拟了局部滚动，此时滚动条的显示位置会溢出
针对滚动的自定义功能只能通过配置或 API 的方式提供，如 Page.onPageScroll 等，也使得部分特性无法实现

因此，Skyline 不再提供全局滚动，在需要滚动的区域使用 scroll-view 实现，后续我们也能针对 scroll-view 组件提供更多扩展。

一般来说，界面布局大多数都是导航栏 + 滚动区域的形式，这里提供一种常规做法（兼容 WebView）

<navigation-bar></navigation-bar>
<!-- 通过使用 flex 布局，将 scroll-view 设置 flex:1 以占据页面剩余空间 -->
<scroll-view type="list" scroll-y style="display: flex; flex-direction: column; flex: 1; width: 100%; overflow: auto;">
  <view wx:for="{{items}}" list-item></view>
</scroll-view>

# 全局样式重置

Skyline 支持的 WXSS 是 WebView 的子集，未来可能会再支持一些必要的或常用的特性，但还是会一直保持 WebView 子集的状态。

因此，为了让 WebView 的兼容表现尽量对齐 Skyline，同时减少重复设置的代码，可以考虑在全局或页面级应用如下 WXSS Reset

page,
view,
text,
image,
button,
video,
map,
scroll-view,
swiper,
input,
textarea,
navigator {
  position: relative;
  box-sizing: border-box;
  background-origin: border-box;
  isolation: isolate;
}
page {
  height: 100%;
}

# 优化长列表性能

Skyline 下的 scroll-view 组件自带按需渲染的优化，这在很大程度上提升了长列表的渲染性能，这里是以 scroll-view 的直接子节点为粒度来按需渲染的，当其某个子节点接近 scroll-view 的 viewport 时就会被渲染，反之则会回收。

<!-- 以下 scroll-view 的直接子节点有 5 个 view，此时每个 view 都能按需渲染 -->
<scroll-view type="list" scroll-y>
    <view> a </view>
    <view> b </view>
    <view> c </view>
    <view> d </view>
    <view> e </view>
</scroll-view>
<!-- 以下 scroll-view 的直接子节点只有 1 个 view，按需渲染并不能发挥作用 -->
<scroll-view type="list" scroll-y>
    <view>
        <view> a </view>
        <view> b </view>
        <view> c </view>
        <view> d </view>
        <view> e </view>
    </view>
</scroll-view>

此外，长列表的每一项的样式基本是一样的，Skyline 也支持了相似节点的样式共享，使得样式只需要计算一次便能共享给其它相似节点，大大提升了样式计算的性能。一般来说，我们会用 WXML 模板语法 wx:for 来展开列表，因此只需要在列表项声明 list-item 就能启动样式共享（后续版本会识别 wx:for 而自动启用）

<scroll-view type="list" scroll-y>
    <view wx:for="" list-item> {{index}} </view>
</scroll-view>

# 预加载

小程序有个重要优化是会预加载环境，包括 WebView 环境、AppService 线程、提前注入基础库等，而由于目前小程序大多还是以 WebView 渲染，为了节省资源，微信客户端并不会自动预加载 Skyline 环境（后续根据实际情况不断优化策略），因此我们提供了 wx.preloadSkylineView 预加载 Skyline 环境的接口，开发者可以在可能跳转到 Skyline 页面的路径上手动调用该接口，建议在 onShow 生命周期里延迟一段时间后调用，使得 Skyline 页面被返回时能够重新预载

# 使用增强特性

为了使小程序的体验能够跟接近原生 App，Skyline 新增了若干个特性，包括 worklet 动画机制、手势系统、自定义路由、共享元素动画等，这些特性使得 Skyline 能够做出一些 WebView 下无法实现或实现效果不够流畅的交互动效。

考虑在 WebView 下都不支持，推荐以一种体验降级的方式去兼容。比如自定义路由，同样是以 wx.navigateTo 接口跳转页面，在 Skyline 下可以以自定义路由动画的方式跳转页面，以获得更好的体验，而 WebView 则 fallback 到朴素的从右到左的页面切换动画，同理，共享元素动画特性亦是如此，也无需额外的兼容代码。