缓存相关
在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。那么下面我们就来看看服务器端缓存的原理。
缓存分类
web缓存分类很多，如数据库缓存、代理服务器缓存、CDN缓存和浏览器缓存。
浏览器通过代理服务器向服务器发起请求的原理如下：
浏览器先向代理服务器发起web请求，再将请求转发到源服务器。它属于共享缓存，所以很多地方都可以用缓存资源，因此对于节省流量有很大作用。
浏览器缓存将文件保存在客户端，在同一个会话过程中会检查缓存的副本是否足够新，在后退网页时，访问过的资源可以从浏览器缓存中拿出使用。通过减少服务器处理请求数量，用户将获得更快体验。
下面重点说一下浏览器缓存。
浏览器缓存
页面的缓存状态由HTTP的header头来决定的，header参数有四种：
Cache-Control 重要策略
max-age
s-maxage
public
private
no-cache
no-store
must-revalidate等等
max-age单位为s秒，指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，max-age这段时间里，浏览器就不会再向服务器发送请求了。
s-maxage，同max-age，只用于共享缓存，如cdn
public指定响应会被缓存，并且在多用户间共享。若没指定public和private默认为public
private响应只作为私有缓存，不能在用户间共享。如果要求http认证，响应会自动设置为private
no-cache指定不缓存响应，表明资源不进行缓存。但是设置了no-cache后并不代表浏览器不缓存，而是在缓存前要向服务器确定资源是否被更改。因此有时只设置no-cache防止缓存是不够的，还可以加上private，将过期时间设为过去。
no-store绝对禁止缓存，每次请求都从服务器重新获取。
must-revalidate 指定页面是过去的，则去服务器获取。用的不多
Expires
缓存过期时间，用来指定资源到期时间，是服务端的具体时间点。Expires = max-age + 请求时间，需要和Last-modified结合使用。cache-control优先级更好，Expires是web服务器响应消息头字段，在响应http请求时告诉浏览器在过期前浏览器可以从浏览器缓存读取数据，而无须再次请求。
Last-modified
服务器文件的最后修改时间，需要和cache-control共同使用，是检查服务端资源是否更新的方式之一。当浏览器再次请求时，会向服务器传送If-Modified-Since报头，询问Last-modified时间点之后资源是否被修改过。如果没有修改，则返回304，使用缓存；如修改过，则再次向服务器请求资源，返回码和首次请求相同为200，资源为服务器最新资源。
Etag
根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生。浏览器会将这串字符串传回服务器，验证资源是否已被修改，若没修改，过程如下：
使用Etag可以解决Last-modified存在的一些问题：
a. 某些服务器不能精确得到资源的最后修改时间，这样就无法通过最后修改时间来判断资源是否更新 b. 如果资源修改频繁，在秒以下的时间进行修改，而Last-modified只能精确到秒 c. 一些资源的最后修改时间改了，但内容没改。使用Etag可以判断出资源没修改
使用缓存流程
从浏览器请求到展示资源的过程（非常重要）：
Etag/If-None-Match 需配合Cache-Control使用 Etag 告诉浏览器当前资源在服务器的唯一标识。web服务器收到请求后发现有头If-None-Match则与被请求资源相校验比对，决定返回200还是304 If-None-Match 当资源过期时，发现资源具有Etag声明，则再次向服务器请求带上头If-None-Match，同上。 Last-Modified/If-Modified-Since 配合Cache-Control使用 Last-Modified 标识这个响应资源的最后修改时间，web服务器在响应请求时，告诉浏览器资源的最后修改时间 If-Modified-Since 当资源过期，发现具有此声明，则再次向服务器发起请求带该头信息。
cache-control指令使用
另外的缓存方式：LocalStorage和sessionStorage
LocalStorage是一种本地存储的公共资源；LocalStorage是以页面域名划分的，在PC端速度不如304但在移动端使用localStorage要快于304.
而SessionStorage的数据只存储到特定会话中，不属于持久化存储，所以关闭浏览器会清除数据。和LocalStorage具有相同方法。