根据访问属性进行差异化数据加载

简介:

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

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






本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/p/diff-user-load-data.html,如需转载请自行联系原作者

目录
相关文章
|
9月前
|
SQL 数据格式
视图有哪些特点?哪些使用场景?
视图有哪些特点?哪些使用场景?
|
6月前
|
存储 开发框架 前端开发
EAV模型(实体-属性-值)的设计和低代码的处理方案(2)--数据的查询处理
EAV模型(实体-属性-值)的设计和低代码的处理方案(2)--数据的查询处理
|
6月前
|
对象存储 数据安全/隐私保护
就软件研发问题之数据流动支持目录级别映射的问题如何解决
就软件研发问题之数据流动支持目录级别映射的问题如何解决
|
9月前
灵活标签导出:一键满足多样化下游数据需求!
Dataphin标签平台支持导出标签时同步导出代码名称,解决了业务人员理解代码值的难题。用户可选择导出标签值、代码名称或两者,支持多数据源一键建表,实现与业务系统无缝对接。
104 2
灵活标签导出:一键满足多样化下游数据需求!
|
9月前
|
调度 数据处理 运维
公共日历调度及数据筛选:更符合业务场景的数据产出方式!
在证券行业,数据处理和分析是核心任务之一,对于提供决策支持和市场分析至关重要。由于股市的特殊性,不同的市场(如沪深、港股等)拥有各自的交易日历,这意味着在非交易日,如周末或特定节假日,市场是关闭的,不产生任何交易数据。因此,证券行业的数据处理任务需紧密跟随这些交易日历的规律进行调度,以确保数据的准确性和实时性。
138 1
公共日历调度及数据筛选:更符合业务场景的数据产出方式!
|
8月前
|
存储 程序员 Swift
Swift开发——存储属性与计算属性
Swift推荐使用结构体进行开发,结构体支持属性和方法,且作为值类型。结构体属性包括存储属性(如radius)和计算属性(如r),计算属性不存储值,类似方法。结构体用`struct`定义,命名遵循大驼峰规则。实例名遵循小驼峰规则。属性可在结构体中任意位置定义,静态属性用`static`。存储属性可为`lazy`实现懒加载。结构体实例通过`.`访问属性和方法,静态属性和方法用`结构体名.`访问。计算属性可读写,可通过`get`和`set`定义。程序段1展示了结构体Point和Circle的属性和方法,包括私有属性、只读计算属性、可读写计算属性及`mutating`方法。
52 0
Swift开发——存储属性与计算属性
|
9月前
|
分布式计算 DataWorks 数据处理
DataWork数据处理问题之属性覆盖掉如何解决
DataWork数据处理是指使用DataWorks平台进行数据开发、数据处理和数据治理的活动;本合集将涵盖DataWork数据处理的工作流程、工具使用和问题排查,帮助用户提高数据处理的效率和质量。
基于参数关联关系动态呈现参数
本场景以计费方式为例,为您介绍资源编排如何在计费方式为包年包月时动态呈现包年包月的单位和时长。
|
存储 开发框架 前端开发
ModStartCMS v5.5.0 页面标签支持,用户逻辑优化
ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。
|
缓存 开发框架 .NET
实体列表缓存(最土的办法实现百万级性能)
在实际项目开发中,经常遇到有一些表数据很少(1000行以内),不会频繁修改(平均每行几个小时才会修改一次),例如配置表、分类表等。 这样的表,往往可以接受三五秒甚至更长的延迟,正是最适合使用缓存的地方。 实体缓存:一次性加载全表数据进入内存,供上层多维度查询!
393 0

热门文章

最新文章