1 图片懒加载

1 作用: 图片按需加载减少请求压力

2 实现流程的描述: 
  1 设置自定义属性 data-src 保存src 的路径, 需要的时候传给 src -- 就是阻止图片的加载
  2 判断图片是否进入或快进入可视区
	1 获取页面被卷去头部的长度, 获取可视区的高度, 循环判断img的位置是否进入可视区, 把以上步骤在一个函数内执行
	2 一入页面调用一次, 添加滚动条事件 --> 来执行这个函数  (使用节流来优化)
	
3 代码: Tools -> JS -> 操作 -> 图片懒加载 (设置俩个位置就可以轻松实现效果)

2 图片预加载

1 作用: 通过占位图解决网速较慢视觉空白问题, 提升用户体验

2 实现流程的描述: 


3 代码: Tools --> JS --> xTools --> 4-图片预加载

3 防抖 + 节流

1 防抖描述: 
  1 触发高频事件的时候, 先不执行事件, 当不触发该事件的 n秒后, 再去触发这个事件
  2 触发高频事件n秒后执行一次, 如果 n秒内高频事件再次被触发, 则重新计时

2 节流描述: 
  1 高频事件触发, 但在 n秒内只会执行一次, 所以节流会稀释函数的执行频率   //也就是降低事件执行频率

3 俩者的区别: 
  1 防抖动是将多次执行变为最后一次执行
  2 节流是将多次执行变成每隔一段时间执行

4 防抖常用的场景: 
  1 关键词搜索
  2 窗口大小变化
  
5 节流常用的场景: 
  1 滚动条事件
  2 图片懒加载

6 代码封装: 
  1 防抖: Tools / JS / 操作 / 防抖
  2 节流: Tools / JS / 操作 / 节流

4 cookie

1 说明: cookie -- 是由web服务器存储在用户电脑硬盘上的一个小的文本文件 -- 浏览器机制 -- 可通过JS操作

2 作用: 
  1 访问一个网站时, 存储一些用户信息; 
  2 下次访问该网站的时候, 服务端可以通过http请求, 直接读取到这些信息并使用
  
3 特点:
  1 跨页面 -- 同域名 -- 共享数据
  2 可以设置有效期
  
4 缺点:
  1 大小限制 4K, 约等于 50条  --  存储空间小
  2 安全性不够高
  3 每次HTTP请求, 都会发送给服务器
  4 没有方便操作的 API
  
5 cookie--和--localStorage的区别:
  1 cookie 相对安全, 适合存储敏感信息 -- 浏览器对cookie有一定的保护机制 -- localStorage 没有保护
  2 cookie 可存储空间小 4K左右 -- localStorage 20M
  3 cookie 没有方便操作的 API -- localStorage 有
  4 cookie 存储的数据是有有效期的 -- localStorage 永久保存

5 localStorage

1 说明: 在本地存储一些数据, 需要的时候就可以去拿了 (是 window下的对象)

2 特点
  1 跨页面 -- 同域名 -- 共享数据
  2 大小限制 20M
  3 要以字符串的形式存储 -- 配合 jsonp方法
  
3 操作 API
  1 储存数据  localStorage.setItem("key", "value")
  2 获取数据  localStorage.getItem("key")
  3 删除数据  localStorage.removeItem("key")
  4 删除所有数据  localStorage.clear()
  
4 代码操作
  let obj = {a:123, b:456};
  localStorage.setItem("user", JSON.stringify(obj));   //存储
  let hh = JSON.parse(localStorage.getItem("user"));   //取出

sessionStorage

1 数据生命周期为关闭浏览器窗口
2 在同一个窗口(页面)下数据才可以共享
3 大小限制 约5M
4 API 方法是差不多的 -- 不常用

6 让 input只能输入数字

input: 输入时触发的事件

ipt.addEventListener('input', function() {
	this.value = this.value.replace(/[^\d]/g,'')
    if(ipt.value >1000) { ipt.value = 1000 }  //也可以做其他的限制
})

7 判断数据类型

1 通过构造器的方式判断数据类型
-----------------------------------------------------------------------------------
    var str = 'abc'
    var num = 123
    var boo = true
    var arr = [1, 2, 3] 
    var obj = {}
    var fun = function() {}
    var nul = null
    var und;

    console.log(Object.prototype.toString.call(str))  // '[object String]' 
    console.log(Object.prototype.toString.call(num))  // '[object Number]' 
    console.log(Object.prototype.toString.call(boo))  // '[object Boolean]' 
    console.log(Object.prototype.toString.call(arr))  // '[object Array]' 
    console.log(Object.prototype.toString.call(obj))  // '[object Object]' 
    console.log(Object.prototype.toString.call(fun))  // '[object Function]' 
    console.log(Object.prototype.toString.call(nul))  // '[object Null]' 
    console.log(Object.prototype.toString.call(und))  // '[object Undefined]' 
-----------------------------------------------------------------------------------

2