A journey of mobile optimization (2)

Time:2020-10-25

What is the goal of our optimization: make the interface display earlier, whether the data is correct or not can wait for the query to return to update.

preface

The first part introduces the direction of code optimization

  1. Remove the time-consuming jQuery

  2. Optimize personal code

Remove the time-consuming jQuery

Where jQuery is used in the code, we mainly use jQuery’s selector function, extend function and add node function.

JQuery equivalent DOM native operation

Although the interface of JS is ugly, it starts quickly.

A journey of mobile optimization (2)

The best optimization effect is to put the sequence in the back red box into the front red box. It’s the following operation mode. Let’s do itsetTimeout

Optimize personal code

Let’s test the example in the first part

!function() {

    var date = new Date();
    var curDate = null;
    do {
        curDate = new Date();
    } while (curDate - date < 2000);

    setTimeout(function() {
        var el = document.getElementById("page");
        el.innerHTML = "This is a second page";
        console.log(2);
    }, 2000)
}()

Whenindex.jsThe logic of this is that sometimes the interface will wait2sIt will be rendered only after execution, sometimes not. Why? Because if you’re stuck
It may be that the above-mentioned sticking was carried out first2sOperation of. It is uncertain whether to render the interface or execute JS first, but the timing analysis of timeline is fixed2s
The running time is included, as shown in the figure

A journey of mobile optimization (2)

A journey of mobile optimization (2)

But if we put the topindex.jsThe content is changed to the following form:

!function() {

    setTimeout(function() {
        var date = new Date();
        var curDate = null;
        do {
            curDate = new Date();
        } while (curDate - date < 2000);

        console.log(curDate - date);
    }, 100);

    setTimeout(function() {
        var el = document.getElementById("page");
        el.innerHTML = "This is a second page";
        console.log(2);
    }, 2000)
}()    

The results of time series analysis are as follows:

A journey of mobile optimization (2)

A journey of mobile optimization (2)

You can see that in the mobile phone, the timing display is different, the interface comes out first!

summary

In this way of thinking, we need to rewrite ourhtmlPage, the modified code is as follows:

    <!doctype html>
    <html>
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="format-detection" content="telephone=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="white" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="../../tlibs/style.css">
    </head>
    <body style="overflow: hidden;margin:0;">
    <div id="app"><h1 style="color: red;">Hello World</h1></div>
    <div id="mask"></div>
    </body>
    <script type="text/javascript">
        
        setTimeout(function() {

            var urls = [
                "../../libs/highcharts.js",
                "../../tlibs/connect.js",
                "../../tlibs/__tdx_vendor.js",
                "../../tlibs/__tdx_client.js",
                "./index_config.js"
            ];

            for(var i = 0; i < urls.length; i++) {
                var el = document.createElement("script");
                el.setAttribute("src", urls[i]);
                // el.setAttribute("defer", "defer");
                document.body.appendChild(el);
            }

            setTimeout(function() {
                var el = document.createElement("script");
                el.setAttribute("src", "./index_func.js");
                document.body.appendChild(el);    
            }, 300)

        }, 10)

    </script>
    </html>

First, we confirm that,htmlAfter the page is loaded, the interface will be displayed.

Second, we need to make the page static, that is, static page.

This involvesReactServer side rendering, generate static files, the original here is forSEOOptimization.

import { renderToString } from "react-dom/server"