看这张图，是浏览器发出请求到请求缓存到过程，这么一个原理
那么http里面如何进行验证呢？主要有两个验证到http头
Last-Modified(上次修改时间)
主要配合If-Modified-Since或者If-Unmodified-Since使用，什么意思呢，如果请求一个资源，资源返回上面有Last-Modified这个头，指定了一个时间，那么下次请求的时候，就会带上这个头，通过If-Modified-Since或If-Unmodified-Since，通常是使用If-Modified-Since，服务器通过If-Modified-Since对比上次给的Last-Modified，验证资源是否需要更新
Etag
这是一个更严格的验证，就是说我们的资源对他的内容会产生一个唯一的一个签名，也就是说，如果对这个资源的内容进行了修改，那么他的签名就会变成新的，最典型的做法就是对内容进行一个hash计算，下一次浏览器发起请求的时候就会带上If-Match或If-Non-Match使用，这个值就是服务端返回过来的Etag的值，然后服务端对比资源的签名判断是否使用缓存
// server.js

const http = require('http');

const fs = require('fs');

http.createServer(function(req,res){

　　console.log('req come', req.url);

　　if (req.url === '/') {

　　　　const html = fs.readFileSync('test.html', 'utf8');

　　　　res.writeHead(200,{

　　　　　　'Content-Type': 'text/html'

　　　　})

　　　　res.end(html);

　　}

　　if (req.url === '/script.js') {

　　　　res.writeHead(200,{

　　　　　　'Content-Type': 'text/javascript',

　　　　　　'Cache-Control': 'max-age=2000000000, no-cache', // 缓存时间很长，但是下次请求时还是需要通过服务端验证

　　　　　　'Last-Modified': '123',

　　　　　　'Etag': '777'

　　　　})

　　　　res.end('console.log("script loaded")');

　　}

}).listen(8888);

console.log('server listening on 8888');

console.log('http://localhost:8888/')
<!--test.html-->

<body>

　　<script src='/script.js'></script>

</body>

如图，浏览器发送了请求，服务端返回了,Cache-Control,Last-Modified:123,Etag:777，

再重新进行一次请求，发现，请求还是像服务端进行了请求，因为no-cache会到服务端验证，我们看request里面可以看到，带了If-Modified-Since:123,If-None-Match:777,但是这个内容其实没有做任何端更改，这个时候是希望浏览器不用返回实际的内容，只需要告诉我们去读缓存就可以，这个时候应该怎么做呢，这个时候需要再服务端做个判断
//server.js

const http = require('http');

const fs = require('fs');

http.createServer(function(req,res){

　　console.log('req come', req.url);

　　if (req.url === '/') {

　　　　const html = fs.readFileSync('test.html', 'utf8');

　　　　res.writeHead(200,{

　　　　　　'Content-Type': 'text/html'

　　　　})

　　　　res.end(html);

　　}

　　if (req.url === '/script.js') {

　　　　console.log(req.headers);

　　　　const etag = req.headers['if-none-match'];

　　　　if (etag === "777") {

　　　　　　res.writeHead(304, {

　　　　　　　　'Content-Type': 'text/javascript',

　　　　　　　　'Cache-Control': 'max-age=2000000000, no-cache', // 缓存时间很长，但是下次请求时还是需要通过服务端验证

　　　　　　　　'Last-Modified': '123',

　　　　　　　　'Etag': '777'

　　　　　　})

　　　　　　res.end('');

　　　　} else {

　　　　　　res.writeHead(200,{

　　　　　　　　'Content-Type': 'text/javascript',

　　　　　　　　'Cache-Control': 'max-age=2000000000, no-cache', // 缓存时间很长，但是下次请求时还是需要通过服务端验证

　　　　　　　　'Last-Modified': '123',

　　　　　　　　'Etag': '777'

　　　　　　})

　　　　　　res.end('console.log("script loaded")');

　　　　}

　　}

}).listen(8888);

console.log('server listening on 8888');

console.log('http://localhost:8888/');

服务端做了修改，返回了304，但是response是返回有内容的，这是chrome缓存工具会读取出来，如果写一些新的内容，再请求，发现还是老的，所以读的是缓存里面的内容，把Disable cache钩上，就会发现请求新的数据了

缓存验证Last-Modifie和Etag的使用的更多相关文章

  1. HTTP缓存——协商缓存（缓存验证）

    协商缓存 所谓"协商",可以理解为:客户端和服务端双方商量着来. 客户端检查资源超过有效期.强缓存命中失败的情况下,则发出请求"询问"服务器是否资源真的过期了, ...

  2. 缓存验证Last-Modified和Etag的使用

    缓存工作示意图: 在http协议里面,数据的验证方式,主要有两个验证头:Last-Modified 和 Etag. Last-Modified 配合Last-Modified-Since或者If-Un ...

  3. HTTP 缓存之ETag 和Cache-Control的使用方法介绍

    什么是http缓存,有什么作用 通过网络获取内容既速度缓慢又开销巨大.较大的响应需要在客户端与服务器之间进行多次往返通信,这会延迟浏览器获得和处理内容的时间,还会增加访问者的流量费用.因此,缓存并重复 ...

  4. http强制缓存、协商缓存、指纹ETag详解

    目录 实操目录及步骤 缓存分类 强制缓存 对比缓存 指纹 Etag 摘要及加密算法 缓存总结 每个浏览器都有一个自己的缓存区,使用缓存区的数据有诸多好处,减少冗余的数据传输,节省网络传输.减少服务器负 ...

  5. Expires、Last-Modified、Etag缓存控制

    当请求一个页面时,如果浏览器使用本地缓存,因此我们经常会看到一个HTTP请求为304状态.或者显示200状态,在chrome下标注是from cache,在火狐下会标注BFCache: 我们希望在服务 ...

  6. 作为前端应当了解的Web缓存知识

    缓存优点 通常所说的Web缓存指的是可以自动保存常见http请求副本的http设备.对于前端开发者来说,浏览器充当了重要角色.除此外常见的还有各种各样的代理服务器也可以做缓存.当Web请求到达缓存时, ...

  7. 前端学HTTP之缓存

    前面的话 Web缓存是可以自动保存常见文档副本的HTTP设备.当Web请求抵达缓存时,如果本地有“已缓存的”副本,就可以从本地存储设备而不是原始服务器中提取这个文档.本文将详细介绍缓存的相关内容 功能 ...

  8. 前端应当了解的Web缓存知识

    缓存优点 通常所说的Web缓存指的是可以自动保存常见http请求副本的http设备.对于前端开发者来说,浏览器充当了重要角色.除此外常见的还有各种各样的代理服务器也可以做缓存.当Web请求到达缓存时, ...

  9. NSCache和NSURLCache、网络缓存优化

    本文目录 一种缓存优化方案 响应头'Last-Modified'和请求头'If-Modified-Since' 'Keep-Alive'响应头和不离线的URLSession 'Expires'响应头 ...

随机推荐

  1. 1.Hibernate框架

    1.分层体系结构与持久化 三层体系结构: 分层体系结构: 指的是将系统的组件分隔到不同的层中,每一层中的组件应保持内聚性,并且应大致在同一抽象级           别: 每一层都应与它下面的各层保持 ...

  2. spring AOP正则表达式的几个问题

    基于包名的正则表达式,是根据抽象父类的包名过滤,还是实现类的包名过滤, 还是抽象父类实现的接口的包名过滤? org.springframework.aop.aspectj.AspectJExpress ...

  3. thinkPHP5.0获取器获取原始数据

    如果你定义了获取器的情况下,希望获取数据表中的原始数据,可以使用:$cate = Cate::get(1);// 通过获取器获取字段echo $cate->type;// 获取原始字段数据ech ...

  4. Office 2016 word无法粘贴（Ctrl + V）

    最近下载了一个 Office 2016 专业版 使用,发现 word 无法使用 Ctrl + V 粘贴东西,由于经常需要复制粘贴东西,无法粘贴影响很大 查了很多资料,尝试过很多的方法,终于发现问题的所 ...

  5. Mysql 查看表数据以及索引大小

    如果想查看 Mysql 数据库的总的数据量或者某个表的数据或者索引大小,可以使用系统库 information_schema 来查询,这个系统库中有一个 TABLES 表,这个表是用来记录数据库中表的 ...

  6. 转 dango的模型总结 and django-关于manage.py migrate无效的问题

    http://iluoxuan.iteye.com/blog/1703061 1:用过django就知道django的model有多方便: 首先介绍下django的模型有哪些属性:先看例子: Djan ...

  7. CAD安装失败怎样卸载CAD 2009？错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. 案例51-crm练习新增客户使用数据字典和ajax

    1 案例效果 2 使用ajax加载数据字典下拉选-后台部分 1 domain部分-BaseDict package www.test.domain; public class BaseDict { / ...

  9. Linux下的NFS快速配置教程与安全策略

    [51CTO专稿]在Linux下实现文件共享有多种方式,NFS就是其中之一.网络文件系统(NFS)协议是由Sun MicroSystem在20世纪80年代为了提供对共享文件的远程访问而设计和实现的.该 ...

  10. Tips In C

    C语言中的使用操作 宏定义时使用do while防止语句的分离, 但是不使用与需要有返回值的语句, 这个时候可以参考第二条 宏定义时使用({}), ()加上{}的方式, 在代码中填写逻辑算法, 最后的 ...