前端獲得session信息方式對比，優化

本文轉載自查看原文 2017-07-14 17:50 14348 前端優化

在開發中，頁面 js 經常會遇到需要當前登錄用戶信息（菜單權限，用戶基本信息，配置信息）的地方，一般情況我們可能對這些信息獲取方式不是太在意，但是現在的前端通過webpack打包，即使做了代碼分割，js文件,css文件還是很大。

在首次加載的情況下面，存在一定的優化空間。下面主要介紹一些信息獲取的方式。接口使用的是模擬數據，session獲取接口設置成了1秒延時，下面的數據都是首次加載的數據，不考慮304的情況。

　　1.后端程序設置,直接js代碼，全局變量寫入方式

　　瀏覽器訪問app.do，后端程序響應，獲取用戶信息 InitData，獲取返回的app.html文本，將用戶信息 <script> InitData = {user: {}}; </script> 寫入到html對應位置，返回給瀏覽器

　　【問題】

　a. 獲取用戶信息 InitData + app.html文本 ---→ 返回給瀏覽器，瀏覽器再加載其他靜態資源 ----> html加載過程

　b. app.do返回的html，由於每個用戶的基本信息都不一樣，沒辦法使用瀏覽器304緩存機制

　　2.頁面通過<script src="">同步加載方式

下面是頁面html代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        InitData={processData: function (){}};
        __page_begin = +new Date;
        __clog('html begin load');
　　　　 document.addEventListener('DOMContentLoaded', function () {__clog('html DOMContentLoaded');}, false);
        function __clog(str) {str = '--' + str + '                                  ';console.log(str.substr(0, 20), new Date - __page_begin);};
    </script>
    <script>__clog("session get begin");</script>
    <script src="../api/session?json"></script>
    <!--script>__clog("session get begin");
        !function(){
            var b;
            try{b=new XMLHttpRequest}catch(c){try{b=ActiveXobject("Msxml12.XMLHTTP")}catch(c){try{b=ActiveXobject("Microsoft.XMLHTTP")}catch(c){}}}
            b.onreadystatechange=function(){
                if(4===this.readyState&&200===this.status){
                    __clog("session get end");
                    var a=this.response||this.responseText;
                    InitData._sessionData=a,InitData.processData(a)
                }
            },b.open("GET","/api/session?json=true"),b.send()
        }();
    </script-->
    <!--script>!function(){
        var c,a=document.getElementsByTagName("head")[0],
        b=document.createElement("script");
        b.type="text/javascript",
        c="__clog('session begin get');";
        try{b.appendChild(document.createTextNode(c))}catch(d){b.text=c}
        a.appendChild(b),
        b=document.createElement("script"),
        b.type="text/javascript",
        b.src="../api/session?json",
        a.appendChild(b)
    }();</script-->
    <script>__clog("static run begin");</script></head>
<body><script src="/public/vendor.f1525575.bundle.js"></script><script src="/public/app.6e44bcf9.bundle.js"></script></body>
</html>
<script>__clog('html end load');</script>

　　指標介紹

html begin load	瀏覽器獲得app.html,開始頁面解析時間
session get begin	開始請求 session接口時間
session get end	session接口獲取完，開始運行js的時間
static run begin	其他static 文件可以執行的時間（實際的執行時間，還需要資源加載完成）
app runjs start	app.js 開始執行的時間
app loadPage	在app.js路由根據判斷，有InitData信息的時候，會展現組件
app runjs end	app.js 執行完成的時間
html end load	app.html最底部js運行時間
html DOMContentLoaded	DOMContentLoaded事件觸發時間