Introduction to loading web pages on mobile terminals
When we were loading a web page, you have not send a url request all content download down, but in addition to the main url request, there are many other requests, such as JS, CSS, images, such as file, each is a separate request, request or serial parts, need to download the resource files to complete before rendering.
Mobile loading status using Webveiw
The use of webview on mobile terminal affects user experience, mainly because it takes too long to load (sending too many requests), resulting in blank pages displayed for too long, which is reflected in the following webView loading process – the loading time is too long, mainly including the following three steps:
- Initialization of webveiw
- Download the HTML and parse it
- Download and render CSS and JS resources
How to reduce the time consuming in these three steps has become the focus of research.
WebView loading process
Taking the community consultation page as an example, in the case of good 4G network conditions, five groups of data are randomly selected, as shown in the following figure. The average TIME of HTML request is 506ms, and the time of JS and CSS request is 783ms, excluding the time of image request.
Request example: Let’s say I use a webView to load a request h5plus.dewu.com/post?postsI…
It can be seen from the waterfall of request flow captured by Chales that when loading the URL of webView, it first requests HTML and then loads CSS, JSS and other resources after parsing. Meanwhile, it can also be seen that loading a Webview page, except for a main HTML URL, CSS, JS request sent 7 requests, this is a not too complex Webview page, if too complex, you can imagine the number of requests. How to reduce CSS and JS requests is also one of the ways of H5 side optimization. For the client, the loading speed of Webveiw can also be optimized by putting JS and CSS resources locally in advance.
WebView loading HTML
It goes through the server and is returned as a URL
This is also the traditional way of loading, the disadvantage is that the network is not good, there will be a long time of white screen, user experience is not good.
Load a local HTML template and inject content locally
In this way, which is the focus of most companies’ research, webView can be turned on in seconds, such as the news details page of the headlines. It is suitable for pages that do not pay much attention to real-time changes, and the white screen can hardly be felt. It can achieve the native experience. Only when opened, the client can inject content data, which greatly improves the loading speed of WebView, which is also the focus of this paper.
Load labeled strings directly (loaded as rich text)
This scheme is suitable for simple, pure display UI interface, simple price comparison, relatively single function.
Get community consultation page status
At present, the upper part of the community consultation column page is WebView, and the lower part is the native comment page. The way of loading WebView is also the traditional way of loading through URL. The user experience is not very good, and it takes about 2s to open a page on average. The optimization of WebView has done research.
Finally, through research and scheme comparison, the client chooses to load the local HTML template and load the WebView page through content injection.
When loading the list of community consultation page, we have already got the content data of rendering WebView, so when clicking into the consultation details page, the content data is actually local, which is equivalent to reducing the number of webView requests, and putting JS, CSS data and HTML template locally in advance. Through the file protocol, loading in advance, when the Webview is opened, the content is directly injected into the local HTML template, greatly saving the webView request and loading time.
The final WebView loading request is shown in the diagram above, which saves the time of intermediate HTML, CSS and JS requests. The speed is greatly improved by loading the offline local way, and the time of local loading HTML, CSS and JS can be ignored.
Offline package download logic:
Unable to copy content being loaded
How to get the injected content data:
- If the list already has content data, you don’t need to send a request to enter the WebView and can directly inject the content data into the local HTML template
- If there is no content data in the list, enter the WebView and request a different URL to get the content data based on the content, and then inject the local HTML template
Finally, in the form of demo, Chales is used to simulate the comparison effect of 4G network conditions before and after optimization as follows:
Before optimization
📎4G pre-optimization advisory column. Mp4
The optimized
📎4G optimized advisory column. Mp4
Data comparison before and after optimization, in terms of demo
The webView loading time to the end of rendering is compared below
It can be clearly seen from the above data that the increase of webView from loading to the end of rendering has reached about 98%, and the optimization effect is still very obvious.
Now let’s break down the request time for each webView phase:
Network request time of CSS and JS resources
HTML Network request time
Since CSS, JS, and HTML templates can be stored locally in the form of offline resources, the time required to request resources can be saved. In this way, the webView loading process will be greatly reduced.
\
In addition, the loading time of images has also been significantly improved. The relevant data are as follows, which is also very objective.
summary
For technology, optimization is endless and always on the way. Currently, it is still in the demo stage. In the next stage, we will implement the plan according to the plan and prioritize the optimization of the details page of the consultation column of the community.