Mini Program
取消
Development
中文
EN
取消
  • Guide

    • # Characteristic

    Skyline's primary goal is performance, so CSS features have been significantly streamlined to meet basic needs, and currently Skyline only retains a more modern CSS collection. On the other hand, Skyline adds a number of features that enable developers to build native-like experiences. In coding, Skyline is consistent with the WebView pattern, still writing interfaces in WXML and WXSS. Skyline-adapted Mini Programs can seamlessly and automatically revert back to WebView rendering on lower versions or platforms that do not support Skyline without the new features of Skyline.

    # Support for mixing with WebView

    Weixin Mini Program supports pages rendered using either WebView or Skyline mode, and Skyline pages can be mixed with WebView pages, so developers can adapt page granularity or subgranularity as needed.

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

// Webview rendering
{
    "renderer": "webview"
}

    // app.json
{
  "subPackages": [
    {
      "root": "packageA",
      "pages": ["pages/cat"],
      "componentFramework": "glass-easel",
      "renderer": "skyline",
    },
  ],
}



    # Provide better performance

    Skyline is more streamlined than WebView in the rendering process, which has more precise control over the rendering of nodes, and tries to avoid the layout and rendering of invisible areas to ensure higher rendering performance. Because of the different design and compatibility of WebView, the implementation of rendering waterline is more complicated.

    In rasterization strategy, Skyline adopts synchronous rasterization strategy, and WebView is asynchronous block rasterization strategy. The two strategies have their own merits, but WebView's strategy has some difficult to avoid problems, such as: rapid scrolling will appear white screen problems; The DOM update during the rolling process will be out of sync, which will affect the user experience.

    On this basis, we have implemented many optimization points.

    # 1. Single threaded version of the component framework

    A new version of the component framework, glass-easel, is enabled by default under Skyline, which adapts to Skyline's single-threaded model, resulting in a significant reduction in tree building process time (30-40 percent optimization), while setData calls are free of communication and serialization overhead.

    # 2. Components sink

    The behavior of Skyline built-in components is closer to the native experience, and some built-in components (such as scroll-view, swiper, etc.) have better performance and interactive experience with the help of the underlying implementation. At the same time, we sank some of the built-in components (such as view, text, image, etc.) from JS to the native implementation, equivalent to the native DOM node, reducing the cost of creating components (about 30% optimization).

    # 3. Long lists rendered on demand

    Long list is a common but often encountered performance bottlenecks of the scene, Skyline has done some optimization to make scroll-view components only render on the screen node (there are certain constraints on usage), We also added the lazymount mechanism to optimize the performance of rendering long lists for the first time, and we plan to further support the scroll-view recyclability mechanism at the component framework level to reduce the node creation overhead.

    # 4. WXSS precompiled

    Unlike WebView, which transmits WXSS text, Skyline precompiles WXS as a binary file when building a Weixin Mini Program code bundle in the background, and reads the binary file directly at runtime to obtain a style sheet structure, avoiding the overhead of runtime parsing (precompilation is more than five times faster than runtime paring).

    # 5. Style calculations are faster

    Skyline dramatically simplifies style calculations by streamlining WXSS features. On style updates, unlike full WebView calculations, Skyline uses local style updates to avoid multiple traversals of the DOM tree.Skyline is also more closely integrated with the Weixin Mini Program framework, for example: the Skyline combined component system enables WXSS style isolation and wx: for node style sharing (more precise and efficient than WebView speculative style sharing).In the node change, inline style and inheritance style update, Skyline also carried out some optimization, so as to ensure the performance of style calculation.

    In addition, for rpx units, we natively support them directly in the style calculation phase, which avoids doing too much extra calculation at the JS level.

    <!-- 样式共享目前暂未自动识别，可手动声明 list-item 属性开启 -->
<scroll-view type="list" scroll-y>
    <view wx:for="{{list}}" list-item>{{index}}</view>
</scroll-view>

    # 6. Reduce memory usage.

    In WebView rendering mode, a Weixin Mini Program page corresponds to a WebView instance, and each page injects some common resources repeatedly.Skyline has only AppService threads, and multiple Skyline pages run under the same rendering engine instance, which reduces page memory usage and allows for more granular sharing of resources (global styles, common code, cache resources, etc.) between pages.



    # Eradicate the problems of the old architecture

    Under Web-based architectures, some of the basic experiences of Weixin Mini Program are limited by the capabilities provided by WebView (especially with a larger limitation on iOS), making some technical solutions impossible to do perfectly, leaving some potential problems.

    # 1. Native components rendered at the same level more stable

    IOS native components The principle of the same layer rendering As previously described, essentially a clever implementation under the WKWebView black box does not integrate perfectly into the WKWebView rendering process, so it is easy to lose the same layer of rendering after some special style change.In Skyline can be well integrated into the rendering process, so it will be more stable.

    # 2. No page recovery mechanism is required

    Under iOS WKWebView will be managed by the operating system.When memory is tight, the operating system recycles the WKWebView that is not on the screen, causing the Weixin Mini Program page to be lost except for the front desk. Although we recovered the page when it returned, the page's state was not 100% restored.This is no longer the case with Skyline.

    # 3. No limit on the number of page stack layers

    Because WebView has a large memory footprint, with page tiers up to 10 layers, and Skyline has a better memory advantage, there is no longer this limit when there are continuous Skyline page transitions (reusing the same engine instance).



    # A new system of interactive animation

    To achieve the experience of a class-native application, in addition to having good rendering performance, it is also critical to do good interactive animation. In the Web system, it is difficult to achieve pixel-level controllable, interactive animation convergence is not smooth, the reason lies in the lack of some important capabilities. To this end, Skyline offers a new set of interactive animation capabilities.

    # 1. Worklet animation

    Worklet mechanism is the basis of Skyline interactive animation system, it can be very convenient to run JavaScript code in the rendering thread,Thus, the animation module based on the Worklet mechanism can run the animation logic synchronously during the rendering thread, so that the animation will no longer have delayed frames.

    # 2. Gesture System

    Gesture recognition and negotiation are important features in native app interactive animation that are missing in the Web, so Skyline offers a gesture system based on the Worklet mechanism.

    • Supports the recognition of common gestures, such as zooming, dragging, double-clicking, etc., and can render threads to simultaneously listen to gestures and execute gesture-related logic.
    • Support gesture negotiation, enabling you to decide which gesture to take effect when faced with a gesture conflict, often under a scrolling container, for smoother animated coordination.

    # 3. Custom routing

    Switching between pages for a custom turn animation is also a common interaction animation in native apps.In the original Weixin Mini Program architecture, each page is an independent WebView rendering, isolated from each other, its cross-page ability is basically not available.Therefore, Skyline provides a custom routing module based on the worklet mechanism, which can achieve most page transitions on the market.

    # 4. Shared element animation

    Support for cross-page sharing of elements makes it easy to "share" elements from the previous page to the next with transition animation, and supports a customizable interface for custom transition animation.

    # 5. Built-in component extensions

    The expansion of built-in components is also an important part, especially the scroll-view component, many interactive animation and scroll closely related, Skyline added a lot of Web is difficult to do and very important features.

    • Built-in dropdowns brush up on new implementations and refine related events. The original WebView implementation is based on transform, the performance is not good enough and the animation connection is not smooth.
    • Provide mechanisms for "downstairs second floor" interactions.
    • Provide sticky ceiling components, which can easily realize interlaced switching of ceiling elements.
    • Enable scroll-view components to scroll even when the content is not overflowing, allowing users to get timely interactive feedback.
    • Provide scroll-view components with more control, such as min-drag-distance, scrollend events, scrollend causes (isDrag), and more.
    • Provides a native swiper implementation that performs better than WebView's transform-based implementation.



    # More advanced capabilities

    In addition to the series capabilities of interactive animation, we also offer many advanced features to take advantage of Skyline.

    # 1. Provides grid-view waterfall stream component

    Waterfall flow is a common method of list layout, thanks to the control of Skyline in the layout process, we directly implement and provide the underlying rendering performance than WebView better.

    # 2. Provides snapshot snapshot component

    Most Weixin Mini Program will be based on canvas to achieve custom sharing map function, on the one hand, need to manually implement the canvas drawing instructions, more cumbersome;On the other hand, when the layout of sharing diagrams is more complex, or when making long diagrams, it will be limited by the system's limitations on canvas size, and the implementation of canvas will be costly. Thanks to Skyline's control over the rendering process, Skyline can directly take screenshots of the WXML subtree, so we provided the screenshot component directly, which allows us to reuse the better WXSS capabilities and significantly reduce development costs.

    # 3. scroll-view Component support list inversion

    In a chat conversation, lists are often scrolled in the opposite direction (up to the bottom). Using a forward scrolling to simulate would involve a lot of redundant logic and would be prone to bounces, and the reverse property provided by scroll-view does a good job of solving this problem.



    For more planned features, see feature status