This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

Small program underlying principle

The final form of small program rendering, is WebView + native components, Hybrid mode. Rendering layer: All tasks related to interface rendering are performed in the WebView thread. A small program has multiple interfaces, so the rendering layer has multiple WebView thread logic layers: A separate thread executes JavaScript, which in this case is all the code that executes the business logic of the small program, These two threads will pass WeixinJsBridage in wechat client (Native) for transit communication. The logical layer will notify the data changes to the view layer and trigger the page update of the view layer. The view layer notifies the triggered events to the logical layer for business processing

Rendering logic

Convert WXML into corresponding JS objects (virtual DOM) at the rendering layer. When data changes occur in the logical layer, data will be passed from the logical layer to Native through the setData method provided by the host environment, and then forwarded to the rendering layer. After comparing the differences before and after (DIff algorithm), the differences are applied to the original DOM tree to update the interface.

Small program and H5 difference

From the perspective of running environment, the host environment of H5 is the browser. As long as there is a browser, you can use it, including the Web-View component in the APP and the Web-View component provided by the small program. Take wechat small program for example, it is a built-in parser based on the browser kernel refactoring. It is not a complete browser. The official document emphasizes that the script cannot use the window and document objects commonly used in the browser. There is no DOM and BOM related API. This one eliminates JQ and some NPM package system permissions that rely on BOM and DOM. H5 system permissions are not enough. The small program has the smooth performance of Native App