Mobile QQ Member H5 Acceleration Program--sonic Technology Insider

Copyright notice: This article by the situation Eagle original article, reprint please indicate the source:
Article original link: https://www.qcloud.com/community/article/141

Source: Tengyun https://www.qcloud.com/community

At present, more and more mobile Web pages start H5, on the one hand can reduce the volume of installation package, on the other hand is also easy to operate. But relative to the native interface, H5 slow problem must be criticized by everyone, in response to this problem, there are several solutions, the most common is the offline package scheme, but offline package has several problems:

• Lag, content display is not timely;
• Coverage, it is difficult to reach 100%;
• Calibration time-consuming, due to the offline package of more material, load-time security check very much;

In addition to the above flaws, the support for offline packages is not particularly good for some UGC-structured businesses. In response to these problems, there is a new scheme (WEBSO) based on TCP long connections, focusing on improving the loading speed of the first screen. The main source of WEBSO's thinking is that the Android terminal is time-consuming when initializing the WebView and HTTP pull resources serially, such as:

WEBSO based on this premise, the serial is changed to parallel, and the use of TCP long connection to replace HTTP, another breakthrough is the dynamic nature of the HTML content, increased template and data separation, more frequent changes in the data defined as the change frequency is less defined as template, Basic implementation processes such as:

Mobile QQ for individual pages is the first use of WEBSO this program, but in the gray process found that the data is not ideal, especially the first load and template changes when the data is very bad, careful analysis found the main reasons include the following:

• TCP long connection signaling to pull resources through the cross-process, server relay, signaling queuing, encryption and decryption, resulting in a long time;
• TCP long connection signaling needs to download the full HTML to plug into the kernel rendering, can not take advantage of the kernel side download to render;
• Data, template changes will cause the entire page to be re-brushed, resulting in poor experience.
• URL does not switch intelligently when exception occurs

In view of these points, in order to make the user's experience better, the value-added Products department put forward the Sonic scheme, the second part we introduce the specific sonic implementation details.

I. Implementation Details

We introduce specific implementations from two scenarios.

The first scenario is when the user loads the page for the first time or when the cache fails, and as with WEBSO, the Sonic initiates an HTTP connection in parallel while initializing the webview, bridging the kernel to the HTTP stream after the WebView is initialized. Bridge flow may have three different states at different speeds of different models: full memory stream, memory stream + network stream, network stream. When the bridge stream is closed, we will split the HTML content in the terminal according to the template data splitting rules, and record the tags information of the template and the data, and use these tags information to verify and update the data in the next communication with the server. The concrete realization idea is as follows:

The second scenario is the user two times to enter the page, through the hand Q Gray test observation of this scene accounted for a relatively high, generally in the case of more than 70%. In this scenario, we load the cache preferentially and perform different processing based on the synchronization state of the HTTP (s) return code. Sonic first will be based on the cacheoffline to do different intelligent switch processing, and then according to the local cache state to do different state transitions: if the cache is fully hit, then no processing, if the template changes occur, the processing logic is a bit complicated, Sonic will be based on different models and network environment to do intelligent switching processing, faster when the HTML stream will be pulled over to the kernel rendering, the speed will still establish bridge stream, and the content will be split; if data changes occur, Sonic will diff the data. and the page through the JS communication to refresh, the benefits on the one hand can not affect the user's experience, on the other hand faster. The concrete realization idea is as follows:

In order to achieve better results, we may also join the DNS optimization, the benefit of this is to reduce the domain name hijacking, but the current scheme has achieved very good results.

Two. Data comparison

Below we respectively for the VIP center home in four scenes of the experimental data to compare (the Android side of the gray-scale data is basically consistent, iOS speed is not used in this scenario), the meaning of each line of the figure is as follows:

• Webviewstart-clickstart: Click the URL to the activity's OnCreate first line of time;
• Loadurl-clickstart: Click the URL to Loadurl time;
• Head-clickstart: Click the URL to the first line of the page execution time;
• Domready-clickstart: Click the URL to the DOM to prepare the time;
• Active-clickstart: Click the URL to the time the page interacts.

Where Active-clickstart is generally used to measure the total time of page loading.

The first scenario is the first time you start a Web process, no cache data, and you can find that the first boot Sonic is less than the WEBSO load time by 53%:

The second scenario is the first time you start the Web process, the data when the template is updated, and you can see that Sonic is reduced by 22% compared to WEBSO:

The third scenario is non-first-boot Web process, template unchanged data update data, sonic less than WEBSO 60%:

The fourth scenario is the first time the Web process is started, the cached data is fully hit, and Sonic and WEBSO do not have much data difference:

From the experiment and hand Q grayscale situation, overall, sonic in most scenarios have been able to achieve a very good experience, follow-up we will continue to further optimize, to achieve a better experience.

Mobile QQ Member H5 Acceleration Program--sonic Technology Insider