登录  /  注册
首页 > web前端 > js教程 > 正文

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

巴扎黑
发布: 2017-07-18 18:24:49
原创
5619人浏览过

 

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

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

php中文网学习专题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.页面通过

        下面是页面html代码

nbsp;html&gt;<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 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方式异步加载,效果和上面差不多

 

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号