No matter what doubts we have about the form of small programs, it is undeniable that they have been integrated into all aspects of our lives. Operations such as going out to take a taxi, scanning codes, ordering takeaways, and even collecting energy are all carried by small programs. The reason behind it is that the applet is sufficiently lightweight, convenient, and cross-platform, providing users with rich functions and high-quality user experience.
At its core, the key to an applet that can have a native experience is the fast rendering mechanism, which plays a vital role. Here we explore the implementation process of the fast rendering mechanism, as well as the role of dual-threaded rendering technology and WebView in it.
1. Rapid rendering implementation process
The rapid rendering of applets mainly goes through the following four stages: parsing and compiling, preloading, page rendering, and drawing and displaying.
1. Parse and compile
When the user opens the applet, the applet framework first parses and compiles the code of the applet. This process includes converting the code of the applet into executable instructions and generating corresponding data structures, such as a page tree and a component tree. The parsing and compiling process takes a certain amount of time, but it can greatly improve efficiency in subsequent page rendering.
2. Preload
After parsing and compiling, the applet framework is preloaded. Preloading refers to loading resources that may need to be used in advance, such as pictures and style files, before the user enters a specific page. By preloading, applets can reduce loading time and improve rendering speed when users switch pages.
3. Page rendering
When the user enters a specific page, the applet framework renders the page tree and component tree to the screen. The rendering process includes calculating the position and size of each component, applying styles and layout, and generating the final drawing instructions.
4. Drawing and display
The applet framework sends the drawing instructions obtained from rendering to the underlying graphics system for drawing. The graphics system converts the commands into images and displays them on the screen.
Second, the advantages of dual-thread technology
In the fast rendering of applets, dual-thread technology plays a key role. In traditional web development, page rendering and JavaScript execution are completed in the same thread, which leads to the problem of mutual influence between rendering and JavaScript execution. The applet introduces dual-thread technology, which separates rendering and logic into different threads, thereby improving the speed and efficiency of rendering.
The dual-thread technology mentioned here includes rendering threads and logic threads.
1. Rendering thread
The rendering thread is responsible for the rendering and drawing of the page, by parsing and compiling the code of the applet, building the page tree and component tree, and rendering them on the screen. The rendering thread works closely with the underlying graphics system, and uses technologies such as hardware acceleration to quickly draw pages. By separating the rendering tasks into independent threads, the rendering thread can focus on drawing the page without being affected by the logic thread, thus improving the rendering efficiency.
All tasks related to interface rendering are executed in the WebView thread, and which interfaces are rendered are controlled through the logic layer code. A small program has multiple interfaces, so there are multiple WebView threads in the rendering layer.
2. Logical thread
The logic thread is responsible for handling the logic and interaction of the applet. It executes the applet's JavaScript code, handles user input and events, and updates the state of the page. The logic thread communicates with the rendering thread through a message mechanism. When the logic thread has new instructions or data updates, it will send a message to the rendering thread, triggering page updates and re-rendering. By separating the logic and rendering into different threads, the logic threads can be executed independently without blocking the rendering of the page, ensuring fast response and smooth interactive experience of the applet.
The application of dual-thread technology enables applets to perform rendering and logic processing in parallel, improving the overall rendering efficiency and user experience. At the same time, through the communication of the message mechanism, the decoupling of rendering and logic is realized, so that developers can more flexibly process and optimize the rendering and logic code of applets.
3. The role of WebView thread
From the dual-thread technology, we can see that there are WebView threads, but when we write the page view of the applet, we don't seem to care about WebView, so what is WebView? What does the View view layer applet do for us?
In the fast rendering of applets, WebView plays an important role. WebView is a component that embeds web content in mobile applications, and it provides a container that can display web content.
1. Display the applet page
The pages of the applet are displayed through WebView. When the user opens the applet or switches to a different page, the applet framework will render the corresponding page into the WebView, so that the user can see the content of the page. WebView provides a flexible display method, which can support operations such as scrolling and zooming of applet pages.
2. Parse and execute the applet code
WebView can parse and execute the code of the applet, and convert the code into executable instructions. It provides a JavaScript execution environment that allows applets to run and interact. Through WebView, applets can achieve dynamic page updates and interactive effects.
3. Provide network access function
WebView has the capability of network access, and can load network resources in applets, such as HTML, CSS, JavaScript files, pictures, etc. Through network access, the applet can obtain remote data and display it in WebView. The network access function of WebView provides applets with the ability to interact with the server and update data.
4. Support the functions of the applet framework
WebView implements various functions of the applet framework at the bottom, such as data binding, event processing, component rendering, etc. It can correctly display the page content to the user according to the logic and interaction rules of the applet. WebView provides an interactive interface with the applet framework, enabling applets to communicate and interact with WebView, realizing two-way data binding, event monitoring and triggering, and other functions.
It should be noted that since WebView is an embedded component, its performance and rendering capabilities may also be limited by devices and browsers. Therefore, the applet framework usually optimizes WebView to improve rendering speed and user experience. For example, we reduce the parsing and compiling time of WebView and speed up the rendering speed of the page by precompiling the applet code, incremental updating and caching mechanism and other optimization measures.
The fast rendering mechanism of applets allows the majority of applet developers to use these mechanisms and technologies to optimize the rendering performance of applets and provide a smoother user experience.
How to give full play to the value of dual-threading of small programs in mobile research and development
Against the background that more and more products in mobile research and development pay special attention to user experience, small programs have also become an important tool for carrying services. In addition to listing our self-developed mini-programs on platforms such as WeChat and Alipay, the development model of "native + mini-programs" has also become another option for mobile research and development. It can make its own App run its own small programs like WeChat and Alipay.
The applet container technology can help enterprises or individual developers to make their own apps have the ability to run applets, and only need to integrate the FinClip SDK to quickly have the ability to run applets.
Moreover, the FinClip SDK is extremely lightweight, and the size of the SDK is only increased by less than 3MB after the application is integrated. At the same time, FinClip supports the WeChat applet syntax WXML, which means that the WeChat applet code can be reused directly in FinClip without secondary development, and the experience is consistent with that of WeChat.
While we have been paying attention to improving the efficiency of mobile application development, users are paying more and more attention to the application experience. How to improve the application experience is also worthy of developers' attention.