浏览器缓存机制
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器缓存机制相关的知识，希望对你有一定的参考价值。
参考技术A有dns的地方,就有缓存。浏览器、操作系统、Local DNS、根域名服务器，它们都会对DNS结果做一定程度的缓存。
DNS查询过程如下:
首先搜索浏览器自身的DNS缓存,如果存在，则域名解析到此完成。
如果浏览器自身的缓存里面没有找到对应的条目，那么会尝试读取操作系统的hosts文件看是否存在对应的映射关系,如果存在，则域名解析到此完成。
如果本地hosts文件不存在映射关系，则查找本地DNS服务器(ISP服务器,或者自己手动设置的DNS服务器),如果存在,域名到此解析完成。
如果本地DNS服务器还没找到的话,它就会向根服务器发出请求,进行递归查询。
浏览器本地缓存失效后，浏览器会向CDN边缘节点发起请求。类似浏览器缓存,CDN边缘节点也存在着一套缓存机制。CDN边缘节点缓存策略因服务商不同而不同，但一般都会遵循http标准协议，通过http响应头中的
Cache-control: max-age 的字段来设置CDN边缘节点数据缓存时间。
当浏览器向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点就会向服务器发出回源请求，从服务器拉取最新数据，更新本地缓存，并将最新数据返回给客户端。 CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间，为用户提供更精细化的缓存管理。
CDN 优势
CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低。
大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源服务器的负载。
http请求报文（request）
请求行
请求方法 空格 URL 空格 协议版本 回车符 换行符
请求头（通用信息头、请求头、实体头）
头部字段名 冒号 值 回车键 换行符
...
头部字段名 冒号 值 回车键 换行符
空行
回车符 换行符
实体主体（只有post请求有）
主体
http响应报文（response）
状态行
协议版本 空格 状态码 空格 状态码描述 回车符 换行符
响应头部
头部字段名 冒号 值 回车符 换行符
...
头部字段名 冒号 值 回车符 换行符
空行
回车符 换行符
响应正文
正文
浏览器初次向服务器发起请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存返回的结果，是则将请求结果和缓存标识存入浏览器缓存中
浏览器每次发起请求，都会现在浏览器缓存中查找该请求的结果以及缓存标识
浏览器 浏览器缓存 服务器
——————第一次发起http请求——————>
<——没有该请求的缓存结果和缓存标识————
——————————————发起http请求——————————————>
<——————————返回该请求结果和缓存规则————————————
——将请求结果和缓存标识存入浏览器缓存——>
强制缓存就是向浏览器缓存查找结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程
强制缓存的情况分为三种：
1、不存在该缓存结果和缓存标识，强制缓存失效，直接向服务器发起请求
2、存在该缓存结果和缓存标识，但结果已经失效，强制缓存失效，使用协商缓存
3、存在该缓存结果和缓存标识，且该结果没有失效，强制缓存生效，直接返回该结果
控制强制缓存的字段：Expires，Cache-Control
Expires 是 HTTP/1.0 控制缓存的字段，值为服务器返回该请求的结果缓存时间
即再次发送请求是，客户端时间 小于 Expires的值，直接使用缓存结果
Cache-Control 是HTTP/1.1的规则，主要用于控制网页缓存，主要取值为：
public：所有的内容都缓存（客户端和代理服务器都可以缓存）
private：所有内容只有客户端可以缓存（默认值）
no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
no-store：即不使用强制缓存，也不使用协商缓存
max-age=xxx：缓存内容将在xxx秒后失效
Expires 是一个绝对值
Cache-Control 中 max-age 是相对值，解决了 Expires时期 服务端与客户端 可能出现时间差的问题
注：Expires和Cache-Control同时存在时，只有Cache-Control生效
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
协商缓存的两种情况：
1、协商缓存生效，返回304，继续使用缓存
过程：
浏览器 浏览器缓存 服务器
————————发起http请求————————>
<——该请求的缓存结果失效，只返回缓存标识——
————————携带该资源的缓存标识，发起http请求————————>
<—————————————304，该资源无更新————————————
——————获取该请求的缓存结果——————>
<——————返回该请求的缓存结果——————
2、协商缓存失败，返回200和请求结果
过程：
浏览器 浏览器缓存 服务器
————————发起http请求————————>
<——该请求的缓存结果失效，只返回缓存标识——
————————携带该资源的缓存标识，发起http请求————————>
<————————200，资源已更新，重新返回请求和结果———————
——将该请求结果和缓存标识存入浏览器缓存中—>
协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的
控制协商缓存的字段：
(1) Last-Modified/If-Modified-Since：Last-Modified是服务器响应请求是，返回该资源文件在服务器最后被修改的时间；If-Modified-Since再次发起请求时，携带上次返回的Last-Modified的值，服务器将该字段值与该资源最后修改时间对比，决定是否用缓存
(2)Etag/If-None-Match：Etag服务器响应请求时，返回当前资源文件的一个唯一标识，由服务器生成之；If-None-Match是再次发起请求时，携带上次返回的唯一标识Etag的值，服务器收到后，将该字段值与该资源在服务器上的Etag对比，一致 则返回304，否则返回200
注：Etag/If-None-Match优先级高于Last-Modified/If-Modified-Since，同时存在时只有Etag/If-None-Match生效
浏览器缓存分为：内存缓存 和 硬盘缓存
内存缓存特性：
(1)快速读取：内存缓存会将编译解析后的文件，存入该进程的内存中，便于下次运行时快速读取
(2)时效性：一旦关闭进程，进程内存清空
硬盘缓存特性：
永久性：直接写入硬盘文件中
复杂、缓慢：读取缓存对该缓存存放的硬盘文件进行I/O操作，重新解析
from memory cache：使用内存中的缓存
from disk cache：使用硬盘中的缓存
浏览器读取顺序：memory ——> disk
浏览器将js和图片等文件解析执行后直接存入内存缓存中，F5刷新页面时，from memory cache(使用内存中的缓存)
css文件存入硬盘中，F5刷新页面时，from disk cache(使用硬盘中的缓存)
参考文章
https://segmentfault.com/a/1190000017962411
https://www.cnblogs.com/chengxs/p/10396066.html
[转]浏览器缓存机制
浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的<head>节点中加入<meta>标签，代码如下：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。
下面我主要介绍HTTP协议定义的缓存机制。
Expires策略
Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。
下面是宝宝PK项目中，浏览器拉取jquery.js web服务器的响应头：
注：Date头域表示消息发送的时间，时间的描述格式由rfc822定义。例如，Date: Mon,31 Dec 2001 04:25:57GMT。
Web服务器告诉浏览器在2012-11-28 03:30:01这个时间点之前，可以使用缓存文件。发送请求的时间是2012-11-28 03:25:01，即缓存5分钟。
不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。
Cache-control策略（重点关注）
Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。
|
http协议头Cache-Control： |
|
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age 各个消息中的指令含义如下：
|
还是上面那个请求，web服务器返回的Cache-Control头的值为max-age=300，即5分钟（和上面的Expires时间一致，这个不是必须的）。
Last-Modified/If-Modified-Since
Last-Modified/If-Modified-Since要配合Cache-Control使用。
- Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。
- If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。
Etag/If-None-Match
Etag/If-None-Match也要配合Cache-Control使用。
- Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器觉得）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。
- If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match（Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。
既生Last-Modified何生Etag？
你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：
- Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间
- 如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存
- 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
用户行为与缓存
浏览器缓存行为还有用户的行为有关！！！
|
用户操作 |
Expires/Cache-Control |
Last-Modified/Etag |
|
地址栏回车 |
有效 |
有效 |
|
页面链接跳转 |
有效 |
有效 |
|
新开窗口 |
有效 |
有效 |
|
前进、后退 |
有效 |
有效 |
|
F5刷新 |
无效 |
有效 |
|
Ctrl+F5刷新 |
无效 |
无效 |
总结
浏览器第一次请求：
浏览器再次请求时：
原文：
http://kb.cnblogs.com/page/165307/
以上是关于浏览器缓存机制的主要内容，如果未能解决你的问题，请参考以下文章