前端獲得session資訊的幾種方式的對比

 

在開發中，頁面js 經常會遇到需要當前登入使用者資訊（選單權限，使用者基本資訊，設定資訊） 的地方，一般情況我們可能對這些資訊取得方式不是太在意，但現在的前端透過webpack打包，即使做了程式碼分割，js檔,css檔還是很大。

在首次載入的情況下面，存在一定的最佳化空間。以下主要介紹一些資訊取得的方式。      介面使用的是模擬數據，session取得介面設定成了1秒延遲，下面的數據都是首次載入的數據，不考慮304的情況。

php中文網學習專題：php session（包含圖文、影片、案例）

　　1.後端程式設定,直接js程式碼，全域變數寫入方式

　　瀏覽器存取app.do，後端程式回應，取得使用者資訊InitData，取得傳回的app.html文本，將使用者資訊

　　【問題】

    　a. 取得使用者資訊InitData + app.##    　a. html文字 ---→ 傳回瀏覽器，瀏覽器再載入其他靜態資源----> html載入程序

    　b. app.do回傳的html，由於每個使用者的基本資料都不一樣，沒辦法使用瀏覽器304快取機制

　　2.頁面透過

        下面是頁面html程式碼

nbsp;html><meta><script>InitData={processData: function (){}};
        __page_begin = +new Date;
        __clog(&#39;html begin load&#39;);　　　　 document.addEventListener(&#39;DOMContentLoaded&#39;, function () {__clog(&#39;html DOMContentLoaded&#39;);}, false);function __clog(str) {str = &#39;--&#39; + str + &#39;                                  &#39;;console.log(str.substr(0, 20), new Date - __page_begin);};</script><script>__clog("session get begin");</script><script></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(&#39;session begin get&#39;);";
        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><script></script><script></script><script>__clog(&#39;html end load&#39;);</script>

 　　指標介紹

## html end load app.html最底部js運行時間 html DOMContentLoaded DOMContentLoaded事件觸發時間

# html begin load	瀏覽器獲得app.html,開始頁面解析時間
# session get begin	開始請求 session介面時間
session get end	# session介面取得完，開始執行js的介面取得完，開始執行js的介面取得時間
static run begin	其他static 檔案可以執行的時間（實際的執行時間，也需要資源載入完成）
# app runjs start	app.js 開始執行的時間
app loadPage	在app.js路由根據判斷，有InitData訊息的時候，會展現出元件
app runjs end	# app.js 執行完成的時間

# 

 

 

 

# 

 

# 

#          【優點】

           a.app.html 可以使用瀏覽器304緩存機制

           b.靜態資源請求可以事先要求和api/session一起要求

         【問題】

         非同步方式，其他需要時機和必須時機

         3.透過寫入頁面js , ajax非同步取得session

        優點】 

  session 改為非同步方式，app.js運行時機提前，有將近1秒的提升

         值得注意的地方是，ajax返回的運行時機，把延時取消的話，會比app.js早，可見這個回呼只要是js線程空閒的話就會執行

 

         4.透過動態創建script方式異步加載，效果和上面差不多

## 

#

以上是前端獲得session資訊的幾種方式的對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！