html5

一、缓存机制

定义：

将静态资源（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