http缓存

前端缓存

前端缓存主要分为http缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置;而浏览器缓存则主要由前端开发在前端js上进行设置。

什么是http缓存？

http缓存是客户端向浏览器发送请求时，先抵达浏览器缓存，如果浏览器缓存中有要请求的资源，直接从浏览器缓存中提取，否则就从服务器端提取。
常见的http缓存只能缓存get请求的响应资源。
http缓存都是从第二次请求开始，在浏览器第一次请求某个资源时，服务器返回资源并且传入该资源的缓存参数。当浏览器再次请求该资源时，浏览器判断这些请求参数，如果命中强缓存，http返回码200直接从浏览器缓存中加载资源，否则就将请求参数加到request header中，服务器根据request header判断是否命中协商缓存，如果命中http返回码304 并且浏览器继续从缓存中加载资源，否则服务器返回新资源。
从地址栏输入url到显示页面，浏览器经理那些过程？

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。另一种说法：发送到DNS域名解析系统，获取对应的web服务器对应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

为什么要使用HTTP缓存 ？

根据上面的学习可发现使用缓存的好处主要有以下几点：

1. 减少了冗余的数据传输，节省了网费。
2. 缓解了服务器的压力， 大大提高了网站的性能
3. 加快了客户端加载网页的速度

强缓存

如果命中强缓存，http返回状态码200，浏览器直接从缓存中加载资源。不会发送请求给服务器。这种方式加载页面的速度是最快的，性能也是很好的，也能减少服务器的压力。但是这样存在缺陷：在过期时间之前，如果资源被更新了，页面上是拿不到的，因为他不会向服务器发送请求。
比如修改了页面上某个样式，页面刷新了仍然没有生效。因为走的是强缓存，所以Ctrl + F5一顿操作之后就好了。

强缓存通过设置http的response headers中的Expires和cache-control两个字段进行控制。表明资源缓存时间。
Pragma和Cache-control共存时，Pragma的优先级是比Cache-Control高的。Expires和Cache-control同时存在时，cache-control优先级比较高。
如果没有命中强缓存，浏览器就发送请求到服务器，判断是否命中协商缓存。
Expires
Expires表示资源的过期时间，是服务端一个具体的时间点。GMT时间值。绝对时间。Expires在响应http请求时告诉浏览器在过期时间之前浏览器可以直接从浏览器缓存中提取数据，不需要发送请求。

这种方式有一个明显的缺点：因为过期时间是一个绝对时间。如果客户端与服务端时间存在偏差就会导致问题，于是就有了cache-control。
cache-control
cache-control由多个字段组合而成，主要有：
max-age：表示缓存时间，是相对时间，单位是s。例如设置 Cache-Control:max-age=30。意思是该资源将在30s后过期。
public：该资源可以被任何对象缓存。
private：该资源只能被单个用户缓存，非共享。
no-cache：不直接使用缓存，根据缓存的新鲜程度。
no-store：禁止缓存，每次都要发送请求到服务器获取资源。
s-maxage ：同 max-age，覆盖 max-age、Expires，但仅适用于共享缓存，在私有缓存中被忽略。

注意：
在chrome浏览器中返回的200状态会有两种情况：
1、from memory cache
(从内存中获取/一般缓存更新频率较高的js、图片、字体等资源)

2、from disk cache
(从磁盘中获取/一般缓存更新频率较低的js、css等资源)

这两种情况是chrome自身的一种缓存策略，这也是为什么chrome浏览器响应的快的原因。其他浏览返回的是已缓存状态，没有标识是从哪获取的缓存。
3、在Firefox浏览器下，使用Cache-Control: no-cache 是不生效的，其识别的是no-store。这样能达到其他浏览器使用Cache-Control: no-cache的效果。所以为了兼容Firefox浏览器，经常会写成Cache-Control: no-cache，no-store。
4、Date/Age：
响应报文中的 Date 和 Age 字段：区分其收到的资源是否命中了代理服务器的缓存。
Date 理所当然是原服务器发送该资源响应报文的时间（GMT格式），如果你发现 Date 的时间与“当前时间”差别较大，或者连续F5刷新发现 Date 的值都没变化，则说明你当前请求是命中了代理服务器的缓存。
Age 也是响应报文中的首部字段，它表示该文件在代理服务器中存在的时间（秒），如文件被修改或替换，Age会重新由0开始累计。

协商缓存

如果没有命中强缓存，则浏览器会将请求发送至服务器。服务器根据http头信息中的Last-Modify/If-Modify-Since或Etag/If-None-Match来判断是否命中协商缓存。如果命中，则http返回码为304，浏览器从缓存中加载资源。
Last-Modified/If-Modify-Since

浏览器第一次请求一个资源时，服务器返回资源并在http response header 中加入Last-Modified。Last-Modified表示资源的最后修改时间，是GMT格式。

当浏览器再次请求该资源时，发送的请求头request header中加入If-Modify-since。值为缓存前返回的Last-Modify。服务器根据If-Modify-since判断是否命中协商缓存。

如果命中协商缓存，http返回状态码304，服务器不会返回资源，浏览器从缓存中提取资源。由于对比的是服务端时间。所以客户端与服务端时间存在偏差不会导致问题。但是通过最后修改时间判断资源是否修改还不太准确。原因如下：

1. Last Modified只能精确到秒级，如果一个文件在一秒内被修改了多次，Last Modified不能准确地表示资源的最后修改时间。
2. 如果一个文件被定期生成，但是内容并没有修改，Last Modified也会改变，导致缓存无法使用。
3. 某些服务器不能准确地获取资源的最后修改时间。
   所以有了Etag/If-None-Match。
   Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
   Etag/If-None-Match
   Etag是一个校验码，Etag可以保证每个资源都是唯一的。资源发生改变Etag也会改变。。ETag值的变更则说明资源状态已经被修改。服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。
   

用户的哪些行为会影响浏览器缓存

浏览器缓存
下面说说最常用到的浏览器缓存有：cookie、sessionStorage、localStorage这三者的主要特征如下：

总结：
浏览器第一次请求时

浏览器再次请求时

如何设置http缓存

前端设置html页面缓存方法：静态的html页面想要设置使用缓存需要通过HTTP的META设置expires和cache-control

 <meta http-equiv="Cache-Control" content="max-age=7200" />
 <meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />

定义和用法
http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。

http-equiv 属性可用于模拟一个 HTTP 响应头。
参考：https://www.jianshu.com/p/227cee9c8d15
https://www.cnblogs.com/ranyonsue/p/8918908.html