foreword
Recently, I have been reading about small programs. From a technical point of view, the optimization process of small programs in Hybrid has a lot to learn, so I want to be able to output while learning. In this series, I will not talk about how to apply. A small program, how to develop a program, but about what we can learn from the small program, although there are still many problems, but the large-scale use of the small program will promote the WeChat technology ecology to the extreme, using Hybrid technology There are many companies, and I hope my series of articles can be helpful to you.
The evolution of page technology under WeChat
From a technical point of view, in fact, WeChat's page technology is the predecessor of Mini Programs, as shown in the figure below.
In the web pages in WeChat, WeChat native can be called through JS-SDK, allowing developers to use the native capabilities of WeChat. When the JS-SDK was released, it was welcomed by many developers, but with the widespread use, developers Encountered a lot of problems.
- white screen
When a user accesses an h5 of WeChat on a mobile phone, there will be an obvious white screen due to the limitation of the mobile device and the network speed.
The WeChat team spent a lot of energy to solve this problem, and the later JS-SDK enhanced version appeared. There is a more important function in it: offline storage. The simple understanding of offline storage is to load web resources locally instead of pulling them from the server, thereby avoiding the bottleneck of network speed.
Offline storage reduces network latency and greatly improves the user experience of h5. However, there will still be a white screen problem on some complex pages. The main reason is that the complexity of js and css will occupy a lot of UI threads and affect the rendering of WebView.
In fact, most companies currently use similar JS-SDK solutions: flexible web development + rich native functions + offline storage.
- No native smooth operation
Some teams use the SPA framework to simulate native page switching, but SPA also has its own drawbacks. With the complexity of the business, it is very likely that the burden on WebView will increase, and developers need enough time to do this. and energy.
- Safety
It is hard to guard against attacks. JS under the browser is very flexible. It can operate on Dom and Bom at will, jump at will, and execute dynamically.
So, can WeChat solve the above problems? Can WeChat pages do the following:
- fast loading
- powerful ability
- smooth experience
- Safety
- low development cost
This is the applet.
Technical Selection of Mini Programs
If the applet wants to solve some problems of pure web technology before, it must make some new attempts
- Can Native technology be used?
To achieve fast loading and smooth experience, is it OK to directly develop the client based on WeChat? But there is a problem. Doing this means that the code of the applet needs to be released together with the WeChat client code. This rhythm is definitely not satisfied.
- Can ReactNative be used
Although RN uses javascript to explain and execute, the rendering aspect is still native rendering. In fact, RN can solve the problem of loading and rendering, but it still has some shortcomings. Here is the reason given by WeChat official.
- The support for css cannot meet the growing needs of web developers, and it will take a lot of effort and risk to transform.
- So far, there are still some performance pits and bugs, which are more difficult for more complex pages.
- Unforeseen factors, such as the previously noisy license.
Pure h5 has many drawbacks, pure Native cannot meet the needs of the release, and RN is not very mature, so in the end WeChat is still Hybrid in the selection of small programs in the face of its own technical ecology, and the interface is rendered by mature Web technology , the logic is parsed and executed by mature Js, coupled with the native capabilities provided by WeChat Native. However, in order to achieve the above-mentioned requirements, the applet still needs to make breakthroughs based on Hybrid.
two-thread model
Dual threads: The logic layer and the rendering layer of the applet are separated into two threads. The js of the logic layer uses Native's own JSCore to parse and execute, and the interface is still rendered through WebView. The communication process is as follows ( the picture is from the official WeChat document, invaded and deleted ):
In general Hybrid technology, WebView not only does js parsing and execution, but also renders html and css. When the page is complex, it is very likely that the rendering of the interface will wait for the execution of JS, resulting in a white screen phenomenon. We can use dual threads to reduce Webview. The burden of js execution and interface rendering can be parallelized in complex page interaction. In addition, the native Jscore only implements the ECMAScript standard. It does not need to implement the DOM and BOM like the browser. Therefore, the DOM cannot be manipulated through js in the applet, and the BOM cannot be used, which also solves the problem of security and control to a certain extent. question.
applet javascript
As mentioned above, the javascript of the applet is implemented by JSCore to implement ECMAScript. In addition to this, the applet also provides a framework and a series of APIs. These underlying upgrades are synchronized with the upgrade of the WeChat client.
( The picture is from the official WeChat document, invaded and deleted ):
Summarize
The technical system of WeChat pages and mini programs is actually the same as that of most companies, but as a platform, WeChat will achieve the ultimate in security and performance. Although most companies do not need to achieve the platform size of WeChat, its technology Evolution can still give us a lot of lessons, such as can we also use multiple WebViews? Can we also use dual threading? Can we also do WebView preloading? Can we do WeChat developer tools too? Next, we will gradually continue to share with you based on our own business scenarios.
Since the first article uses some content and pictures from the WeChat official website in order to prepare for the following knowledge content, it is hereby explained that it is invaded and deleted.
Reference: Mini Program Development Guide
If you want to read more articles, you can follow our WeChat public account: Big Front-end Engineer