WebView second opening solution exploration

Text: Yuan Fang

Introduction to loading web pages on mobile

When we load a web page, we don’t send a URL request to download all the content, but in addition to the main URL request, there are many other requests, such as JS, CSS, images and other files, each of which is independent Some of the requests are serial, and these resource files need to be downloaded before they can be rendered.

The mobile terminal uses WebVeiw to load the status quo

The use of WebView on the mobile terminal affects the user experience. The main reason is that the loading time is too long (more requests are sent), which causes the blank page to be displayed for too long. This is reflected in the loading process of the webview below-the loading time is long, mainly including the following three steps :

• Initialization of WebView
• Download HTML and parse c
• Downloading and rendering of css and js resources

How to reduce the time-consuming of these three steps has become the focus of research.

WebView loading process

Take the community consultation page as an example. In the case of good 4G network conditions, five sets of data are randomly selected, and the following figure is obtained. The average html request time is 506ms, and the request time for js and css is 783ms. This does not include the image request time.

Request example: For example, I use WebView to load a request https://h5plus.dewu.com/post?postsId=66902177&477zitijianju=0

From the request waterfall flow captured by chales, you can see that when the url of the WebView is loaded, the html is requested first, and then some resources such as css, jss, etc. are loaded through parsing. At the same time, you can also see that a WebView page is loaded, except for the main HTML In addition to the URL, the css and js requests sent 7 requests. This is still a not too complicated webview page. If it is too complicated, you can imagine the number of requests. How to reduce css and js requests is also one of the ways to optimize the H5 side. For the client, the loading speed of WebView can also be optimized by placing some resources of js and css locally in advance.

WebView loading HTML method

Through the server, return in the form of url

This is also a traditional loading method. The disadvantage is that when the network is not good, a white screen will appear for a long time, and the user experience is not good. loads local html templates and injects content locally. is the focus of most companies’ research. WebView can be opened in seconds, such as the headline news details page, which is suitable for pages that don’t pay much attention to real-time changes. Can not feel the white screen, can achieve the original experience, the principle is to download the required js, css, html templates to the local in advance, render the WebView in advance, only need to open the client to inject content data, which is great Improve the loading speed of WebView, which is also the focus of this article. directly loads tagged strings (loaded in rich text) This solution is suitable for simple and pure display UI interfaces, with simple price comparison and single function.

Status of Dewu Community Consultation Page

At present, the community consultation column page, the upper half of the page uses WebView, and the lower half is the native comment page. The way to load WebView is also the traditional way of loading via url. The user experience is not very good. It takes about 2s to open a page on average. In order to improve the user experience and reduce the loading time of WebView, the optimization of WebView has been investigated.

Finally, through research and program comparison, the client chose to research and load a local html template, and load the WebView page by injecting content.

Since the content data of the rendering webview is already obtained when the list is loaded on the community consultation page, when you click to enter the consultation details page, the content data is actually also local, which is equivalent to reducing the number of requests sent by the WebView, adding js, The css data and html template are placed locally in advance, and loaded in advance through the file protocol. When the WebView is opened, the content is directly injected into the local HTML template, which greatly saves the time of WebView request and loading.

The final WebView loading request schematic diagram is shown in the above figure, which saves the time for intermediate html, css, and js requests. By loading offline and local, the speed is greatly improved, and the time for local loading of html, css, and js can be ignored.

Offline package download logic:

Unable to copy loading content

Ways to obtain injected content data:

1. If the list already has content data, you do not need to send a request to enter the WebView, you can directly inject the content data into the local html template
2. If there is no content data in the list, enter WebView according to different content, request different URL to obtain content data, and then inject the local html template

Finally, using chales in the form of demo to simulate 4G network conditions before and after optimization, the comparative effects are as follows:

Before optimization

📎Consultation column before 4G optimization.mp4

Optimized

📎Consultation column after 4G optimization.mp4

Data comparison before and after optimization, in terms of demo;
The comparison of the time from WebView loading to the end of rendering is as follows

From the data in the above figure, it can be clearly seen that the improvement of WebView from loading to the end of rendering has reached about 98%, and the optimization effect is still very obvious.

Next, let's refine the request time of each stage of WebView:
css, js resource network request time

html network request time

Since css, js and html templates can be placed locally in advance in the form of offline resources, the time for requesting resources can be saved. In this way, the time in the WebView loading process will be greatly reduced.

And the loading time of pictures has also been significantly improved. The relevant data is as follows. This increase is also very objective.

As far as technology is concerned, optimization is endless. It has been on the road. It is still in the demo stage. In the next stage, we will implement the plan and prioritize the optimization of the community’s consultation column details page. We will wait and see what the specific effect will be.