Analyze the underlying principles of WeChat mini programs

There are three main methods of page rendering

Recommended: "小program Development Tutorial"

1.web rendering

2.Native rendering

3.Web and Native are mixed, that is, Hybrid rendering.

The mini program is presented in the third form.

Double-threaded communication method

Why do we need dual-threads? -> For control security, avoid operating DOM.

The rendering layer and logic layer of the mini program are managed by two threads respectively: the interface of the rendering layer uses WebView for rendering, and the logic layer uses JsCore threads to run JS scripts.

The framework of the WeChat applet consists of two parts: the view layer and the APP service logic layer.

The view layer is used to render the page structure, and

AppService is used for logical processing, data requests, and interface calls.

Run in two processes (two webviews).

The view layer and logic layer communicate through the JSBridage of the system layer.

Logic layer: Create a separate thread to execute JavaScript. In this environment, all code related to the business logic of the mini program is executed.

Rendering layer: All tasks related to interface rendering are in webView Executed in a thread, the code in the logic layer controls which interfaces are rendered.

A small program has multiple interfaces, so there are multiple webview threads in the rendering layer.

The communication between the logic layer and the rendering layer will be relayed by Native (WeChat client),

The network requests sent by the logic layer will also be forwarded by Native.

evaluate Javascript

The data transmission between the view layer and the logic layer is actually implemented through the evaluateJavascript provided by both sides. That is, the data transmitted by the user needs to be converted into a string and passed on. At the same time, the converted data content is spliced ​​into a JS script, and then passed to the independent environments on both sides in the form of a JS script.

Because the execution of evaluateJavascript will be affected by many aspects, the data arriving at the view layer is not real-time. Our setData function sends data from the logic layer to the view layer asynchronously.

Template data binding solution

1. Parse the syntax to generate AST

2. Generate DOM based on the AST result

3. Update the data binding to Template

Abstract syntax tree (abstract syntax tree or abbreviated as AST)

The third point that is most likely to cause performance problems is the third point. As for the solution to data update, React first proposed virtual The design of DOM is now basically absorbed by most frameworks, and mini programs are no exception.

Virtual DOM mechanism virtual Dom

Use JS objects to simulate DOM trees-> Compare two DOM trees-> Compare the differences between two DOM trees-> Apply the differences to the real On the DOM tree

1. Convert WXML into the corresponding JS object in the rendering layer

2. When data changes occur in the logic layer, use the setData method provided by the host environment to change the data from the logic The layer is passed to Native and then forwarded to the rendering layer

3. After comparing the differences before and after, apply the differences to the original DOM tree and update the interface

Basic library of the mini program

The basic library of the mini program is written in JavaScript, which can be injected into the rendering layer and logic layer to run. Mainly used for:

In the rendering layer, it provides various components to assemble the elements of the page.

In the logic layer, it provides various APIs to process various elements.

Processing a series of framework logic such as data binding, component system, event system, communication system, etc.

The rendering layer and logic layer of the applet are managed by two threads, and the two threads each inject Basic library.

The basic library of the mini program will not be packaged in the code of the mini program, it will be built into the WeChat client in advance. This way you can:

Reduce the code package size of the business applet

You can fix the bugs in the basic library independently without modifying the code package of the business applet

Exparser

Exparser is the component organization framework of the WeChat mini program. It is built into the mini program basic library and provides basic support for various components of the mini program. All components in the mini program, including built-in components and custom components, are organized and managed by Exparser.

Dual-threaded rendering mechanism

Dual-threaded rendering is actually a combination of the previous series of mechanisms.

1. Through template data binding and virtual DOM mechanism, the applet provides DSL with data binding syntax and rendering layer to describe the page structure.

<view> {{ message }} </view> <view wx:if="{{condition}}"> </view> <checkbox checked="{{false}}"> </checkbox>

2. The applet provides an API for setting page data in the logic layer

this.setData({
key : value
});

3. When the logic layer needs to change the page, it only needs to pass the modified data to the rendering layer through setData.

The transmitted data will be converted into string form for transmission, so you should avoid transmitting large amounts of data.

4. The rendering layer will regenerate the virtual DOM tree according to the rendering mechanism and update it to the corresponding DOM tree, causing interface changes.

• Introduce native components

• Bypass setData, data communication and re-rendering process to make rendering performance better.

• Extend the capabilities of the Web. For example, input box components (input, textarea) have the ability to better control the keyboard.

• The experience is better, and it also reduces the rendering work of WebView. For example, the rendering work of more complex components such as map components does not occupy the WebView thread, but is handed over to the more efficient client for native processing.

Rendering process of native components:

• The component is created, and the component properties are assigned values ​​in sequence.

• The component is inserted into the DOM tree, and the browser kernel will immediately calculate the layout. At this time, we can read the position (x, y coordinates), width and height of the component relative to the page.

• The component notifies the client that the client inserts a native area at the same position according to the width and height, and then the client renders the interface in this area.

• When the position or width and height change, the component will notify the client to make corresponding adjustments.

The above is the detailed content of Analyze the underlying principles of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!