前端性能优化（二）缓存为王

HTTP缓存

常用的库(jquery等)，不经常变得这些库，版本要求不是很严格，用HTTP强缓存。
前端性能优化（三）协议处理

前端离线缓存

业务代码，md5变化频繁，使用本地缓存。

cookie
- 存储最大数据量为4K
- 同一个域名下存放 Cookie 的个数是有限制的，不同浏览器的个数不一样，一般为 20 个；
- Cookie 支持设置过期时间，当过期时自动销毁；
- 每次发起同域下的请求都会发送回服务器
Local Storage
- 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。（和Session Storage的区别）
- 相当于一个 5M左右的针对于前端页面的数据库
- 键值对存储，存储的Value限定为string类型
- 在浏览器的隐私模式下不可读取
- 本质上是对字符串的读取,且操作是同步的，建议存储量在2.5M以下，否则会变卡
- 不能被爬虫抓取到
- 受到同源限制，不能跨域。但是,可以借助postMessage和iframe来实现跨域的数据读取
- 在同源的所有标签页和窗口之间共享数据
Session Storage
- 与 localStorage 拥有统一的 API 接口；
- 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。（和Local Storage的区别）
- 数据在页面刷新后依然存在，但在关闭浏览器标签页之后数据就会被清除；
IndexedDB（NoSQL 数据库）
- 允许储存大量数据（一般来说不少于 250M，甚至没有上限），提供查找接口，还能建立索引。
- 键值对储存。所有类型的数据都可以直接存入，包括 JavaScript 对象。同时支持二进制储存（ArrayBuffer 对象和 Blob 对象）。
- 操作是异步的
- 支持事务。
- 受到同源限制，每一个数据库对应创建它的域名。访问不能跨域。
  
  来自阮一峰的网络日志
Web SQl
- Web SQL 能方便进行对象存储
- Web SQL 支持事务，能方便地进行数据查询和数据处理操作
- HTML5放弃了Web SQL Database
  放弃的原因是：
  This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
  大概意思是：这个文档是W3C推荐的，但是规范工作已经停止了。规范陷入了僵局:所有感兴趣的实现者都使用相同的SQL后端(Sqlite)，但是我们需要多个独立的实现来沿着标准化的道路前进。

本地缓存方案

主流的数据开源库
- localForage
  localForage 是一个快速简单的 JavaScript 存储库。它通过使用类似于 localStorage 的简单 API 来使用异步存储（IndexedDB 或 WebSQL)），进而改善你的 Web 应用程序的离线体验。
- Dexie.js
  Dexie.js 是 IndexedDB 的包装库，它提供了一套经过精心设计的 API，强大的错误处理，较强的可扩展性，此外它能够跟踪数据变化，支持 KeyRange (搜索不区分大小写，可设置匹方式和 OR 操作)。
  Dexie.js 主要为了解决原生 IndexedDB API 中存在的三个主要问题：异常错误处理。较弱的查询功能。代码复杂性。
local Storage缓存js方案管理版本

存储文件的js完整路径及名称，名称中包含文件版本信息（md5等）。
localStorage.setItem("common:widget/a.js", "/static/common/widget/a_[md5旧].js")
根据js完整路径及名称，存储js代码
localStorage.setItem("/static/common/widget/a_[md5旧].js", "代码code...")

init时，启动的js脚本加载manifest这种清单

1
2
3

const manifest = {
    "common:widget/a.js":"/static/common/widget/a_[md5新].js"
}

逻辑判断，加载js

const aJs = localStorage.getItem("common:widget/a.js") // "/static/common/widget/a_[md5旧].js"
const md5 = "md5新" // 文件版本
<!-- 然后判断这个文件是否存在 -->
if(aJs){
    // 存在，有缓存
    if(md5 === "md5旧"){
        // 缓存没过期，直接去缓存里的
        const aJsCode =  localStorage.getItem(aJs)
        // 执行缓存的js代码,evel只是例子，不建议使用.可以addScript
        evel(aJsCode)
    }else{
        // 缓存过期
        localStorage.removeItem(aJs)
        // 拉取新的
        const aJsCodeNew = fetch("/static/common/widget/a_[md5新].js")
        // 存缓存
        localStorage.setItem("common:widget/a.js", "/static/common/widget/a_[md5新].js")
        localStorage.setItem( "/static/common/widget/a_[md5新].js", aJsNew)
        // 执行新的js代码
        evel(aJsCodeNew)
    }
}else{
    // 不存在，没有缓存。拉取新的文件，执行
    fetch("/static/common/widget/a_[md5新].js")
    // 做缓存
    localStorage.setItem("common:widget/a.js", "/static/common/widget/a_[md5新].js")
    localStorage.setItem("/static/common/widget/a_[md5新].js", "代码code...")
}