Applet dual-thread models

Dual-thread models applet

The picture above shows dual-thread models official documents given

Applet host environment

Micro-channel client micro-channel client provides two threads to execute wxml, wxss, js files.

Dual-thread models

1. The above rendering layer running on top of this file has been wxss wxml file, render the layer uses a webview thread rendering (a program have more than one page, it will view multiple threads to operate)

2.js file is run at the logical level, js logical layer is run by jscore.

By double-threaded interface rendering process like?

wxml the DOM tree

In fact, we wxml file is the same with our html in the DOM tree, so that we can have js to simulate a virtual DOM tree:

img

Initialization rendering

img

If our wxml file if there are variables: js logic layer to the common rendering the page become a real DOM tree:

Interface data changes

img

By 1 if the hell setDat into dsb, the node js object will change.

2 then will change in comparison with a diff algorithm two objects,

3 is then applied to change a portion DOM tree

4 so as to achieve the purpose of updating the page, which is data-driven principle

to sum up

Interface rendering the whole process

1 in the rendering layer wxml file with wxss js file is converted into an object that is virtual DOM

2 with the virtual DOM object generated into logic, real DOM tree, the rendering to the rendering layer

3 when the data changes, the update data logical layers, js objects change, compared with diff Algorithm

4 updated content, fed back to the real DOM tree, update page

Guess you like

Origin www.cnblogs.com/guyouyin123/p/12457401.html