Comparison of several ways for the front end to obtain session information

During development, page js often encounters places where the currently logged in user information (menu permissions, basic user information, configuration information) is required. Generally speaking, we may not care too much about how to obtain this information. , but the current front-end is packaged through webpack. Even if code splitting is done, the js files and css files are still very large.

In the case of first loading, there is some room for optimization. The following mainly introduces some ways to obtain information. The interface uses simulated data, and the session acquisition interface is set to a 1 second delay. The following data are all data loaded for the first time, regardless of the 304 situation.

php Chinese website learning topic：php session (including pictures, texts, videos, cases)

　1. After End program settings, direct js code, global variable writing method

The browser accesses app.do, the backend program responds, obtains the user information InitData, obtains the returned app.html text, and writes the user information

　[Problem]

a. Obtain user information InitData + app. html text ---→ Return to the browser, and the browser loads other static resources----> html loading process

b. The html returned by app.do, because the basic information of each user is Different, there is no way to use the browser 304 caching mechanism

　2. The page is loaded synchronously through

The following is the page html code

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>

　Indicator introduction

html begin load	The browser obtains app.html and starts page parsing time
session get begin	Start requesting session interface time
session get end	After getting the session interface, start running js Time
static run begin	The time when other static files can be executed (the actual execution time also requires resource loading to be completed)
app runjs start	App.js start execution time
app loadPage	According to the judgment of app.js routing, there is InitData information When, the component will be displayed
app runjs end	The time when app.js execution is completed
html end load	App.html bottom js running time
html DOMContentLoaded	DOMContentLoaded event trigger time

【Advantages】

a.app.html You can use the browser 304 caching mechanism

B. Static resource requests can request in advance with API/Session.

3. Obtain the session asynchronously by writing page js and ajax

# 【Advantages】

api/ The session is changed to asynchronous mode, and the running time of app.js is advanced, with an improvement of nearly 1 second.

It is worth noting that the running time returned by ajax will be earlier than app.js if the delay is cancelled. It can be seen that this callback will be executed as long as the js thread is idle

4. Asynchronous loading by dynamically creating scripts, the effect is similar to the above

The above is the detailed content of Comparison of several ways for the front end to obtain session information. For more information, please follow other related articles on the PHP Chinese website!