フロントエンドがセッション情報を取得するためのいくつかの方法の比較

ページ js は開発中に、現在ログインしているユーザー情報 (メニュー権限、基本的なユーザー情報、設定情報) が必要な場所によく遭遇しますが、一般的には、この情報を取得する方法についてはあまり気にしないかもしれません。フロントエンドパス Webpack パッケージ化の場合、コード分割が行われたとしても、js ファイルと css ファイルは依然として非常に大きくなります。

最初の読み込みの場合、最適化の余地があります。ここでは主に情報の入手方法をいくつか紹介します。 インターフェイスはシミュレートされたデータを使用し、セッション取得インターフェイスは 304 の状況に関係なく、すべて初めてロードされるデータです。

php中国語ウェブサイト学習トピック: phpセッション(写真、ビデオ、事例を含む)

1.バックエンドプログラムの設定、ダイレクトjsコード、グローバル変数の書き込み方法

ブラウザアクセスアプリを行います。バックエンド プログラムは応答し、ユーザー情報 InitData を取得し、返された app.html テキストを取得し、ユーザー情報 <script> = {user: {}}; を html の対応する位置に書き込みます。ブラウザに返す</script>

【問題】

a. ユーザー情報を取得 InitData + app.html text ---→ ブラウザに戻り、ブラウザは他の静的リソースを読み込みます

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 beginload	ブラウザがapp.htmlを取得、ページ解析時間を開始
session get begin	開始リクエストセッションインターフェース時間
セッションget end	セッションインターフェイスを取得した後、js の実行を開始する時間
static run begin	他の静的ファイルが実行できる時間 (実際の実行時間には、リソースの読み込みが完了することも必要です)
app runjs start	app.js開始実行時間
apploadPage	app.jsのルートが判定されInitData情報があるとコンポーネントが表示されます
app runjs end	app.js実行完了時間
html 読み込み終了	app.html ボトム js 実行時間
html DOMContentLoaded	DOMContentLoaded イベントトリガー時間

[利点] A.APP.HTMLはブラウザ304のキャッシュ機構を使用できます

B. 静的リソースリクエストはAPI/セッションリクエストで事前にリクエストできます

[質問]

所属は同期されています、他の JS、他の JS、CSS の実行時間は、API/セッションの結果が返されるまで待機する必要があります

3. ページ js と ajax を記述してセッションを非同期で取得します 段階的に、app.js が実行されます タイミングが進み、ほぼ1秒の改善があります

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​: 遅延が解消されると、ajax が返す実行時間は app.js よりも早くなります

4. 動的に作成することで、このコールバックが実行されることがわかります。スクリプトを使用すると、効果は上記と同様になります

以上がフロントエンドがセッション情報を取得するためのいくつかの方法の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。