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

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指的是绑定事件处理程序的元素）