H5 load optimization

Toutiao quality optimization – Graphic details page seconds practice from the input URL to the whole process of page loading

Page loading time = Page loading completion time – Page loading start time

  • The WebView loadFinish callback is actually done in the page loading phase, and the page structure is basically rendered when the DOM is built.

From the perspective of the user’s real experience, the DOM structure is completed (i.e., domReady) as the page loading completion time.

Generally speaking, webView rendering goes through the following steps

  1. Parsing HTML files
  2. Load the JavaScript and CSS files
  3. Parse and execute JavaScript
  4. Building a DOM structure
  5. Load resources such as images
  6. Page loaded

Bad problems

There are many scenarios that can cause the details page to go blank, such as network exceptions, WebView exceptions, and so on

Template to optimize

There are several stages from clicking to seeing the page content:

  • Create a WebView
  • Load the Html
  • Load the JS and CSS
  • Loading content data
  • Page rendering

The middle three steps, belonging to the network stage, are easily affected by network fluctuations and cannot guarantee the success rate. Solutions:

  • The common styles and logical JS are separated into separate templates that are built into the client
  • And the client agreed a good JS interface, through the interface to inject data, and data requests to a client.

Template preheating

When completely off the network, the bottleneck of page loading speed is the loading time of the local template.

  • Template merge, JS and CSS as well as some images, inlined into a file, reduce IO operations
  • Template simplification, part of the unnecessary script asynchronous pull

Template reuse

  • When the template and data are separated, the same template is loaded each time.
  • Therefore, create a WebView in the background at an appropriate time, and preheat and load the template in advance. When the user clicks into the page, he can use the WebView that has loaded the template, directly inject the content data of the detail page into the page through JS, and render the page after the front-end receives the data.
  • After using the current WebView, you just need to clear the body data when the user exits the page so that you can reuse the WebView and re-inject data when you go to the next page.

Network optimization

Unchanging content hosted to CDN

Rendering optimization

When we optimize the template layer and network layer to the extreme, we are limited by the speed of WebView rendering!

Server prerender

  • JSON data is injected into the front end through the interface, which needs to be converted into HTML tags and rendered by the WebView, resulting in a long time consuming process

Workaround: All HTML data for the body of the detail page is assembled on the server side

Client-side rendering

  • Rendering non-text content such as images and videos is inefficient for webViews
  • There are also issues with WebView rendering memory footprint and sliding experience
  • If the user opens the same article for many times, the image in this article will also have the problem of loading for many times, and cannot be cached and shared with the client, which is also a waste of user traffic

Solution: Render non-text content such as images and videos by native components on the client side. For example, the top of the interface is a native View, and the bottom is a WebView.