200 memory cache
不访问服务器,一般已经加载过该资源且缓存在了内存当中,直接从内存中读取缓存。浏览器关闭后,数据将不存在(资源被释放掉了),再次打开相同的页面时,不会出现from memory cache。200 disk cache
不访问服务器,已经在之前的某个时间加载过该资源,直接从硬盘中读取缓存,关闭浏览器后,数据依然存在,此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。
强缓存
不会向服务器发送请求,直接从缓存中读取资源。
disk cache或memory cache两种(耗时几毫秒)
关键字
Cache-Control:当值设为max-age=300时,表示5分钟内的请求从disk或memory读取。
协商缓存
向服务器发送请,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源;
关键字
1)Etag是上一次加载资源时,服务器返回的response header,是对该资源的一种唯一标识,只要资源有变化,Etag就会重新生成
2)Last-Modified是该资源文件最后一次更改时间,服务器会在response header里返回,同时浏览器会将这个值保存起来,下一次发送请求时,放到request headr里的If-Modified-Since里,服务器在接收到后也会做对比,如果相同则命中协商缓存
强缓存 VS 协商缓存:最好是配合在一起用,争取最大化的减少请求,利用缓存,节约流量。
F5与Ctrl+F5
F5:
浏览器会设置max-age=0,跳过强缓存判断.
会带上If-Modifed,进行协商缓存判断。
Ctrl+F5:
跳过强缓存和协商缓存(不携带任何参数),直接从服务器拉取资源。
禁用缓存
JS :
<script type=“text/javascript” src=“/js/test.js?+Math.random()”></script>
html:
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 00:00:00 GMT">