博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
根据访问属性进行差异化数据加载
阅读量:5263 次
发布时间:2019-06-14

本文共 1300 字,大约阅读时间需要 4 分钟。

判断用户是否第一次访问页面,先不说怎么做,想想什么场景下会用到?

如果我们页面的体积过大,用户第一次访问,会消耗大量的时间(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 事件属性判断用户浏览器是否有缓存数据不是最终的解决方案,但这是一种思考模式,可以发散思维~

转载于:https://www.cnblogs.com/hustskyking/p/diff-user-load-data.html

你可能感兴趣的文章
CodeForce 677C - Vanya and Label
查看>>
【转】目前最常见的”无线通信(数据)传输技术“有哪些?
查看>>
【JZOJ5231】【NOIP2017模拟A组模拟8.5】序列问题 线段树
查看>>
dubbo(provider,consumer)点到点直连配置
查看>>
python 生成 pptx 分析报告的工具包:reportgen
查看>>
需求文档的建立及范例
查看>>
简明Python3教程 4.安装
查看>>
Spring3.0 入门进阶(1):从配置文件装载Bean
查看>>
Windows 7 下配置IIS,并且局域网内可访问
查看>>
三层架构介绍
查看>>
Java基于Spring配置读取properties文件
查看>>
Mybatis中的jdbcType的作用
查看>>
前端组件
查看>>
liunx中计算机壳层
查看>>
微信产品分级报价管理系统
查看>>
[C# 基础知识系列]专题七: 泛型深入理解(一)
查看>>
顶部阴影效果
查看>>
【每日Scrum】第六天冲刺
查看>>
第二次实验作业
查看>>
JavaOOP
查看>>