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

    • # Characteristic

    Skyline With performance as the primary goal. Therefore, CSS Features have been greatly streamlined under the premise of meeting basic needs, and currently Skyline Keep only the more modern CSS Assemble. Skyline, on the other hand, A large number of features have been added to enable developers to build Mini Programs that resemble native experiences. In coding, Skyline and WebView The pattern remains consistent, and still uses WXML and WXSS Write the interface. In the absence of a Skyline In the case of new features, adapted to the Skyline The Mini Program is in a low version or not supported Skyline The platform can be seamlessly and automatically returned to the WebView Rendering.

    # Support and WebView Mixed use

    Mini Program Support Page Use WebView or Skyline Render in any mode, Skyline Pages can and WebView Page mix jump, developers can adapt the page granularity as needed Skyline。

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

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

    # Provide better performance

    Skyline The rendering process is more WebView More streamlined, it has more precise control over the rendering of nodes, and avoids the layout and drawing of invisible areas as much as possible to ensure higher rendering performance. WebView Due to its different design and compatibility, the implementation of rendering pipeline is more lengthy and complex.

    On the rasterization strategy, Skyline Using a strategy of synchronous rasterization, WebView Is an asynchronous block-rasterization strategy. Both strategies have their merits, but WebView There are some hard to get around issues with the strategy, such as the white screen problem with fast scrollingOf the scrolling process. DOM Updates can be out of sync and affect the user experience.

    On this basis, we have further achieved many optimization points.

    # 1. Single Threaded Version Component Framework

    Skyline The new version of the component framework is enabled by default under Glass-easel, the version adapted to the Skyline Of the single-threaded model, so that the construction process time effectively reduced (optimized 30% -40%) and setData Calls also no longer have communication overhead and serialization overhead.

    # 2. Component sinking

    Skyline Built-in components behave more like native experiences, and some built-in components such as scroll-view、swiper With the help of the underlying implementation, there is better performance and interactive experience. At the same time, we include some of the built-in components (such as view、text、image Etc.) from JS Sink to native implementation, equivalent to native DOM Nodes, reducing the overhead of creating components (optimized for 30% Left and right).

    # 3.Long List Render on Demand

    Long lists are a common but often performance bottleneck scenario, Skyline Some optimizations have been made to make scroll-view Components only render on screen nodes (there are some restrictions on usage), and add lazy mount Mechanism to optimize the performance of the first rendering of long lists, and we plan to further support it at the component framework level scroll-view To reduce the overhead of creating nodes to a greater extent.

    # 4. WXSS Precompiled and translated

    with WebView transmission WXSS Text Different, Skyline When the Mini Program code package is built in the background, the WXSS Precompiled as a binary file, read the binary file directly at runtime to get the stylesheet structure, avoiding the overhead of run-time parsing (precompiled faster than run-time parsing 5 Times more).

    # 5. Style calculations are faster

    Skyline By streamlining WXSS Features greatly simplify the flow of style calculation. On style updates, with the WebView Full volume calculation is different, Skyline With local style updates, you can avoid the need for DOM Multiple traversals of the tree. Skyline It is also more closely integrated with the Mini Program framework, such as: Skyline Combined with the component system to achieve WXSS Style isolation, based on wx:for Node style sharing is implemented (compared to the WebView Speculative style sharing is more precise and efficient. On node changes, updates to inline styles, and inheritance styles, Skyline Some optimizations are also made to ensure the performance of style calculation.

    In addition, for rpx Units, which we support natively directly in the style calculation phase, thus avoiding the need for JS Level to do too many extra calculations.

    <!-- Style sharing is not automatically recognized at this time, you can manually declare list-item Property Open -->
<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 Mini Program page corresponds to a WebView Instance, and each page repeatedly injects some common resources. and Skyline only AppService Thread, and multiple Skyline Pages run in the same instance of the rendering engine, which allows for much lower page footprint and finer-grained resource sharing between pages (such as global styles, common code, cached resources, etc.).


    # Eradicate the problems of the old structure

    On the basis of Web Under the framework of the system, some of the basic experience of the Mini Program will be limited WebView The ability to provide (in particular iOS WKWebView More limited), making some technical solutions not perfect, leaving some potential problems.

    # 1. Native components in the same layer rendering more stable

    iOS Next Native ComponentPrinciple of Same Layer RenderingPreviously introduced, essentially in the WKWebView The clever implementation of the black box does not fit perfectly WKWebView Rendering process, so it is easy for some special styles to change, the same layer rendering will fail. in Skyline It integrates well into the rendering flow and is therefore more stable.

    # 2. No page recovery mechanism required

    iOS lower WKWebView Will be unified management by the operating system, when the memory is tight, the operating system will not be on the screen WKWebView Recovery, will make the Mini Program in addition to the foreground outside the page is lost, although in the page back, we did restore the page, but the state of the page can not be 100% Restore. in Skyline Below is no longer the problem.

    # 3. No page stack layer restrictions

    Because WebView Of the memory is large, the page level has at most 10 Layer, and Skyline More advantageous in terms of memory, and therefore in continuous Skyline In the case of page jumps (reusing the same engine instance), this restriction is no longer applied.


    # New interactive animation system

    To achieve a native-like experience, in addition to good rendering performance, good interactive animation is also critical. in Web System, it is difficult to achieve pixel-level control, interactive animation convergence is not smooth, the reason lies in the lack of some important capabilities. To that end, Skyline Provides a whole new set of interactive animation capabilities.

    # 1. Worklet animation

    Worklet The mechanism is Skyline The basis of the interactive animation system, which makes it easy to JavaScript Code to run in the rendering thread, then based on the Worklet Mechanistic Animation module, you can run the animation logic synchronously in the render thread, so that the animation will no longer have delayed frame drops.

    # 2. Gesture system

    Gesture recognition and negotiation is an important feature in native application interactive animation. Web Under the system is missing. Therefore, Skyline Provides information based on the Worklet Mechanistic Gesture system。

    • Supports recognition of common gestures, such as zoom, drag, double-click, etc., and can render thread synchronization listening gestures, perform gesture related logic
    • Support for gesture negotiation, allowing you to decide which gesture to use when you encounter a gesture conflict (typically under scrolling containers) for smoother animation connections.

    # 3. Custom Routing

    Custom transition animation between pages is also a common interactive animation in native applications. In the original Mini Program architecture, each page is independent WebView Rendering, isolated from each other, the ability to span the page is basically not available. Therefore, Skyline Provides information based on the Worklet Mechanistic Custom Routing Module, can achieve the majority of the market page transition animation effect.

    # 4. Shared Element Animation

    Support Share elements across pages, can easily "share" the elements of the previous page to the next page, and accompanied by transition animation, while supporting a set of customizable interfaces, can achieve custom transition animation.

    # 5. Built-in Component Extensions

    Extensions to built-in components are also important, in particular scroll-view Components, many interactive animations are closely related to scrolling, Skyline Added a lot in the Web Very difficult and very important features.

    • Built-in drop-down refresh implementation, and refine related events. original WebView The implementation is based on the Transform, performance is not good enough and the animation connection is not smooth.
    • Provides a mechanism for "drop-down" interaction.
    • provide sticky The ceiling assembly can easily realize the staggered switching of ceiling elements.
    • send scroll-view The component can also scroll when the content is not overflowing, allowing users to get timely interactive feedback.
    • for scroll-view Components provide more control, such as min-drag-distance, scrollend events, scrollend causes (isDrag), and more.
    • Provide native swiper Implementation, compared to WebView Be based on transform The implementation, the performance is better.

    # More advanced capabilities

    In addition to the series capabilities of interactive animation, with the help of Skyline We also offer a lot of advanced features.

    # 1. provide grid-view Waterfall Stream Components

    Waterfall flow is a common way to lay out a list, thanks to the Skyline Controllability in the layout process, we implement and provide it directly at the bottom, rendering performance is better than WebView Better.

    # 2. provide snapshot Screenshot Component

    Most Mini programs will be based on canvas To implement the functionality of a custom share graph. On the one hand, it is necessary to pass canvas Manual implementation of drawing instructions, more cumbersomeOn the other hand, when the layout of the shared graph is more complex, or when making long graphs, the system is limited to canvas Size restrictions, canvas The program implementation costs will be high. Benefit from Skyline Controllability during the rendering process, Skyline Can be directly interested in WXML Subtree for screenshots, so we directly provide the screenshot component, so that we can reuse more perfect WXSS Ability to greatly reduce development costs.

    # 3. scroll-view Component Support List Inversion

    In the context of chat conversations, the scroll of the list is often reversed (scroll up to the bottom), if the use of forward scrolling to simulate there will be a lot of redundant logic, and prone to jumping, and scroll-view Provided reverse Property is a good solution to this problem.


    There are more planned features, seeCharacteristic state