缓存的故事

Scholer 发布于2019-08-06 13:14 / 598人阅读

摘要：所以，如何确定这些资源没有发生变更如何控制缓存过期的时间成了必须解决的问题。浏览器接收到响应后，会记录这些信息，方便之后的缓存控制。也就是说，就算服务器端该资源已经发生变化，只要缓存未过期，就不会重新请求资源，所以刷新的作用就体现出来了。

前几天按照Node.js中文社区上的教程，用Node.js搭了一个简单的静态文件服务器，其中有一个功能是提供缓存支持，在实践这一部分的过程中，我重新学习了缓存的相关知识，在这里作简单的梳理。

关于缓存的相关介绍，网上有不少文章，这里推荐三篇我认为不错的文章：

http://blog.csdn.net/eroswang/article/details/8302191

http://www.oschina.net/news/41397/web-cache-knowledge

http://cloudbbs.org/forum.php?mod=viewthread&tid=15790

缓存是什么，简单的说，就是访问页面时不需要重新请求浏览器已经缓存的资源（如图片、css、js等)，前提是这些位于服务器的资源并没有发生变更。所以，如何确定这些资源没有发生变更、如何控制缓存过期的时间成了必须解决的问题。这些内容在以上三篇文章中都有详细的介绍，我这里仅从四种使用情景来分析浏览器和服务器的交互过程。

情景一：用户第一次在浏览器中输入网址，或者通过链接访问某个网站

浏览器（客户端）发出请求，请求网页上的所有资源，一个资源对应一个请求，服务器端收到请求后，向客户端发送200的状态码，表示该资源请求成功，并返回响应头（response header）和数据体。其中，响应头包含了以下几个重要的头信息：

last-modified：该资源（文件）的最后修改时间，为UTC格式

Expires：该资源的缓存过期时间，为绝对时间，即过了这个指定时间后缓存失效，为UTC格式

Cache-Control：通常通过max-age指定缓存过期时间，为相对时间，表示某次请求成功后多少秒内缓存可用，单位为秒

Cache-Control的出现是因为服务器端的时间可能存在误差，其优先级高于Expires。浏览器接收到响应后，会记录这些信息，方便之后的缓存控制。

情景二：用户第N次（N大于1）在浏览器中输入网址，或者通过链接访问某个网站

浏览器首先检查待请求的资源的状态，先检查Cache-Control，没有则检查Expires，如果缓存未过期，则浏览器不向服务器端发送请求，直接返回200 from cache，表明是从缓存中获取的资源。也就是说，就算服务器端该资源已经发生变化，只要缓存未过期，就不会重新请求资源，所以刷新的作用就体现出来了。

情景三：资源已经缓存，用户刷新页面（按F5）

浏览器向服务器发送资源请求，请求头中包含以下两个头信息：

Cache-Control：其中max-age=0（刷新时置为0），表示本地缓存已过期，要向服务器确认

if-modified-since：这是时间等于上一次成功请求该资源后从last-modified获取的时间，为UTC格式

服务器接收到请求，将待请求资源的最后一次修改时间和if-modified-since进行对比。如果前者与后者不相等，则说明文件已经变动，则重新下载该资源，并返回200状态码；如果前者与后者相等，则从本地缓存中获取，并返回304 Not Modified。

情景四：资源已经缓存，用户强制刷新页面（按Ctrl + F5）

强制刷新时，请求头中的Cache-Control的值设为no-cache，表示强制发送请求，此外请求头中无If-Modified-Since头信息，这样，无论缓存是否过期，无论服务器端文件是否发生变更，都会强制下载请求的资源，这就是所谓的“强制刷新”。

最后，附上用node.js实现静态文件服务器的教程：

用NodeJS打造你的静态文件服务器

云服务器 GPU云服务器云计算的故事关于linux的故事关于云计算的小故事感人故事

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/61758.html

url输入后的故事

摘要：演员表角色名称扮演者小刘浏览器小李普通用户小川传输层快递小哥小汪网络层老四目标服务器比特大叔电流小刘（浏览器）是一个批发商，小李（普通用户）是一个超市的进货经理，一天小李经理来到了小刘老板的店铺，说：我‘要（www.baidu.com）类的所有东西’，小刘老板说：‘我得用我们的行话（IP）告诉底下的人你要的东西他才知道你要啥’，小刘老板从身上掏出一个本本（浏览器缓存的DNS），...

wuyangchun 2019-08-23 15:23 评论0 收藏0
url输入后的故事

摘要：演员表角色名称扮演者小刘浏览器小李普通用户小川传输层快递小哥小汪网络层老四目标服务器比特大叔电流小刘（浏览器）是一个批发商，小李（普通用户）是一个超市的进货经理，一天小李经理来到了小刘老板的店铺，说：我‘要（www.baidu.com）类的所有东西’，小刘老板说：‘我得用我们的行话（IP）告诉底下的人你要的东西他才知道你要啥’，小刘老板从身上掏出一个本本（浏览器缓存的DNS），...

HtmlCssJs 2019-08-02 14:17 评论0 收藏0
关于PHP默认Expires: Thu, 19 Nov 1981...的故事

摘要：为何不设置头的时候默认输出如下的缓存头呢答案来自这是用于尝试禁用浏览器缓存请求的这个日期是这个块代码开发者的生日那么问题来了把个人的事情带到项目中来真的好吗以后看到就可以认为这程序是写的啦有意思的是也是有这头的为何PHP不设置Expires头的时候, 默认输出如下的缓存头呢？: Expires: Thu, 19 Nov 1981 08:52:00 GMT 答案来自stac...

Eric 2019-06-27 11:00 评论0 收藏0