“This is the 25th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

preface

We all know that JavaScript is single-threaded, and the logic layer of applets uses JsCore threads to run JS scripts, so why do applets have a dual-threaded architecture?

Why use a two-threaded architecture

Applets are divided into view layer and logic layer, view layer related tasks are all inWebViewIn the execution. A small program has multiple interfaces, so there are multiple view layersWebViewThreads. The logical layer usesJsCoreThe thread runningJS script. Between them through the system layerWeixinJsBridgeIn other words, the logical layer notifies the view layer of data changes, triggers the page update of the view layer, and the view layer notifies the triggered event to the logical layer for business processing. The following figure

Web page development has several problems

  • Experience: When a user visits a web page, a blank screen will appear before the browser is displayed. Due to device performance and network speed, the blank screen will be more obvious. In order to solve the experience problem, wechat launched “wechat Web Resources offline storage”, similar to HTML5 Application Cache, which can solve part of the blank screen problem, but there is still a big gap between the Web experience and the original, such as page switching, page loading bar, etc.
  • Control: Web pages have a high degree of freedom, requiring a lot of manpower to check whether there are violations of the page and other operations.

Therefore, the two-thread mode of small program mainly solves these two problems: experience and control

  • Experience: Web page development render thread and script thread are mutually exclusive, and prolonged script running may result in the page becoming unresponsive or a blank screen. Two-threaded mode does not have this problem. In this mode, the data drive of the MVVM framework is enforced, that is, the view state is bound to the view, and the virtual DOM is used to optimize the experience
  • Control: prevent developers from using the browser’s open interface, provide a sandbox environment to run developers’ JS code, and only use wechat to provide open methods to obtain some information about elements. This prevents the developer from being out of control. In addition to JS sandbox environment control, HTML also changed to encapsulated WXML (WeiXin Markup Language), CSS changed to WXSS (WeiXin Style Sheet), in order to control, but also to provide more functions, Examples include live-player and picker-view, which encapsulate live streaming. In addition, WXS (WeiXin Script) is provided so that WXML can also do some logical processing during rendering.

Realize the principle of

The rendering layer and logic layer of the small program are realized by multiple WebViews. The JS codes of the logic layer are all loaded into a WebView, called AppService. The whole small program has only one, and its whole life cycle is resident in memory. All views (WXML and WXSS) are hosted by a separate Webview, called an AppView.

Division of labor between rendering layer and logic layer:

  1. The rendering layer (WXML, WXSS files) is related to the data. Namely: How do you represent data
  2. The logical layer (JS files) is responsible for generating and processing the data. Namely: what kind of data

Our requests at the render layer do not go directly to the logical layer, but to the system layer first. The system layer performs operations on some of the functions and then passes the data to the logical layer, as well. Therefore, setData request binding interactions are not frequent.

If the current data is not displayed on the page, the data should not be defined in the data. Otherwise, the data will be passed from the data layer to the logical layer every time the data binding is performed, occupying the resources of the system layer.

In addition, due to the Hybrid framework, developers can develop in a similar way to the Web, and can update the code online, but it needs to be reviewed by wechat. However, Native parts of the capabilities are versioned, so small application developers need to add version control when using new capabilities.