前端获得session信息方式对比，优化

在开发中，页面 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事件触发时间

【优点】

a.app.html 可以使用浏览器304缓存机制

b.静态资源请求可以提前请求和 api/session一起请求

【问题】

属于同步方式，其他 js, css 运行时机需要等待 api/session 结果返回

3.通过写入页面js , ajax异步获取session

【优点】

api/session 改为异步方式，app.js运行时机提前，有将近1秒的提升

值得注意的地方是，ajax返回的运行时机，把延时取消的话，会比app.js早，可见这个回调只要是js线程空闲的话就会执行

4.通过动态创建script方式异步加载，效果和上面差不多