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

    • # Introduction

    Small programs have always been used AppService and WebView Of the two-threaded model, based on the WebView And native controls to mix rendering, Mini Program optimization extends the Web The basic ability to ensure a good performance and user experience on the mobile terminal. Web Technology so far. 30 Over the years, as a powerful rendering engine, it has good compatibility and rich features. Although the major manufacturers continue to optimize Web Performance, but due to its heavy historical baggage and complex rendering process, it makes Web There is still a gap between the performance of mobile and native applications.

    In order to further optimize the performance of the Mini Program and provide a closer to the native user experience, we WebView Added a rendering engine in addition to rendering Skyline, which uses a leaner and more efficient rendering pipeline and brings a number of enhancements to allow Skyline Have a performance experience closer to native rendering.

    # Framework

    When the Mini Program is based on the WebView Environment, WebView of JS Logic, DOM Tree Creation, CSS Parsing, Style Calculation, Layout, Paint (Composite) All occur in the same thread, in the WebView On the implementation of excessive JS Logic can block rendering, causing the interface to stutter. Based on this premise, the Mini Program takes into account both performance and security, using what is currently known asTwo-threaded modelOf the architecture.

    in Skyline Environment, we try to change this situation: Skyline Created a rendering thread to be responsible for Layout, Composite and Paint Such as rendering tasks, and in the AppService Delimit a separate context to run before WebView Assumed JS Logic, DOM Tree creation logic. This new architecture compared to the original WebView Architecture, has the following features:

    • Interface is less likely to be blocked by logic, further reducing the number of stuck
    • No need to create a new one for each page JS Engine instance (WebView), reducing memory, time overhead
    • The framework can share more resources between pages, further reducing runtime memory and time overhead
    • The code of the framework no longer has to pass through JSBridge For data exchange, reducing a lot of communication time overhead

    At the same time, this new architecture can maintain good compatibility with the original architecture. WebView The environment's Mini Program code basically runs under the new architecture without any changes. WXS Due to being moved to AppService Although the logic itself does not need to be changed, interfaces such as asking for page information will become asynchronous, and efficiency may also decline.To this end, we simultaneously launched new Worklet Mechanism, which is more than the original WXS Get closer to the rendering process for high-performance building of complex animation effects.

    The new rendering flow is shown below:

    # Need help

    If you encounter any problems during use, you can go to the[Skyline Rendering engine](https://developers.weixin.qq.com/community/Minihome /mixflow/3081976366428028932)Zone View Instructions.