# Best practices

# Injection on demand

Skyline rely on Injection on demand Characteristics. After the on-demand injection feature is turned on, some of the performance of the Mini Program will change, which may cause compatibility issues (see the on-demand injection feature document for details).Therefore, it is recommended to start adapting Skyline First, turn on on-demand injection and test it properly to rule out the impact of this feature in advance.

# Progressive migration

For existing projects, it is recommended to migrate gradually, that is, open page by page, it is recommended to migrate the pages on the critical path using the Mini Program, so that the majority of users have a better experience.For new pages, it is recommended to open by default SkylineFor new projects, it is recommended to open the global directly, in addition to a better experience, but also to make the Mini Program's memory footprint is lower.

# Use local scrolling

in WebView The page is scrollable globally by default, so most developers use global scrolling directly.

1. Elements that do not require scrolling use the position: fixed Fixed location, such as custom navigation bar, which is global scrolling to simulate local scrolling, the scroll bar will show the location of the overflow
2. Customization for scrolling can only be done by configuring or API Provided in a manner such as Page.onPageScroll It also makes some features unattainable.

Therefore, Skyline Global scrolling is no longer available. Use the scroll-view Implementation, and later we can also target scroll-view Components provide more extensions.

In general, the interface layout is mostly a navigation bar + In the form of a rolling region, which provides a general practice (compatible with WebView）

<navigation-bar></navigation-bar>
<!-- By using the flex Layout, will scroll-view Set up flex:1 Take up the remaining space on the page -->
<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>

# Global Style Reset

Skyline Supported WXSS yes WebView Some necessary or commonly used features may be supported in the future, but will remain WebView State of the subset.

Therefore, in order to allow WebView The compatibility of the performance of the alignment as far as possible Skyline, while reducing code for repetitive settings, can be considered at the global or page level to apply the following WXSS Reset

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

# Optimizing Long List Performance

Skyline Down scroll-view Components come with on-demand rendering optimization, which greatly improves the rendering performance of long lists. scroll-view For granularity rendering on demand when one of its children is close to the scroll-view of viewport It will be returned and vice versa.

<!-- Following scroll-view The immediate child node has 5 individual View, at this time each view Can be rendered on demand -->
<scroll-view type="list" scroll-y>
    <view> a </view>
    <view> b </view>
    <view> c </view>
    <view> d </view>
    <view> e </view>
</scroll-view>
<!-- Following scroll-view The direct child node of the 1 individual View, rendering on demand does not play a role -->
<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>

In addition, the style of each item in the long list is basically the same, Skyline It also supports the style sharing of similar nodes, so that the style can be shared with other similar nodes only need to be calculated once, which greatly improves the performance of style calculation. In general, we use WXML Template syntax wx:for To expand the list, so you only need to declare the list item in list-item You can start style sharing (later versions will recognize wx:for Automatically enabled)

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

# Preload

The Mini Program has an important optimization is to preload the environment, including WebView Environment, AppService Thread, early injection of the base library, etc., and because most of the current Mini Program is still based on WebView Rendering, in order to save resources, the WeChat client does not automatically preload Skyline Environment (the strategy is continuously optimized on the basis of the actual situation), so we provide wx.preloadSkylineView Preload Skyline The interface of the environment, developers can jump to the Skyline The interface is invoked manually on the path of the page, it is recommended that you onShow Called after a delay in the life cycle, so that Skyline The page can be re-preloaded when returned

# Use Enhanced Features

In order to make the Mini Program experience close to the native App，Skyline Several new features have been added, including worklet Animation mechanism、Gesture system、Custom Routing、Shared Element AnimationEtc. These characteristics make Skyline Be able to make some WebView Below can not achieve or achieve the effect is not smooth interaction effect.

Consider in WebView Is not supported under the recommended way to experience a degradation of compatibility. Such as custom routing, also in the form of wx.navigateTo Interface jump page, in the Skyline You can jump to the page with a custom routing animation for a better experience, and WebView be fallback The same is true of the shared element animation feature, without the need for additional compatibility code.