Starting from:
My blog

preface

There is often a problem in our APP that the display page will leave a lot of blank space at the bottom of the page, and the display speed of the page will take one or two seconds or more.

Width acquisition problem

The problem with iOS and Android is that there’s no way to resize the iOS WebView once it’s stretched out, and Android can. This requires that the text width and image height of the document be set to small values in advance, and then spread out.

For example, to get the width, you can use the following method:

function initWidth() {
    var innerWidth = window.innerWidth;
    var scrollWidth = document.body.scrollWidth;

    return (innerWidth < scrollWidth ? window.innerWidth : document.body.scrollWidth);
}

Then you set the minimum width to the default font-size of the HTML. The code example is as follows:

<html lang="zh" style="font-size: 0px;" >

WebView interacts with native

Previously we were injecting class instances on the client side. But for now we recommend using DSBridge for interaction. Android and iOS documentation links are available here.

Lazy image loading

In general, in order to reduce the use of traffic, we will be lazy to load the image processing. Then this time may encounter a problem, that is, if the pictures are extremely short in height, then because of lazy loading, the overall loading height of the pictures is less than the lazy loading height, which may cause a blank section of the page display.

It is recommended to change the default height of the image to 0 by default, then store the image width to height ratio in HTML, and then calculate the ratio in the web page to get the correct height of the image. This will not cause an error between the displayed height and the actual height.

WebView loading optimization

In order to load the JS display, we changed the previous loading of the entire web page to create the template locally. Loads the local page template directly on each load. Then JS directly requests the dynamic content of the web page to render directly through Ajax. This greatly speeds up the presentation speed of the web page.

The flow chart is as follows:

At the end

So that’s the specific optimization strategy that we’re doing. After optimization, the content of the web page is almost instantaneous.