快速实现-简单分页器优化考虑

####1. 数据的本地存储

  1. 在短时间内点击页码的时候,我们是可以选择先不请求数据的,
  2. 也就是说,在快速重复点击的时候,我们可以不作为
  3. 某页码第一次请求数据,我们可以记录下时间戳,并且存储在localStorage
    3.1 在短时间再次点击该页码的同时,可以先从localStorage中取出,并对比时间间隔,如果时间间隔过长,我们可以请求新的数据,如果时间间隔过短,我们可以采用本地数据

#####localStorage:HTML5新增本地存储,可以永久性存储5MB左右的数据

只能存储字符串类型
复杂数据类型可使用JSON对象的stringify和parse来处理

方法:
setItem (key, value) —— 保存数据,以键值对的方式储存信息
getItem (key) —— 获取数据,将键值传入,即可获取到对应的value值
removeItem (key) —— 删除单个数据,根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key

优点:

  1. 节省网络流量:WebStorage不会传送到服务器,存储在本地的数据可以直接获取
  2. 快速显示: 数据存储在WebStorage上,再加上浏览器本身的缓存,获取数据时从本地获取会比从服务器端获取速度更快

####2. 事件的代理

  1. 因为数据的灵活性,页码的个数是不定的,并且每个页码的功能是一样的,我们无需给每个页码添加事件处理程序,这样的可以节省内存
  2. 给父元素添加事件处理程序:采用事件冒泡原理+事件目标,完成切换页码的功能

首先每个函数都是对象,都会占用内存,内存中对象越多,性能越差
必须事先指定所有事件处理程序,然后这个导致DOM访问次数过多,会延迟整个页面的交互就绪事件

优点:
在页面上设置事件处理程序所需时间更少
占用内存空间更少,提升整体性能

#####冒泡原理

事件开始时又最具体的元素接收,然后逐级向上传播到较为不具体的节点(由深至浅)
所有现代浏览器都支持事件冒泡一直会冒泡到window对象上

#####事件目标

  1. 存在于事件对象中:event.target 或者 event.srcElement
  2. 指的是触发事件的具体元素,而不是事件处理程序中的this(this指的是绑定事件处理程序的元素)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值