浅谈浏览器缓存

 

 

• 为什么使用浏览器缓存
• 缓存存在的内容
• 缓存协商
• 缓存协商的简单演示
• 缓存相关的header
• 缓存相关header之间的关系
• 用户的不同操作
• 用户不同操作对应浏览器的不同处理方式
• 测试环境与线上环境取js方式不同导致的问题

 

 

为什么使用本地缓存

对于一些比较少变化的文件，如js、css等，可以在第一次请求之后将这些文件先放在本地，在下次再去请求这些文件的时候就可以不用再去请求，直接使用本地的就可以了，直接消灭请求。这是最好的减少带宽占用、降低服务器压力的方法，同时也可以最大限度的提升页面的显示速度（直接本地取）。

 

查看缓存：

 

ie：Internet选项-设置-查看文件

 

Firefox：缓存采用二进制的方式存储，查看可以在地址栏中输入about:cache

 

 

缓存存在的问题

       既然存在了本地，那么最大的问题就是一旦服务器的文件更新了，而浏览器还在使用本地的缓存，会造成服务器端的修改不能生效。

缓存协商

       缓存的文件是由服务器生成，在本地保存，所以对缓存的使用必须要双方配合才能达到最好的效果，这样就引入了缓存协商。

       缓存协商其实就是浏览器在请求某个文件的时候，服务器在返回时会在头部加一些额外的信息，如这个文件在多长时间内可以使用、文件的最后修改时间是什么等等，浏览器在下次再请求这个文件的就会根据之前服务器在头部加入的额外信息来对应的进行一些处理。

 

缓存协商的简单演示

http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm

注释：左侧的是一个.htm的请求，右侧是一个js的请求

 

注释：在第二次请求的时候.js的请求头信息中多出了红框中的三个值

 

缓存相关的header

Cache-control常用值：

1. public 指示响应数据可以被任何客户端缓存
2. private 指示响应数据可以被非共享缓存所缓存。这表明响应的数据可以           被发送请求的浏览器缓存，而不能被中介所缓存
3. no-cache 指示响应数据不能被任何接受响应的客户端所缓存
4. max-age 数据经过max-age设置的秒数后就会失效，相当于HTTP/1.0中的Expires头。如果在一次响应中同时设置了max-age和 Expires，那么max-age将具有较高的优先级。

Cache-control	打开一个新页面	在原始窗口中单击 Enter 按钮	按 F5 键刷新	单击 Back 或 Forward 按钮
public	浏览器呈现来自缓存的页面	浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
private	浏览器重新发送请求到服务器	第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面	浏览器重新发送请求到服务器	浏览器呈现来自缓存的页面
no-cache	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	浏览器重新发送请求到服务器
max-age=xxx	在 xxx 秒后，浏览器重新发送请求到服务器	在 xxx 秒后，浏览器重新发送请求到服务器	浏览器重新发送请求到服务器	在 xxx 秒后，浏览器重新发送请求到服务器

 

Last-modified：在浏览器第一次请求页面的时候如果返回的header中有这一项的值，则在下次请求的头信息中会加入if-modified-since这个值，服务器端取到这个值后去判断和该文件的最后修改时间是否一样，如果一样，则直接返回304（not modified），通知浏览器可以使用本地缓存。

 

E-tag：在浏览器第一次请求页面的时候如果返回的header中有这一项的值，则在下次请求的头信息中会加入if-None-match这个值，服务器端取到这个值后去和这个文件生成的E-tag值进行对比，如果一样，则直接返回304（not modified），通知浏览器可以使用本地缓存。Etag默认生成规则是根据文件的inode、文件大小、文件修改时间，可以通过配置选择其中的某几项来生成、

 

 

Expires:过期时间，在这个时间之前，不会再去想服务器发任何请求，直接用本地缓存

缓存相关header的关系

Cache-control会覆盖掉Expires的值，即如果同时存在cache-control:max-age=900和expires:******，则以cache-control的值为准

 

Etag和last-modified的值同时存在的时候，last-modified的值失效，仅判断Etag。

 

用户的几种不同操作

•       当用户打开一个新的浏览器窗口时的失效操作提高访问速度，提升用户的体验

•       当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作

•       当用户单击 Back 或 Forward 按钮时的失效操作

•       当用户按 F5 键刷新页面时的失效操作

•       用户按ctrl+F5

不同的操作对应的不同请求

下面截图的情况为firefox中请求http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm这个网址的结果。

 

 

新打开浏览器窗口：未过期的缓存直接使用本地的，不向服务器发送请求

 

在地址栏单击回车：未过期的缓存直接使用本地的，不向服务器发送请求

（注：在ie中在地址栏单击回车行为与下面的回退一样，全部使用本地缓存，不论过不过期）

 

回退：不论缓存由没有过期，都使用本地缓存。可以看出来比上面少了两个请求，原因是上图中标红的请求的两个文件的缓存都已过期，但在回退时不管是否已过期，直接使用缓存。（浏览器默认对所有的文件都进行缓存，是否使用另说）。剩下的五个请求是因为这几个请求携带的参数都有一个每次都不一样的，导致本地没有与其对应的缓存（例如参数中有系统本地时间）。

 

 

 

F5：所有的文件都会发送请求，有缓存的进行缓存协商，没有修改的返回304使用本地缓存。

 

 

 

Ctrl+F5：所有文件都会发送请求，并且不进行缓存协商（cache-control:no-cache），每个文件重新返回（200）

 

 

此次整理的正文到这里就结束了，下面列出的是可能比较多关注的点：

 

1.       Cache-control的值覆盖其他的设置

2.       Etag和last-modified共存的时候以Etag为准

3.       在F5刷新的时候不论缓存过不过期都会和服务器进行缓存协商（带上Etag、last-modified之类的信息）

4.       在ctrl+F5的时候直接在浏览器单方面决定不使用缓存（直接cache-control:no-cache）

5.       在后退的时候除非显式的声明no-cache，否则都会使用缓存（不论是否过期）

 

评论

1 楼 liuweihug 2014-10-21  

图说浏览器的缓存原理及缓存方式说明（1）
http://www.suchso.com/projecteactual/web-server-browser-cache-1.html