Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what is the operating mechanism of web Mini Program". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Understand the origin of Mini Program

Before Mini Program came out, Wechat WebView gradually became an important portal to mobile web. Wechat released a set of web development kits called JS-SDK, which opened a new window for all Web developers to use Wechat's native capabilities to accomplish things that could not be done or difficult to do before.

However, the JS-SDK model does not solve the problem of poor experience in using mobile web pages, such as the possibility of a white screen due to device performance and network speed. Therefore, I designed an enhanced version of JS-SDK, that is, "Wechat Web resources offline storage", but the problem of white screen still appears on complex pages, due to the stiff switching of the page and the sense of lag of clicks. At this time, we need a system that JS-SDK can not handle and make the user experience better. Mini Program arises at the historic moment.

Fast loading

More powerful capabilities.

Native experience

Easy-to-use and secure Wechat data opening

Efficient and simple development

The difference between Mini Program and ordinary web page development

Compared with ordinary web development, the development of Mini Program is very similar. The main development language of Mini Program is JavaScript, but there are still some differences between them.

Ordinary web development can use DOM API provided by various browsers for DOM operations. The logical layer and rendering layer of Mini Program are separate, and the logical layer runs on JSCore.

There is not a complete browser object, so the related DOM API and BOM are missing

API .

Normal web development rendering threads and script threads are mutually exclusive, which is why long-running scripts can cause pages to become unresponsive, while in Mini Program, the two are separate, running in different threads.

When developing a web page, web developers only need to use the browser and match it with some auxiliary tools or editors. The development of Mini Program is different. It needs to go through the process of applying for a Mini Program account, installing Mini Program developer tools, configuring the project, and so on.

The execution environment of Mini Program

Mini Program architecture

I. Technology selection

In general, there are three techniques for rendering the interface:

Rendering with pure client native technology

Rendering with pure Web technology

Use the hybrid technology of client native technology and Web technology (Hybrid technology for short) to render

Through the analysis of the following aspects, which technical scheme does Mini Program adopt?

Development threshold: the Web threshold is low, and Native also has framework support like RN.

Experience: the Native experience is much better than Web, and Hybrid is closer to the native experience than Web to some extent.

Version update: Web supports online updates, while Native needs to be packaged into Wechat to review the release.

Control and security: Web can jump or change the content of the page, there are some uncontrollable factors and security risks

As the host environment of Mini Program is Wechat, if Mini Program is written with pure client native technology, then Mini Program code needs to be distributed together with Wechat code every time, which is definitely not good.

So like web technology, there is a ready-to-update resource package on the cloud, which can be downloaded to the local and dynamically executed to render the interface. If you use pure web technology to render Mini Program, you may face some performance problems in some complex interactions, because in web technology, both UI rendering and JavaScript script execution are executed in a single thread, which easily causes some logical tasks to seize the resources of UI rendering.

So finally, the Hybrid technology which combines the two is used to render Mini Program, which can be developed in a way similar to web, and the code can be updated online. At the same time, the introduction of components also has the following advantages:

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

The experience is better, but also reduces the rendering work of WebView.

Bypass setData, data communication, and re-rendering processes to improve rendering performance

Built-in complex components with client-side native rendering can provide better performance

Second, two-thread model

The rendering layer and logic layer of Mini Program are managed by two threads respectively: the interface of view layer uses WebView to render, and the logic layer uses JsCore thread to run JS script.

In order to solve these problems, we need to prevent developers from using some open interfaces, such as browser window objects, jump pages, manipulate DOM, and dynamically execute scripts.

We can use the JavaScript engine of the client system, the JavaScriptCore framework under iOS, and the JsCore environment provided by the X5 kernel of Tencent under Android.

This sandboxed environment only provides a pure JavaScript interpretation execution environment without any browser-related interfaces.

This is the origin of Mini Program's dual-threaded model:

Logic layer: create a separate thread to execute JavaScript, which executes code related to Mini Program business logic, responsible for logic processing, data requests, interface calls, etc.

View layer: all tasks related to interface rendering are performed in the WebView thread, and the logical layer code is used to control which interfaces are rendered. There are multiple interfaces in a Mini Program, so there are multiple WebView threads in the view layer

JSBridge serves as a bridge between upper-level development and Native (system layer), so that Mini Program can use native functions through API, and some components are implemented by native components, thus having a good experience

III. Dual-thread communication

Put the developer's JS logic code into a separate thread to run, but in the Webview thread, the developer cannot directly manipulate the DOM.

So how to implement the dynamic change interface?

As shown in the above figure, the communication between the logical layer and the attempt layer is transferred by Native (Wechat client), and the network request sent by the logical layer is also forwarded via Native.

That is to say, we can update DOM through simple data communication.

Virtual DOM I'm sure you all know about the process of using JS objects to simulate DOM trees-> comparing the differences between two virtual DOM trees-> applying the differences to real DOM trees.

As shown in the figure:

1. Convert WXML to the corresponding JS object in the render layer.

two。 When the data changes in the logical layer, the data is transferred from the logical layer to the Native through the setData method provided by the host environment, and then forwarded to the rendering layer.

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

We realize the interaction and communication between the logic layer and the rendering layer by converting WXML into data and forwarding it through Native.

Such a complete framework is inseparable from the basic library of Mini Program.

IV. The basic library of Mini Program

Mini Program's basic library can be injected into the view layer and logic layer to run, mainly used in the following aspects:

In the view layer, various components are provided to build the elements of the interface

In the logic layer, all kinds of API are provided to handle all kinds of logic.

Deal with a series of framework logic such as data binding, component system, event system, communication system and so on.

Because the rendering layer and logic layer of Mini Program are managed by two threads, the two threads are injected into the base library respectively.

Mini Program's basic library will not be packaged in a Mini Program code package, it will be built into the Wechat app ahead of time.

This can be done:

Reduce the code package size of business Mini Program

You can repair the Bug in the basic library separately without modifying the code package of the business Mini Program.

V. Exparser framework

Exparser is WeChat Mini Programs's component organization framework, which is built into the Mini Program base library to provide basic support for the various components of Mini Program. All components within Mini Program, including built-in components and custom components, are managed by the Exparser organization.

The main features of Exparser include the following:

1. Based on Shadow

DOM model: the model is highly similar to WebComponents's ShadowDOM, but does not rely on the native support of the browser, nor other dependent libraries; when implemented, other API is added to support Mini Program component programming.

two。 Can run in a pure JS environment: this means that the logical layer also has some ability to organize the component tree.

3. Efficient and lightweight: good performance, especially in an environment with a large number of component instances, and a small code size.

In Mini Program, all node tree-related operations depend on Exparser, including the construction of WXML to the final node tree of the page, createSelectorQuery calls and custom component features.

Built-in component

Based on the Exparser framework, Mini Program has a set of built-in components that provide dozens of components, such as view container class, form class, navigation class, media class, open class and so on. With such a wealth of components, coupled with WXSS, you can build any effect of the interface. At the functional level, it also meets most of the needs.

VI. Operating mechanism

There are two situations when Mini Program starts, one is "cold start" and the other is "hot start". If the user has already opened a Mini Program, and then reopened the Mini Program within a certain period of time, there is no need to restart at this time, just switch the Mini Program in the background status to the foreground, this process is hot startup; cold start refers to the situation in which the user * opens or Mini Program is actively destroyed by Wechat, and Mini Program needs to be reloaded and started.

Mini Program has no concept of restart.

When Mini Program enters the background, the client will maintain its running state for a period of time, and after a certain period of time (currently 5 minutes), the client will be actively destroyed by Wechat.

When more than two system memory alarms are received in a short time (5s), Mini Program will be destroyed.

VII. Update mechanism

If a new version is found during the cold startup of Mini Program, the new version of the code package will be downloaded asynchronously and started with the local package on the client, that is, the new version of Mini Program will not be applied until the next cold start. If you need to apply the * * version immediately, you can use wx.getUpdateManager API to process it.

VIII. Performance optimization

The main optimization strategies can be summarized into three points:

Simplify the code and reduce the complexity of WXML structure and JS code

Reasonable use of setData calls to reduce the number of setData and data volume

Use subcontracting optimization if necessary.

1. The working principle of setData

Mini Program's view layer currently uses WebView as the rendering carrier, while the logical layer uses a separate JavascriptCore as the running environment. Architecturally, WebView and JavascriptCore are independent modules and do not have a channel for direct data sharing. Currently, the data transfer between the view layer and the logic layer is actually achieved through the evaluateJavascript provided on both sides. That is, the data transmitted by the user needs to be transferred in the form of a string, and at the same time, the converted data content is spliced into a JS script, and then transferred to both sides of the independent environment by executing the JS script.

The execution of evaluateJavascript will be affected by many aspects, and the arrival of data to the view layer is not real-time.

2. Common setData operation errors

Frequent setData in some cases we have analyzed, some Mini Program will setData very frequently (millisecond), which leads to two consequences: users will feel stutter when sliding under Android, and the operation feedback delay is serious, because the JS thread has been compiling and performing rendering, failed to transmit user action events to the logic layer in time, and the logic layer is unable to transmit the operation processing results to the view layer in time. There is a delay in rendering, because the JS thread of WebView has been busy, the communication time from logic layer to page layer increases, hundreds of milliseconds have elapsed since the data message received by view layer, and the rendering result is not real-time.

Each setData transfers a large amount of new data, as can be seen from the underlying implementation of setData. Our data transfer is actually an evaluateJavascript.

Script process, when the amount of data is too large, it will increase the compilation and execution time of the script, occupy the WebView JS thread, and perform the backstage page.

SetData when the page enters the backstage state (the user is not visible), you should not continue to setData. The rendering of the backstage page cannot be felt by the user. In addition, the backstage page going to setData will also preempt the execution of the foreground page.

This is the end of the content of "what is the operation mechanism of web Mini Program". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.