这两个字段都和HTTP协议的缓存控制相关。
浏览器缓存机制是通过HTTP协议Header里的Cache-Control（或Expires）和Last-Modified（或 Etag）等字段来实现。
这两个字段的作用：
1. 接收响应时，浏览器决定文件是否需要被缓存；
2. 需要加载文件时，浏览器决定是否需要发出请求的字段。
看一些例子：
Cache-Control:max-age=115360000，表示缓存有效期为115360000秒。如果115360000秒内需要再次请求这个文件，浏览器不会发出向服务器发出请求，而是直接使用本地的缓存的文件。这是HTTP/1.1标准中的字段。
这总情况能在Chrome开发者工具的Network标签页里看到from disk cache的提示：
从本地缓存中读取文件非常快速，上面的例子只花费了6毫秒：
Expires: Thu, 31 Dec 2018 23:55:55 GMT，表示该文件的过期时间是2018年12月31日晚上23点55分55秒，在这个时间之前浏览器都不会再次发出请求去获取该文件。这是HTTP/1.0中的字段。
在Chrome开发者工具的network标签页里能看到：
下面两个字段是发起请求时，服务器决定文件是否需要更新的字段。
Last-Modified: Thu, 26 Jul 2018 05:41:21 GMT，这表示这个文件最后的修改时间是2018年7月26日5点41分21秒。
浏览器会在下次请求的时候，把Last-Modified的值作为Request Header的If-Modified-Since字段带上。如果浏览器缓存的文件已经超过了Cache-Control（或者Expires），那么需要加载这个文件时，就会发出请求，请求的Header有一个字段为If-Modified-Since，如下图所示：
服务器接收到请求后，会把文件的Last-Modified时间和这个时间对比，如果时间没变，那么浏览器将返回304 Not Modified给浏览器：
如果时间有变化，那么服务器会返回200 OK，并返回相应的内容给浏览器。
下图第9行的get_header_field方法是服务器从浏览器发送过来的HTTP请求提取头部字段If-Modified-Since的值。
下图第16行的set_header_field方法是服务器设置Last-Modified头部字段的值。
下图就是服务器设置304 Not Modified响应的位置：
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
网友评论