在前端项目体验中最直观的就是网页的浏览速度，所以项目开发中在速度方面的优化最主要的就是缓存了，前端的缓存知识比较杂，我在学习中慢慢总结了这么多，今天来分享下。
什么是缓存？
缓存就相当于是对资源的一种副本实现，不管是在客户端还是在服务端存储着，用相同的URL进行请求，直接从副本中请求资源而不再访问源服务器。
为什么要使用缓存？
- 提高访问速度：缓存相对服务端离用户更近，所以在请求过程中从缓存中取内容比在源服务器上取的内容用的时间更少，加快了用户体验。
- 降低网络传输：副本被重复使用，大大降低了用户的带宽使用，其实也是一种变相的省钱（如果流量要付费的话），同时保证了带宽请求在一个低水平上，更容易维护了。
缓存的种类
缓存种类很多，像是浏览器缓存，cdn缓存等都是我们比较熟悉的，当然还有代理服务器缓存，网关缓存等，这里我主要介绍一下前两种。
浏览器缓存
一个页面的缓存状态可以通过这两种方法去设置，meta标签和http header。
meta标签常见以下几种用法
<meta http-equiv="pragma" content="no-cache">
pragma与no-cache用于定义页面缓存
<meta http-equiv="cache-control" content="no-cache">
常见的取值有private、no-cache、max-age、must-revalidate等，默认为private
<meta http-equiv="Expires" content="0">
指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问
设置header
一般是设置这几个header：
- cache-control
- expires
- last-modified
- etags
处理流程一般如下：
cache-control：
- public：表明其他用户也可以利用缓存。
- private：表明缓存服务器只对特定用户提供资源缓存的服务，对于其他的用户，缓存服务器不会做出响应。
- no-cache：表明不缓存过期资源，其实是为了防止拿到过期的资源。
- no-store：暗示请求或响应中包含机密信息，是真正的禁用缓存。
- max-age：max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒。
expires：
Expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发请求），Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大，那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。
如果max-age和Expires同时存在，Cache-Control的max-age优先。
last-modified：
表明资源最后更新的时间，响应格式一般为：
last-modified:Mon, 21 Nov 2016 03:25:47 GMT
当第一次请求资源时，源服务器响应后返回last-modified值和响应内容，客户端会将响应内容和last-modified一起缓存在本地，第二次请求时会将请求体连同if-modified-since（等于last-modified的值）一起发送给服务端，服务端会根据if-modified-since判定资源是否改变，如果没有改变会响应304返回一个空的响应体，如果资源改变返回新的内容。
etags：
根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生，资源改变这个值就会改变个人感觉类似于资源的一种抽象映射。请求过程类似于last-modified，不过它作为if-none-match（服务端响应的etags）发送给服务端判断这个值是否与服务端的etags一致看资源是否改变。
为什么有了last-modified还要有etags
某些服务器不能精确得到资源的最后修改时间，这样就无法通过最后修改时间判断资源是否更新 如果资源修改非常频繁，在秒以下的时间内进行修改，而Last-modified只能精确到秒 一些资源的最后修改时间改变了，但是内容没改变，使用ETag就认为资源还是没有修改的
last-modified和etags的处理流程如下：
如果if-modified-since和if-none-match同时存在，if-none-match优先。
cdn缓存
cdn（Content Delivery Network），即就是内容分发网络，就相当于是在客户端和服务端之间加一个cdn层，用户在浏览网站的时候，cdn会选择一个离用户最近的cdn边缘节点来响应用户的请求，这不但加快了用户体验速度也减轻了源服务器的负载。
工作原理：用户通过输入域名来访问页面，首先进行dns处理，dns解析服务器会将用户访问请求定位到离用户最近、负载最轻的cdn缓存服务器上，返回该cdn节点的ip地址，缓存服务器拿到数据后，一方面将数据返回浏览器，另一方面进行本地保存，之后再次访问，数据将从cdn缓存服务器中被返回。
h5中的离线存储
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
设置：
<html lang="en" manifest="demo.manifest">
...
</html>
demo.manifest是一个文件，后缀名为manifest，包含浏览器需要缓存的内容。manifest属性可以指定一个绝对URL或是一个相对路径，但是，一个绝对URL需要和web app是同源的。一个manifest文件可以是任何扩展文件类型，但必须有正确的mime-type，比如在Apache中添加
AddType text/cache-manifest .appcache
离线存储的原理就是请求的资源会像cookie一样被存储了下来，之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
本地存储
localstorage和sessionstorage，它们的作用及区别相信大家都很熟悉了，这里我再总结一下吧。
二者都是针对数据进行本地存储的，区别是：
- localstorage是永久存储，而sessionstorage当窗口关闭的时候失效。
- localstorage对于同源窗口来说是可以共享的，但是sessionstorage在不同的窗口不共享。
感觉常见的区别就这两个吧，它们的操作也很简单，web storage拥有像getItem，setItem，clear等方法，不像cookie存储还得自己去封装一个，比较方便。
|
