前端缓存的方式

缓存模式

概念 浏览器缓存是浏览器端保存数据用于快速读取或避免重复优化机制.

缓存类别 前端缓存主要分为http缓存和浏览器缓存,其中http缓存是在http进行传输的时候的缓存,主要在服务器上设置,而浏览器缓存则是存储的客户端的,能够经过js对浏览器的存储进行操做

缓存优势

• 缓存能够说是性能优化中简单高效的一种优化方式.一个优秀的缓存策略能够缩短网页请求资源的距离,减小延迟,而且因为缓存文件能够重复利用,还能够减小带宽,下降网络负荷
• 对于一个数据请求来讲,能够分为网络请求,后端处理 浏览器形影三个步骤.浏览器缓存能够帮助咱们在第一和第三步骤中优化性能,好比说直接使用缓存而不发请求,或者是发起了请求,可是后端存储的数据与前端一致,那么就没有必要再将数据回传回来,这样就减小了响应数据

http缓存

http缓存分为强制缓存和协商缓存
复制代码

强制缓存

强制缓存(本身强制决定)就是向浏览器缓存查找该请求结果,而且根据该结果的缓存规则决定是否使用该缓存结果,强制缓存的状况主要有三种:

• 1)不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）

• 2)协议中有这种缓存结果和缓存标识,可是结果已经失效,强制缓存失效,则使用协商缓存

  

• 3)协议中存在缓存结果和缓存标识,且该结果还没有生效,强制缓存生效,直接返回该结果

  

强制缓存规则

浏览器在向服务器发送http请求的时候,服务器会将缓存规则返给http响应报文的http头和请求结果一块儿返回给浏览器,其中控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。

• expires
  • Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，若是客户端的时间小于Expires的值时，直接使用缓存结果。
  • 到了HTTP/1.1，Expire已经被Cache-Control替代，缘由在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间作对比，那么若是客户端与服务端的时间由于某些缘由（例如时区不一样；客户端和服务端有一方的时间不许确）发生偏差，那么强制缓存则会直接失效，这样的话强制缓存的存在则毫无心义
• Cache-Control

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

public：全部内容都将被缓存（客户端和代理服务器均可缓存）

private：全部内容只有客户端能够缓存，Cache-Control的默认取值

no-cache：客户端缓存内容，可是是否使用缓存则须要通过协商缓存来验证决定

no-store：全部内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

复制代码

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有如下两种状况： 1)协商缓存生效，返回304，

2)协商缓存失效，返回200和请求结果结果

一样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一块儿返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。
复制代码

综述

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么表明该请求的缓存失效，从新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存，主要过程以下：

浏览器缓存

本地存储小容量

cookie

1)http是一种无状态的协议,因此每次客户端请求服务器的时候都是'初次见面',因此每次接收用户请求时,都是没法肯定用户的身份,
2)为了解决这个无状态问题,会在登陆成功时,服务端再响应头中存储着cookie信息服务端给用户下发cookie的数据(假设是一张小票),
3)等之后用户再请求服务端时，带着小票一块儿发送过去(自动)，服务端检测小票的信息便可判断这个用户使用访问过
复制代码

cookie的数据是存储在客户端的,存储容量只有4k

• cookie能完成的部分应用，还有更多的功能须要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括如下几种：

  • （1）cookie可能被禁用。当用户很是注重我的隐私保护时，他极可能禁用浏览器的cookie功能；
  • （2）cookie是与浏览器相关的。这意味着即便访问的是同一个页面，不一样浏览器之间所保存的cookie也是不能互相访问的；
  • （3）cookie可能被删除。由于每一个cookie都是硬盘上的一个文件，所以颇有可能被用户删除；
  • （4）cookie安全性不够高。全部的cookie都是以纯文本的形式记录于文件中，所以若是要保存用户名密码等信息时，最好事先通过加密处理。 session

• session实现方式：

  • 由于cookie是保存在客户端的，用户能够随意修改或伪造
  • 服务端再也不将数据直接下发到客户端保存了，而是将数据保存在服务端
  • 下发的是保存数据区域的标识(手牌)
  • 用户下次请求时带着标识到服务端，开箱子读取数据进行操做便可

• 好处：确保数据没法被用户操做，安全

localStorage

LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。存储容量为5M

• 生命周期：声明周期永久生效，除非手动删除 不然关闭页面也会存在
• 数据共享：同一个浏览器中打开两个页面是同源的，就能够共享localStorage数据
  • 若是两个页面的协议，端口（若是有指定）和主机都相同，则两个页面具备相同的源
• 语法：
  • 存储数据：localStorage.setItem(key, value)
  • 获取数据：localStorage.getItem(key)
  • 删除数据：localStorage.removeItem(key)
  • 清空数据：(全部都清除掉)localStorage.clear()

sessionStorage

• 生命周期： 为关闭浏览器窗口
• 数据共享：在同一个窗口(页面)下数据能够共享
• 语法：
  • 存储数据：sessionStorage.setItem(key, value)
  • 获取数据：sessionStorage.getItem(key)
  • 删除数据：sessionStorage.removeItem(key)
  • 清空数据：(全部都清除掉) sessionStorage.clear()

applicationCache

HTML5的应用缓存（application cache），或者简称为 appcache，是专门为开发离线 Web 应用而设计 的。Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可使用一个 描述文件（manifest file），列出要下载和缓存的资源

本地存储大容量

webSql(被废弃)

websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现，主要有如下特色 Web Sql 数据库API 实际上不是HTML5规范的组成部分； 在HTML5以前就已经存在了，是单独的规范； 它是将数据以数据库的形式存储在客户端，根据需求去读取；

• 跟Storage的区别是：

  • Storage和Cookie都是以键值对的形式存在的；
  • Web Sql 更方便于检索，容许sql语句查询；
  • 让浏览器实现小型数据库存储功能；
  • 这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持；

• websql API主要包含三个核心方法：

  • openDatabase : 这个方法使用现有数据库或建立新数据库建立数据库对象。
  • transaction : 这个方法容许咱们根据状况控制事务提交或回滚。
  • executeSql : 这个方法用于执行真实的SQL查询。

indexDB(非关系型数据库)

IndexedDB 是一个为了可以在客户端存储可观数量的结构化数据，而且在这些数据上使用索引进行高性能检索的 API。虽然 DOM 存储 对于存储少许数据是很是有用的，可是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。 IndexedDB 分别为同步和异步访问提供了单独的 API 。同步 API 原本是要用于仅供 Web Workers 内部使用，可是尚未被任何浏览器所实现。异步 API 在 Web Workers 内部和外部均可以使用，另外浏览器可能对indexDB有50M大小的限制，通常用户保存大量用户数据并要求数据之间有搜索须要的场景。 异步API

往返缓存

往返缓存又称为BFCache，是浏览器在前进后退按钮上为了提高历史页面的渲染速度的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到bfcache中；当用户点击后退按钮的时候，将页面直接从bfcache中加载，节省了网络请求的时间。