一次移動優化之旅（二）

weixin_34253539發表於2016-06-03
原文網址 : https://blog.csdn.net/weixin_34253539/article/details/89385052
優化

我們優化的目標是什麼：使介面早點顯示出來，資料是否正確可以等待查詢的返回來更新。

前言

上篇介紹了程式碼優化的方向：

  1. 去掉耗時的 jquery

  2. 優化個人程式碼

去掉耗時的 jquery

程式碼中用到 jquery 的地方，主要使用 jquery 的選擇器函式，extend函式，新增節點函式。

jquery等價dom原生操作

去掉了 jquery 的部分，雖然快了 200ms 左右，但是然並卵，開始介面的一段空白還是很醜。

圖片描述

最好的優化效果是把後面紅框中的時序放到前面紅框中。就是下面的操作方式，來個 setTimeout

優化個人程式碼

上篇中的示例我們再測試下：

!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)
}()

當 index.js 的邏輯是上面這樣的時候，介面有時會等到 2s 執行完成後才會渲染出來，有時沒有。為什麼？因為如果卡頓的話
可能是先執行了上述卡頓 2s 的操作。這裡先渲染介面還是執行js，具有不確定性，但是 Timeline 的時序分析是固定的，把 2s
的執行時間計算在內了，如圖：

圖片描述

圖片描述

不過，如果我們把上面的 index.js 內容改成如下的形式：

!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)
}()

則時序分析結果如下圖：

圖片描述

圖片描述

可以看到在手機中，時序顯示不一樣了，介面先出來了！

總結

在這種思想下，我們需要重寫我們的 html 頁面，修改後程式碼如下：

    <!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>

第一步，我們確認，html 頁面載入後，介面是會顯示的。

第二步，我們需要將頁面靜態化，就是先生成靜態頁面。

這裡涉及到 React 的伺服器端渲染，生成靜態檔案，原來這裡是為了 SEO 優化時提到的。

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

相關文章