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))
console.log(Object.prototype.toString.call(num))
console.log(Object.prototype.toString.call(boo))
console.log(Object.prototype.toString.call(arr))
console.log(Object.prototype.toString.call(obj))
console.log(Object.prototype.toString.call(fun))
console.log(Object.prototype.toString.call(nul))
console.log(Object.prototype.toString.call(und))
-----------------------------------------------------------------------------------
2