基于http协议讲解缓存头Cache-Control在服务中的应用

88457112 2019-02-01

先思考两个问题?

  • 在页面中引入静态资源文件，为什么静态资源文件改变后，再次发起请求还是之前的内容，没有变化呢？
  • 在使用webpack等一些打包工具时，为什么要加上一串hash码？

缓存头Cache-Control的一些特性

可缓存性

  • public http经过的任何地方都可以进行缓存
  • private 只有发起请求的这个浏览器才可以进行缓存
  • no-cache 任何一个节点都不可以缓存

到期

  • max-age=<seconds> 设置缓存到多少秒过期
  • s-maxage=<seconds> 会代替max-age，只有在代理服务器才会生效
  • max-stale=<seconds> 是发起请求方主动带起的一个头，是代表即便缓存过期，但是在max-stale这个时间内还可以使用过期的缓存，而不需要愿服务器请求新的内容

重新验证

  • must-revalidate 如果max-age设置的内容过期，必须要向服务器请求重新获取数据验证内容是否过期
  • proxy-revalidate 主要用在缓存服务器，指定缓存服务器在过期后重新从原服务器获取，不能从本地获取

其它

  • no-store 本地和代理服务器都不可以存储这个缓存，永远都要从服务器拿body新的内容使用
  • no-transform 主要用于proxy服务器，告诉代理服务器不要随意改动返回的内容

示例

  • cache-control.html
<html>
 <head>
 <meta charset="utf-8" />
 <title>cache-control</title>
 </head>
 <body>
 <script src="/script.js"></script>
 </body>
</html>
  • cache-control.js

浏览器输入http://localhost:3010/ 加载cache-control.html文件，该文件会请求http://localhost:3010/script.js，在url等于/script.js设置cache-control的max-age进行浏览器缓存

const http = require('http');
const fs = require('fs');
const port = 3010;
http.createServer((request, response) => {
 console.log('request url: ', request.url);
 if (request.url === '/') {
 const html = fs.readFileSync('./example/cache/cache-control.html', 'utf-8');
 response.writeHead(200, {
 'Content-Type': 'text/html',
 });
 response.end(html);
 } else if (request.url === '/script.js') {
 response.writeHead(200, {
 'Content-Type': 'text/javascript',
 'Cache-Control': 'max-age=200'
 });
 response.end("console.log('script load')");
 }
}).listen(port);
console.log('server listening on port ', port);
  • 第一次运行

浏览器运行结果,没有什么问题，正常响应

基于http协议讲解缓存头Cache-Control在服务中的应用

控制台运行结果

基于http协议讲解缓存头Cache-Control在服务中的应用

  • 修改cache-control.js返回值
...
response.writeHead(200, {
 'Content-Type': 'text/javascript',
 'Cache-Control': 'max-age=200'
});
response.end("console.log('script load ！！！')");
...
  • 中断上次程序，第二次运行

浏览器运营结果

第二次运行，从memory cahce读取，浏览器控制台并没有打印修改过的内容

基于http协议讲解缓存头Cache-Control在服务中的应用

控制台运营结果

指请求了/ 并没有请求 /script.js

基于http协议讲解缓存头Cache-Control在服务中的应用

以上结果浏览器并没有返回给我们服务端修改的结果，这是为什么呢？是因为我们请求的url/script.js没有变，那么浏览器就不会经过服务端的验证，会直接从客户端缓存去读，就会导致一个问题，我们的js静态资源更新之后，不会立即更新到我们的客户端，这也是前端开发中常见的一个问题，我们是希望浏览器去缓存我们的静态资源文件（js、css、img等）我们也不希望服务端内容更新了之后客户端还是请求的缓存的资源， 解决办法也就是我们在做js构建流程时，把打包完成的js文件名上根据它内容hash值加上一串hash码，这样你的js文件或者css文件等内容不变，这样生成的hash码就不会变，反映到页面上就是你的url没有变，如果你的文件内容有变化那么嵌入到页面的文件url就会发生变化，这样就可以达到一个更新缓存的目的，这也是目前前端来说比较常见的一个静态资源方案。

作者：五月君

链接：https://www.imooc.com/article/72190

88457112

88457112

相关推荐

浏览器缓存剖析

浏览器缓存是优化网站，提升网站性能的有效方法。浏览器缓存一般指对服务器返回静态资源在客户端的备份。基于Chrome浏览器版本 78.0.3904.97;firefox默认过期时间都是0，设置其他值也无效。浏览器缓存策略指的是，先判断是否允许浏览器缓存。该字

jjddrushi / 0评论 2019-12-09

网站优化：浏览器缓存控制简介及配置策略

每次访问网页，通常浏览器会从服务器下载所 需的资源，例如 HTML 文档、图片、CSS、JavaScript，甚至包括字体文件等。这里面的许多文件都是很少变动的，如果每次都要从服务器重新下载，会不必要 地增加网页载入时间，同时也会对服务器造成一定压力。通过

厉害了我的linux / 0评论 2015-02-13

Nginx静态文件缓存过期配置

add_header Cache-Control no-cache;add_header Cache-Control private;expires 0s;

wangfengqingyang / 0评论 2019-04-20

HTTP协议（四）：缓存

HTTP协议提供了非常强大的缓存机制，了解这些缓存机制，对提高网站的性能非常有帮助。本文介绍浏览器和Web服务器之间如何处理"浏览器缓存"，以及控制缓存的httpheader.数据库也有缓存，等等。http缓存的是指:当Web请求抵达缓

小菜鸟 / 0评论 2013-06-10

http 缓存小结

为了优化性能，使用缓存是一种比较常见的手段。那么如何实现缓存以及如何避免缓存呢，都是要探讨的话题。可以从三个部分：http 缓存、cookie、localStorage&sessionStorage 来重点讲述缓存实现的原理、过程以及实现的方式。由

小小狐狸 / 0评论 2019-07-01

深入剖析浏览器缓存策略

前言在访问一个网页时，客户端会从服务器下载所需的资源。但是有些资源很少发生变动，例如 HTML、JS、CSS、图片、字体文件等。如果每次加载页面都从源服务器下载这些资源，不仅会增加获取资源的时间，也会给服务器带来一定压力。因此，重用已获取的资源十分重要。将

MoRenYaoJing / 0评论 2019-07-01

浏览器缓存整理

对浏览器缓存这一块一直是乱哄哄的状态，今天终于有时间整理一下，写下这篇笔记，以供日后查阅。缓存概述良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度 通常浏览器缓存策略分为两种：强缓存和协商缓存。基本流程浏览器在加载资源时，根据请求头的expir

小小狐狸 / 0评论 2019-06-30

图解浏览器缓存，教你提高用户体验

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~本文由前端林子发表于云+社区专栏浏览器缓存，是浏览器端保存数据，用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和加快页面速度,从而提高用户体验。若响应头Expires

阳光之吻 / 0评论 2019-06-28

HTTP缓存（Cache-Control、Expires 、ETag）

HTTP缓存HTTP缓存——谷歌开发者HTTP缓存有利于web性能优化。Cache-Control例子假设我们首页有一个请求,请求js文件<script src="./main.js"></script>如何让C

李守彬的空间 / 0评论 2019-06-28

关于浏览器缓存的控制cache-control,expires,last-modified,etag,及编程示例

在客户端取得资源后,缓存在本地，一段时间内，如果再次展示这个资源时，不再向服务器发出请求，而是直接取缓存的内容。以上这两者都存在时，Cache-Control 优先。这两个也都是GMT 时间格式。另外，通过指定“Expires”值也会影响到缓存。

xasdfg / 0评论 2015-05-06

浏览器缓存机制学习总结

浏览器缓存机制学习总结最近在做一个考试系统时，由于经常加载试卷或图片等等静态资源，抽空学习了一下缓存机制，在此记录。为什么要使用缓存1、通过HTTP协议，在客户端和浏览器建立连接时需要消耗时间，而大的响应需要在客户端和服务器之间进行多次往返通信才能获得完整

agou专家书院 / 0评论 2019-06-27

网站优化：浏览器缓存控制简介及配置策略

每次访问网页，通常浏览器会从服务器下载所 需的资源，例如 HTML 文档、图片、CSS、JavaScript，甚至包括字体文件等。这里面的许多文件都是很少变动的，如果每次都要从服务器重新下载，会不必要 地增加网页载入时间，同时也会对服务器造成一定压力。通过

cuiweisaidelike / 0评论 2015-02-13

网站性能优化:cache-control设置详解

很多与网站性能优化相关的帖子，大多只讲了应该怎么做，应该怎么设置，没有太多讲这些设置的相关解释及案例。此文重点介绍网站缓存cache-control，即哪些页面，哪些资源应该做网站缓存？并用京东的cache-control设置为案例做参考。http响应头信

潇湘夜雨 / 0评论 2014-09-12

简单教学 apache 配置 Expire/Cache-Control 头

简单教学 apache 配置 Expire/Cache-Control 头这里我使用的是Apache2.4.17. 打开apache安装目录，找到conf目录，用记事本打开httpd.conf 文件。</FilesMatch>这里时间设置不一样

在旅途 / 0评论 2019-06-27

JSP禁用缓存常用方法

建议：jspcache最好做在过滤器上,把需要缓冲的页面集中在同一个目录下,每次更改只须更改web.xml就可以完成缓冲设置,这样比较方便.

MusicPeng / 0评论 2013-10-24

设置浏览器不缓存

为了指示IE浏览器（客户端）不要缓存页面，服务器端的程序可以编写如下：response.setHeader;response.setHeader;作用相当于上行代码，通常两者合用

pworld / 0评论 2013-09-09

浏览器缓存实现原理

浏览器缓存将文件保存在客户端，好的缓存策略可以减少对网络带宽的占用，可以提高访问速度，提高用户的体验，还可以减轻服务器的负担。因此我们有必要了解它的实现原理，用来提高网站的性能。页面文件有三种缓存状态。页面的缓存状态是由http header决定的，一个浏

书弋江山 / 0评论 2013-06-15

浏览器缓存

前言在前端开发中，缓存有利于加快网页的加载速度，同时缓存能够被反复利用，所以可以减少流量和带宽的开销。缓存的分类有很多种，CDN缓存、数据库缓存、代理服务器缓存和浏览器缓存。正文浏览器的缓存问题，主要指的是http的缓存——即协议层。下面我们正式开始来进行

Loger / 0评论 2019-06-21

HTTP 缓存的相关协议

上一篇文章 梳理 HTTP 缓存的关键路径。浏览器发起 HTTP 请求，请求报文发往浏览器内置的缓存器，缓存器经过首次验证，再决定是否向服务器发起缓存的再次验证。这条路径的完成，依赖于 HTTP 协议。再次请求同一资源时，缓存器通过检查 Cache-Con

iPanelzcf / 0评论 2019-06-21

Cache-Control参数

private：响应只能够作为私有的缓存，比如在一个浏览器中，不能在用户间共享，所以设置该参数后就不能被反向代理缓存了。no-cache：响应不会被缓存，而是实时向服务器端请求资源，这使得HTTP认证能够禁止缓存以保证安全性。max-age=［单位：秒］：

Loger / 0评论 2019-06-21

浏览器缓存机制

浏览器在加载资源的时候，会根据这个资源的http header判断它是否命中强缓存，如果命中，就直接从缓存中读取资源，不会发请求到服务器。强缓存原理强缓存是利用Expires或者Cache-Control这两个http response header实现的

kingwbs / 0评论 2019-06-20

浏览器缓存_HTTP Cache-control

HTTP协议分别在 1.0 / 1.1 两个时代推出了 Expires / Cache-control 两种cache策略，这里我们无需了解全部的细节，无需记住整个RFC内容,但是当我们需要使用HTTP cache策略时，我们需要注意以下细节：。Expir

gxyblue / 0评论 2012-03-05

图片缓存:浏览器刷新 和 304 Not Modified 与 If-Modified-Since 及 Cache-Control

今天在用chrome浏览淘宝页面的时候，发现很多来自淘宝图片HTTP状态码是304NotModified. 304NotModified：客户端有缓冲的文件并发出了一个条件性的请求。服务器告诉客户，原来缓冲的文档还可以继续使用。因此，如果请求中包含IfMo

HealerJJJ / 0评论 2011-12-08

Ajax 返回值 中文乱码 解决

System.out.println("username="+user.getUserName());response.setHeader("Cache-Control","no-cache");

AJAXBloger / 0评论 2011-10-08

关于绝对禁止页面缓存的Cache-Control之no-store的使用

Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。简单介绍下Cache-Control的属性设置。1)max-age: 设置缓存的最大的有效时间，单位为秒。与max-age 的区别是：max-age用于普通缓存，如果存在

yykk / 0评论 2018-02-07

Apache开启 gzip 压缩与配置 Expire/Cache-Control 头

打开apache安装目录，找到conf目录，用记事本打开httpd.conf 文件。　有些服务器对内容进行 gzip 编码只针对某些文件,所以 有没有返回 这个,并不能代表,是否支持gzip的依据。#图片文件缓存83天 ExpiresByType ima

功夫熊猫 / 0评论 2018-04-01

Nginx与浏览器缓存的处理方法

★ 控制请求服务器策略：是忽略资源的缓存策略的情况下额外强制请求服务器的意思。　　1.每次访问网页时 　　不管是否有缓存、资源状态是否过期，都会再次请求服务器。　　 3.自动 　　 大体上和2是一样的，只是对于图片的策略有点不同。　　　　Cache-con

屎大小仙女 / 0评论 2018-04-28

nginx expires控制页面缓存

“Expires”头标的值将通过当前系统时间加上设定time值来设定。对于不支持http1.1的浏览器，还是需要expires来控制。所以最好能指定两个响应头。但HTTP规范规定max-age指令将重写expires头。expires通过Last-Modi

HanksWang / 0评论 2013-01-12

AJAX防止页面缓存的代码

采用AJAX技术的时候通常我们无刷新页面提交数据后用同样的url去获取数据的时候会发现是以前的数据~那样就给client端带来假象了~~采用以下的方法可以取消缓存 htm网页 <metahttp-equiv="pragma"con

海蓝蓝 / 0评论 2007-06-02

Ajax中要注意的问题

ajax调用的返回数据会被缓存，调用静态html，即使把html修改了，IE依有可能然用原来的数据显示。而firefox可以正常显示新的数据。

zndy0 / 0评论 2007-04-03

HTTP缓存带来的“bug”--HTTP 协议 Cache-Control

问题描述先说背景。网站是用PHP开发的，未用任何框架，代码结构也非常简单。运行于阿里云服务器，并采用其CDN来做分发。根据业务需求，有的页面会判断用户浏览器类型，依此来选择PC或者手机端内容。如果用户请求的内容CDN并未缓存，就会发生回源。再次对比发现，正

安在信息安全新媒体 / 0评论 2018-03-29

200 OK (from cache)原因

Meta标签中的http-equiv用来标记不可缓存或过期时间，但效果一般。而且代理缓存基本不访问HTML文档内容，所以尽量少用meta标签控制缓存。Forces caches to submit the request to the origin ser

软件设计 / 0评论 2017-05-15