Java , 前端全网资源链接 : 【长沙校区】集合Java,前端所有基础入门,重点问题一览帖




缓存机制概述
浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等); 当然也有通过一些html标签控制的(这里不做讨论,主要讨论http的请求和响应头控制的缓存)

http协议的基本模型

理解浏览器缓存机制之前,先要理解http协议的基本理论知识才能更好的理解问题,http作为网络上数据传输的基本协议,他的协议底层是基于tcp安全协议的,也就是在客户端(浏览器)与服务器通讯之前,先必须要建立连接,建立完连接之后才能进行请求发送与数据响应,并且http的一个请求对应者一次响应,总结一句话就是http协议是基于请求响应模型的,基本模型如下图:

可以看到,当浏览器发送请求到服务器去的时候,一定会有请求头,而请求到达服务器之后也服务器也一定会做出响应,响应的数据包中也一定会包含响应,浏览器缓存机制就是依赖请求和响应头来完成的

http缓存流程图
如果用户第一次从浏览器中发送请求去请求服务器中某一个静态资源(例如图片),这个时候浏览器中肯定不会有缓存,基本的请求响应流程如下图
               
用户从浏览器中发送请求去请求服务器中某一个静态资源(例如图片),假设这个时候浏览器中存在这个静态资源的缓存,基本的请求响应流程如下图                    
  

http缓存头信息介绍

1.   Expires策略：Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大（比如时钟不同步，或者跨时区），那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control:max-age=秒替代。

2.   Cache-control策略：Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。 Cache-Control可取的属性的指令含义如下：

    1.  Public指示响应可被任何缓存区缓存。

    2.  Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。

    3.  no-cache指示请求或响应消息不能缓存，该选项并不是说可以设置”不缓存“，容易望文生义~

    4.  no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存，完全不存下來。

    5.  max-age北京市昌平区建材城西路金燕龙办公楼一层电话：400-618-9090指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。

    6.  min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

    7.  max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

3.  Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用

    1.  Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。

    2.   If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。

4.  Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用

     1.  Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。Apache中，ETag的值，默认是对文件的索引节（INode），大（Size）和最后修改时间（MTime）进行Hash后得到的。

     2.   If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。

使用缓存原因
1，减少网络带宽消耗:当web缓存副本被使用时,只会产生极小的网络流量,可以有效降低运营成本
2，降低服务器压力:给网络资源设定有效期之后,用户可以重复使用本地缓存,减少对源服务器的请求,简介降低了对服务器的压力,同时搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率,也能有效降低服务器压力。
3，减少网络延迟:缓存的使用可以明显加快页面打开速度,达到更好的用户体验。

总结
简单来说,浏览器缓存就是把一个已经请求过的 web 资源拷贝一份存储在浏览器中,当下次请求相同的资源时,浏览器会根据缓存机制决定直接使用副本响应访问请求还是再次向服务器发送请求，他的实现主要依赖于http协议的基本请求响应模型,要使用http协议中的一些请求响应头去进行浏览器和服务器间的缓存通讯。
               

Java , 前端全网资源链接 : 【长沙校区】集合Java,前端所有基础入门,重点问题一览帖




缓存机制概述
浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等); 当然也有通过一些html标签控制的(这里不做讨论,主要讨论http的请求和响应头控制的缓存)

http协议的基本模型

理解浏览器缓存机制之前,先要理解http协议的基本理论知识才能更好的理解问题,http作为网络上数据传输的基本协议,他的协议底层是基于tcp安全协议的,也就是在客户端(浏览器)与服务器通讯之前,先必须要建立连接,建立完连接之后才能进行请求发送与数据响应,并且http的一个请求对应者一次响应,总结一句话就是http协议是基于请求响应模型的,基本模型如下图:

可以看到,当浏览器发送请求到服务器去的时候,一定会有请求头,而请求到达服务器之后也服务器也一定会做出响应,响应的数据包中也一定会包含响应,浏览器缓存机制就是依赖请求和响应头来完成的

http缓存流程图
如果用户第一次从浏览器中发送请求去请求服务器中某一个静态资源(例如图片),这个时候浏览器中肯定不会有缓存,基本的请求响应流程如下图
               
用户从浏览器中发送请求去请求服务器中某一个静态资源(例如图片),假设这个时候浏览器中存在这个静态资源的缓存,基本的请求响应流程如下图                    
  

http缓存头信息介绍

1.   Expires策略：Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大（比如时钟不同步，或者跨时区），那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control:max-age=秒替代。

2.   Cache-control策略：Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。 Cache-Control可取的属性的指令含义如下：

    1.  Public指示响应可被任何缓存区缓存。

    2.  Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。

    3.  no-cache指示请求或响应消息不能缓存，该选项并不是说可以设置”不缓存“，容易望文生义~

    4.  no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存，完全不存下來。

    5.  max-age北京市昌平区建材城西路金燕龙办公楼一层电话：400-618-9090指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。

    6.  min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

    7.  max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

3.  Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用

    1.  Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。

    2.   If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。

4.  Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用

     1.  Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。Apache中，ETag的值，默认是对文件的索引节（INode），大（Size）和最后修改时间（MTime）进行Hash后得到的。

     2.   If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。

使用缓存原因
1，减少网络带宽消耗:当web缓存副本被使用时,只会产生极小的网络流量,可以有效降低运营成本
2，降低服务器压力:给网络资源设定有效期之后,用户可以重复使用本地缓存,减少对源服务器的请求,简介降低了对服务器的压力,同时搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率,也能有效降低服务器压力。
3，减少网络延迟:缓存的使用可以明显加快页面打开速度,达到更好的用户体验。

总结
简单来说,浏览器缓存就是把一个已经请求过的 web 资源拷贝一份存储在浏览器中,当下次请求相同的资源时,浏览器会根据缓存机制决定直接使用副本响应访问请求还是再次向服务器发送请求，他的实现主要依赖于http协议的基本请求响应模型,要使用http协议中的一些请求响应头去进行浏览器和服务器间的缓存通讯。