• 用户个性化数据加载的实现方式
  • Alice 发表于 2015/6/8 12:35:00 | 分类标签: 个性化 cookie
  • 判断用户是否第一次访问页面,先不说怎么做,想想什么场景下会用到?如果我们页面的体积过大,用户第一次访问,会消耗大量的时间(2-5s)去下载页面所需要的资源,给用户带来的体验是很不好的,尤其是移动端的用户。如果我们可以在用户第一次访问的时候只加载主要内容,在这个主要内容中引导用户做更多的加载资源的操作,一方面可以让用户熟悉系统,一方面也给页面加载资源争取了巨量的时间,何乐而不为?!

    我们能最快想到的方案是,使用 cookie ,服务器根据 cookie 的属性(如某个 Tag 的值为 1 或者 0)来判断要给用户呈现什么样的内容,这样做有几点不好:

    1. 需要服务器协助,而很多时候前端对服务器的控制为 0
    2. cookie在每次网页请求的时候都会附带,浪费 (当然,可以在用户访问一次之后清理这个 cookie,比如服务器端设置 session 值,不过又增加了后端的逻辑负担,而且不靠谱)
    3. 如果用户禁用了 cookie 呢?

    问题有很多,解决问题的方案也不少,针对这个问题,HTML5规范也提供了相应的事件和属性支持。

    》如何判断用户是否为第一次访问页面

    当页面加载的时候会触发 onload 事件,完了之后触发 pageShow 事件,pageShow 事件是页面每次加载都会触发的,而 onload 不然。默认情况下,浏览器会缓存当前访问的页面(隐私模式除外,特殊处理,也会缓存,退出隐私模式时,缓存的所有内容全部删除),当用户点击前进或者后退按钮时,浏览器会从缓存中获取内容,这个时候 onload 事件是不会触发的。

    可以这么说:

    • 如果待加载的页面不存在于缓存中,会触发 onload ,再触发 pageShow
    • 如果待加载的页面存在于缓存中,不触发 onload,只触发 pageShow

    pageShow 事件对象 event 中有一个属性值,叫做 persisted,如果这个值为 true,则为缓存数据,false,则为第一次加载。

    》差异化加载

    var body = document.body;
    body.onpageshow = function(evt){
      if(evt.persisted){
        // 如果从缓存加载,该干啥干啥
        doSomething();
      } else {
        // 如果用户第一次访问(没有缓存),只加载主体框架
        loadMainContent();
      }
    };

     loadMainContent() 我们可以这样干:

    funtion loadMainContent(){
      // 引导用户执行操作,操作一次加载点东西
      leadUserDoSomething();
      // 或者悄悄地缓慢的加载需要的数据
      loadDataInQuickMode();
    }

    当然,通过 cookie 或者 pageshow 事件属性判断用户浏览器是否有缓存数据不是最终的解决方案,但这是一种思考模式,可以发散思维~

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:Alice
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮