一、缓存机制
定义：
将静态资源（js、css、图片）缓存在本地浏览器或距离最近的缓存服务器（如CND）。
作用：
1、请求更快，加快网页加载速度；
2、节省带宽，甚至无需请求网络；
3、降低服务器的压力。
分类：
服务端：CDN缓存、数据库缓存等
客户端：http缓存、H5离线存储、浏览器缓存
缓存命中顺序：
浏览器缓存分为强缓存和协商缓存
强存不发请求到服务器，存数据未失效的情况下（即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期，状态码：200，from cache）
协商缓存会发请求到服务器，（没有Cache-Control和Expires或者Cache-Control和Expires已过期或者它的属性设置为no-cache时）
CDN缓存：
原理：用户通过域名来访问页面，首先进行dns处理，dns服务器会将用户访问的请求定位到离用户最近、负载最轻的cdn缓存服务器上，返回该节点的ip地址。一方面返回数据，另一方面进行本地缓存，之后再次访问，就会从这个cdn服务器返回。
作用：加快用户体验速度；减轻源服务器负担。
http缓存：
1、http meta标签
//只有部分浏览器支持
<meta http-equiv="Pragma" content="no-cache"
2、http 头信息控制
响应头设置：
expires:过期时间（http1.0）
cache-control: public、private、no-cache、no-store、max-age（http1.1，级别高于expires）
no-cache：不缓存过期的资源
no-store：禁用缓存
max-age：缓存多久（秒）
last-modified:（服务端返回）资源最后更新时间 if-modified-since：（客户端发送last-modified的值），对比这两个值，没有改变返回304，有改变则返回新的内容。
etags:（服务端返回）标识资源的状态，一段hash字符串，if-none-match（客户端发送etags的值），对比这两个值，没有改变返回304，有改变则返回新的内容。（etags级别高于last-modified）
H5离线存储
浏览器缓存：
1、cookie：因为http协议是无状态的，服务端无法判断用户的身份，所以cookie就是服务端颁发给用户的一个令牌（相当于身份证），存储在客户端浏览器，每次请求的候回带上cookie，服务端以此来辨认用户状态。
document.cookie = "name = value; path=/;domain=一级域名;expires=";
2、localStorage（长期存储）
3、sessionStorage（临时存储）
区别：
1、生命周期：cookie可设置过期时间；localStorage永久保存；sessionStorage仅在当前会话下有效；
2、存放数据大小：cookie4k；webStorage：5M；
3、与服务器通信：cookie在每次请求中都会被携带在请求头中，webStorage不参与服务器的通信；
4、易用性：cookie需要自己封装；webStorage有原生的接口直接使用：getItem()、setItem()、removeItem()、clear()
附：indexDB是一种使用浏览器存储大量数据的方法，数据可被查询，也可离线使用。
indexDB和localStorage优缺点比较：两者都只能存一些安全性不太重要的数据。
localStorage简单易用，存储数据量小
indexDB接口都是异步的，操作不便，存储数据量大
二、如何设计一个localStorage，保证数据的实效性
/** * 设置value * @param {[type]} key [键名] * @param {[type]} value [键值] * @param {[type]} days [保存的时间（天）] */ setVal: function (key, value, days) { // 设置过期原则 if (!value) { localStorage.removeItem(key) } else { var Days = days || 7; // 默认保留7天 var exp = new Date(); localStorage[key] = JSON.stringify({ value, expires: exp.getTime() + Days * 24 * 60 * 60 * 1000 }) } }, getVal: function (name) { try { let o = JSON.parse(localStorage[name]) if (!o || o.expires < Date.now()) { return null } else { return o.value } } catch (e) { // 兼容其他localstorage console.log(e) return localStorage[name] } finally { } },
三、websocket
websocket是h5新增的网络通讯协议，属于服务器推送技术的一种。
特点：
1、客户端可以向服务端发送消息，服务器可以主动向客户端推送消息。
2、握手阶段采用http协议，与http协议有良好的兼容性；
3、没有同源策略限制，不存在跨域；
4、协议的标识符是ws，加密的wxs。
let ws = new WebSocket("ws://localhost:8181"); ws.onopen = function() { console.log("client：打开连接"); ws.send("client：hello，服务端"); }; ws.onmessage = function(e) { console.log("client：接收到服务端的消息 " + e.data); setTimeout(() => { ws.close(); }, 5000); }; ws.onclose = function(params) { console.log("client：关闭连接"); };
应用场景：
客服、聊天室、数字货币的跌涨实时更新
websocket 心跳重连 （通信检测）:
如果不存在检测，那么网络突然断开，造成的后果就是client、server可能还在傻乎乎的发送无用的消息，浪费了资源。
这时需要定时向server发送消息，如果接收到server的响应就表明连接依旧存在
//重连函数，若超时未收到消息，或发生错误则重新连接 //因为重连函数会被socket事件频繁触发，所以通过函数节流限制重连请求发送 function reConnect(url) { if (!flag) { return; } flag = false; setTimeout(function () { createWebsocket(url); flag = true; }, 3000) } ?
四、webworker
在浏览器中创建一个worker线程，用来处理一些复杂耗时的运算，用postMessage传递结果给主线程。
特点：不能操作dom