HTTP缓存资源(文件)

发表于 | 分类于

如何加速网页访问(减少HTTP请求)？HTTP缓存！
Cache-Control:max-age=30000
Expires
Etag
Last-Modified
菜鸟教程：HTTP

通过Cache-Control加快请求速度

前端性能优化中,减少HTTP请求可以提高页面的响应速度
后端对某个要传送的文件设置Cache-Control响应头,使其缓存30秒，然后发送给浏览器；浏览器在30秒内刷新，不会再次发送请求，而是直接从缓存中取得该文件。超过30秒后刷新，会向服务器发送请求。

1
response.setHeader('Cache-Control', 'max-age=30')

必须是相同的Request URL才能在过期前从缓存中取文件。
通过更改Request URL的查询参数（比如http://a.b.com/main.js?v1），每次向服务器发送的请求就都不一样了，于是不会从缓存中取文件。

文件在后端有升级怎么办

设置main.js缓存10年，这样每次请求main.js时都会从缓存中获取。如果中途main.js有升级，就将main.js的Request URL的查询参数改成main.js?v2，这样就可以获取最新的js文件，并且新文件缓存10年；如果再升级，就将main.js的Request URL的查询参数改成main.js?v3

chrome调试

如果在chrome的开发者工具 –> network 中选择disable cache，那么就不会从缓存中获取文件，而是向服务器发送请求

Expires

从前人们用Expires缓存
现在人们用Cache-Control缓存
如果设置了Cache-Control响应头，那么Expires响应头就会被忽略

后端程序员通过Expires响应头，设置过期时间

1
response.setHeader('Expires', 'Thu, 19 Apr 2018 08:17:46 GMT') //GMT格式

Expires与Cache-Control的区别

Expires设置具体的过期时间(绝对时间点)
Cache-Control设置多长时间段后过期(相对时间段)

如果用户修改了本地的时间，那么Expires就会受到影响。比如Expires到2018年x月x日过期，用户将本地时间改成2019年x月x日，那么Expires就失效了。
而Cache-Control是一个相对过期时间，所以不存在这个问题。

Etag/If-None-Match

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

  • Etag

服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）
后端程序员通过Etag响应头，设置Etag值(唯一标识)

1
response.setHeader('Etag', 'xxxxxxxxx')

浏览器首次发送请求后，服务器会传给浏览器Etag
查看响应头

1
2
3
4
5
6
Response Headers
Cache-Control:max-age=600
Connection:keep-alive
Content-Length:0
Etag:xxxxxxxxx

  • If-None-Match

浏览器再次发送请求时，在Request Headers里的If-None-Match带上Etag值：

1
2
3
Request Headers
If-None-Match:xxxxxxxxx

如果发送请求时带上的这个If-None-Match的值与服务端的Etag值一样，那么就返回304，且不下载资源

304

304 Not Modified：未曾修改过
后端返回304，则不下载响应体(文件)

Etag与Cache-Control的区别

Cache-Control设置资源有效期10年，那么只要这个资源的Request URL不变，则10年内后端都不会收到请求【直接不请求】
服务器给浏览器种下Etag后，浏览器发送请求时会在请求头带上If-None-Match，服务器收到请求后，对比If-None-Match的值与服务器上的Etag值，如果一样，则返回304，不下载资源文件【有请求，但不下载】
Cache-Control更好，因为Cache-Control直接不发送请求，提高了页面的响应速度

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。

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

总结

浏览器第一次请求：

浏览器再次请求时：

参考资料：浏览器缓存机制

-------------本文结束感谢您的阅读-------------