欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

前端获得session信息的几种方式的对比

程序员文章站 2022-04-24 18:04:16
...
在开发中,页面 js 经常会遇到需要 当前登录用户信息(菜单权限,用户基本信息,配置信息) 的地方,一般情况我们可能对这些信息获取方式不是太在意,但是现在的前端通过webpack打包,即使做了代码分割,js文件,css文件还是很大。

在首次加载的情况下面,存在一定的优化空间。下面主要介绍一些信息获取的方式。 接口使用的是模拟数据,session获取接口设置成了1秒延时,下面的数据都是首次加载的数据,不考虑304的情况。

学习专题php session (包含图文、视频、案例)

  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?1.1.11"></script><script src="/public/app.6e44bcf9.bundle.js?1.1.11"></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事件触发时间

前端获得session信息的几种方式的对比

前端获得session信息的几种方式的对比

【优点】

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

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

【问题】

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

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

前端获得session信息的几种方式的对比

前端获得session信息的几种方式的对比

【优点】

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

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

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

前端获得session信息的几种方式的对比

前端获得session信息的几种方式的对比

以上就是前端获得session信息的几种方式的对比的详细内容,更多请关注其它相关文章!