浏览器缓存原理以及本地存储

做为一名前端工做人员，前端的缓存知识是必须掌握的，由于一个网站打开网页的速度直接关系到用户体验，用户粘度，而提升网页的打开速度有不少方面须要优化，其中比较重要的一点就是利用好缓存，缓存文件能够重复利用，还能够减小带宽，下降网络负荷。

1 缓存

缓存从宏观上分为私有缓存和共享缓存，共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的，各级代理不能缓存的缓存。

缓存从微观上能够分为如下几类：

• 浏览器缓存
• 代理服务器缓存
• CDN缓存
• 数据库缓存
• 应用层缓存

这里主要对浏览器的缓存进行说明：

2 http缓存

2.1 强缓存

• 不会向服务器发送请求，直接从缓存中读取资源
• 请求返回200的状态码
• 在chrome控制台的network选项中能够看到size显示from disk cache或from memory cache。

from memory cache表明使用内存中的缓存，from disk cache则表明使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，因此每次渲染页面都须要从硬盘读取缓存(from disk cache)。

Expires和Cache-Control二者对比：其实这二者差异不大，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，二者同时存在的话，Cache-Control优先级高于Expires

2.2 协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

• 协商缓存生效，返回304和Not Modified

2.2.1 Last-Modified和If-Modified-Since

浏览器在第一次访问资源时，服务器返回资源的同时，在response header中添加 Last-Modified的header，值是这个资源在服务器上的最后修改时间，浏览器接收后缓存文件和header；

浏览器下一次请求这个资源，浏览器检测到有 Last-Modified这个header，因而添加If-Modified-Since这个header，值就是Last-Modified中的值；服务器再次收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，若是没有变化，返回304和空的响应体，直接从缓存读取，若是If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，因而返回新的资源文件和200

缺点：一、某些服务端不能获取精确的修改时间 二、文件修改时间改了，但文件内容却没有变

2.2.2 ETag和If-None-Match

Etag是上一次加载资源时，服务器返回的response header，是对该资源的一种惟一标识，只要资源有变化，Etag就会从新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器只须要比较客户端传来的If-None-Match跟本身服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。若是服务器发现ETag匹配不上，那么直接以常规GET 200回包形式将新的资源（固然也包括了新的ETag）发给客户端；若是ETag是一致的，则直接返回304知会客户端直接使用本地缓存便可。

2.2.3 协商缓存两种方式的对比

1. 首先在精确度上，Etag要优于Last-Modified，Last-Modified的时间单位是秒，若是某个文件在1秒内改变了屡次，那么他们的Last-Modified其实并无体现出来修改，可是Etag每次都会改变确保了精度；若是是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。
2. 性能上，Etag要逊于Last-Modified，毕竟Last-Modified只须要记录时间，而Etag须要服务器经过算法来计算出一个hash值。
3. 优先级上，服务器校验优先考虑Etag

3 缓存机制

appcache优先于强缓存，强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么表明该请求的缓存失效，返回200，从新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。具体流程看下图：

不论是浏览器缓存，仍是代理服务器缓存，CDN缓存都遵循客户端与服务端之间的缓存机制

四、本地存储

本地存储主要有如下几种，localStorage，sessionStorage和cookie，WebSql和IndexDB主要用在前端有大容量存储需求的页面上，例如，在线编辑浏览器或者网页邮箱。他们均可以将数据存储在浏览器，应该根据不一样的场景进行使用。

4.1 Cookie

Cookie主要是由服务器生成，且前端也能够设置，保存在客户端本地的一个文件，经过response响应头的set-Cookie字段进行设置，且Cookie的内容自动在请求的时候被传递给服务器。以下：

[HTTP/1.1 200 OK]
Server:[bfe/1.0.8.18]
Etag:["58860415-98b"]
Cache-Control:[private, no-cache, no-store, proxy-revalidate, no-transform]
Connection:[Keep-Alive]
Set-Cookie:[BDORZ=27315; max-age=86400; domain=.baidu.com; path=/]
Pragma:[no-cache]
Last-Modified:[Mon, 23 Jan 2017 13:24:37 GMT]
Content-Length:[2443]
Date:[Mon, 09 Apr 2018 09:59:06 GMT]
Content-Type:[text/html]

Cookie包含的信息：
它能够记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站经过读取Cookies，得知你的相关信息，就能够作出相应的动做，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登陆等等。一个网站只能读取它本身放置的信息，不能读取其余网站的Cookie文件。所以，Cookie文件还保存了host属性，即网站的域名或ip。
这些属性以名值对的方式进行保存，为了安全，它的内容大多进行了加密处理。Cookie文件的命名格式是：用户名@网站地址[数字].txt

Cookie的优势：

• 给用户更人性化的使用体验，如记住“密码功能”、老用户登陆欢迎语
• 弥补了HTTP无链接特性
• 站点统计访问人数的一个依据

Cookie的缺点：

• 它没法解决多人共用一台电脑的问题，带来了不安全因素
• Cookie文件容易被误删除
• 一人使用多台电脑
• Cookies欺骗。修改host文件，能够非法访问目标站点的Cookie
• 容量有限制，不能超过4kb
• 在请求头上带着数据安全性差

4.2 localStorage

localStorage主要是前端开发人员，在前端设置，一旦数据保存在本地后，就能够避免再向服务器请求数据，所以减小没必要要的数据请求，减小数据在浏览器和服务器间没必要要地来回传递。

能够长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据均可以使用。
localStorage中通常浏览器支持的是5M大小，这个在不一样的浏览器中localStorage会有所不一样

优势：

• localStorage拓展了cookie的4k限制
• localStorage能够将第一次请求的5M大小数据直接存储到本地，相比于cookie能够节约带宽
• localStorage的使用也是遵循同源策略的，因此不一样的网站直接是不能共用相同的localStorage

缺点：

• 须要手动删除，不然长期存在
• 浏览器大小不一，版本的支持也不同
• localStorage只支持string类型的存储，JSON对象须要转换
• localStorage本质上是对字符串的读取，若是存储内容多的话会消耗内存空间，会致使页面变卡

4.3 sessionStorage

sessionStorage主要是前端开发人员，在前端设置，sessionStorage（会话存储），只有在浏览器被关闭以前使用，建立另外一个页面时赞成可使用，关闭浏览器以后数据就会消失

存储上限限制：不一样的浏览器存储的上限也不同，但大多数浏览器把上限限制在5MB如下

4.4 websql

Web SQL 是在浏览器上模拟数据库，可使用JS来操做SQL完成对数据的读写。它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite。数据库仍是在服务端，不建议使用，已废弃

4.5 indexDB

随着浏览器的功能不断加强，愈来愈多的网站开始考虑，将大量数据储存在客户端，这样能够减小从服务器获取数据，直接从本地获取数据。

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不一样），并且不提供搜索功能，不能创建自定义的索引。因此，须要一种新的解决方案，这就是 IndexedDB 诞生的背景。

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它能够被网页脚本建立和操做。IndexedDB 容许储存大量数据，提供查找接口，还能创建索引。这些都是 LocalStorage 所不具有的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

关于indexDB的知识能够查看这篇文章http://www.ruanyifeng.com/blo...

这里，我只是根据本身的理解整理了一下关于缓存，存储方面的知识，还有不少不足的地方，更多实践的知识，还请查看其余文章，若有错误，请指出

参考文章：
https://www.jianshu.com/p/54c...
https://segmentfault.com/a/11...
http://www.cnblogs.com/etoah/...
https://blog.csdn.net/zhouche...