关于浏览器缓存

缓存分为2种:

1.  强缓存: 直接从本地缓存中取资源,不会和服务器通信,返回的http状态码是200(from cache);

2.  协商缓存:通过服务器来告知是否能用本地缓存。先和服务器通信,如果返回可以使用本地缓存的指示,再从本地缓存中取(服务器不会返回被请求资源,返回的状态码是403(Not Modified));如果不可以使用本地缓存就会返回最新的资源;

浏览器发起第二次相同的请求时会先判断能不能使用强缓存,不行的话,再判断能不能使用协商缓存(如果没有设置强缓存,协商缓存也不会生效)。

一、强缓存

强缓存是由headers中的Expires和cache-control决定的,后者优先级高于前者。

Expries是http1.0提出的,表示失效时间(GMT格式),只有在这个时间之前的请求才可以用强缓存。

第一次向服务器请求一个资源后,浏览器不仅会把资源保存起来,也会保存Reponse Headers,包括其中的Expires。第二次发请求时先去缓存中寻找这个资源,取到Expires,与当前的请求时间做对比,如果在Expires之前,则从缓存中取,否则重新向服务器请求,Expires在重新加载时被更新。

cache-control可以有多个值:

cache-control: max-age=111000  -->表示自第一次收到响应后的111000ms以后可以用缓存

cache-control: no-cache   -->禁止使用强缓存

cache-control: no-store  -->禁止使用缓存,每次都要去服务器重新请求

cache-control: private  -->只允许被终端用户的浏览器端缓存

cache-control: public -->可以被所有用户缓存,保存终端用户和CDN等代理服务器

由于Expries是个绝对时间,由于各个客户端之间有时差就会导致缓存不一致的问题,所以http 1.1提出了cache-control,是个相对时间,在第二次发请求时取到缓存中的max-age和第一次的请求时间计算出资源过期时间,与当前的请求时间对比决定是否使用缓存。

二、协商缓存

有两组headers值:Last-Modified / If-Modified-Since 和 Etag / If-None-Match,后者优先级高于前者。

第一次和第二次的同一个请求:

     

1. Last-Modified / If-Modified-Since

第一次请求时返回的Response Headers中用Last-Modified表示请求的资源在服务器上最新的修改时间,第二次请求时在Request Headers中用If-Modified-Since带上这个值发到服务器,服务器对比这个值和这个资源市价上的最新修改时间决定是否直接返回403还是返回资源。当返回403时,表示资源没有更新,所以浏览器缓存中的Last-Modified也就不用更新了。

但是Last-Modified的问题在于有时服务器上资源其实有变化,但是最后修改时间却没有变化,所以有了Etag / If-None-Match来管理协商缓存。

2. Etag / If-None-Match

Etag是服务器根据被请求资源生成的一个唯一标识字符串,只要资源发生变化,Etag就会变,跟资源的最新修改时间没有关系,能弥补Last-Modified的不足。与Last-Modified类似,第二次请求时请求头会带上If-None-Match标识的Etag值,区别是由于服务器每次会根据资源重新生成一个Etag,再拿它跟浏览器传过来的Etag对比,如果一致则返回403,所以由于每次Etag都会重新生成,所以浏览器缓存中的Etag也必须每次都更新。

一般Last-Modified和Etag是同时启用的,但是对于分布式系统多同机器间文件的Last-Modified必须一致,以免因为负载均衡到不同机器导致比对不一致,分布式系统尽量关闭Etag,因为每台机器生成的Etag也不一致。

另外当使用F5刷新时会跳过强缓存,当强制刷新时,强缓存和协商缓存都会跳过。其他操作行为如前进后退,地址栏回车都会按正常流程走。

浏览器默认都会缓存图片,js,css等静态文件,也可以通过待会再响应头中设置是否要启用缓存,或是通过服务器专门的配置文件统一设置Expires, Cache-control等。

a.css?v1.1 和 a_v1.1.css, 覆盖式发布 和 非覆盖式发布

时间: 2024-10-24 14:07:38

关于浏览器缓存的相关文章

浏览器缓存机制浅析

非HTTP协议定义的缓存机制 浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires: Cache-control等).但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下: <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 上述代码的作用是告诉浏览器当前页面不被缓存,每

浏览器缓存控制

浏览器缓存控制 Last-Modified/ If-Modified-Since 在浏览器第一次请求某一个URL时,服务器端的返回状态码200,内容是客户端请求的资源,同时有一个Last-Modified的属性标记此文件在服务器端最后被修改的时间. Last-Modified格式类似这样:Last-Modified : Fri , 12 May 2006 18:53:33 GMT 客户端第二次请求此URL时,根据HTTP协议的规定,浏览器会向服务器传送If-Modified-Since报头,询问

浏览器缓存机制

最近在做项目过程中需要对部分文件数据进行缓存,于是整理一些关于浏览器缓存机制的信息 概要总结:1.Expires 过期时间2.Cache-Control 缓存机制 [max-age=300]缓存时间 300 表示5分钟3.Last-Modified 最后修改时间 对应在请求头部有If-Modified-Since4.Etag 唯一标识 由服务器生成 对应在请求头部有If-No-Match优先级:Etag > last-modified > Expires 浏览器缓存机制,其实主要就是HTTP协

手机网页调试·清除浏览器缓存的方法

在手机里调试网页的时候,总是为清除缓存烦恼.特别是QQ浏览器.最后甚至有同学开发出了Android下一键清除清除各种浏览器缓存的APP,但需要root,且每次耗时不短.最后经过尝试,发现了一个方便.有效的方法.那就是利用HTTP的响应头,强制浏览器不缓存资源. NodeJS 中的实现方法: NodeJS中可以通过设置一下方法设置响应头 res.setHeader("CacheControl", 'no-cache'); res.setHeader("Expires"

浏览器缓存机制(2)-应用缓存

浏览器缓存机制(2)-应用缓存 在公司项目中,一些移动版的WEB页面恰好用到了应用缓存,故顺便写篇文章来总结下应用缓存方面的内容. 1.应用缓存简介 应用缓存(application cache)是HTML5提供的一套缓存机制,使得WEB应用可以离线运行.除了一些旧版本的IE外,现代浏览器如firefox,chrome,safari大部分都是支持HTML5标准的.使用应用缓存主要优势有: 离线浏览:用户可以在离线状态浏览网页内容. 速度更快: 因为数据存储在浏览器缓存中,浏览器只会下载服务器发生

利用gulp解决微信浏览器缓存问题

做了好多项目,这次终于要解决微信浏览器缓存这个令人头疼的问题了.每次上传新的文件,在微信浏览器中访问时,总要先清除微信的缓存,实在麻烦,在网上搜罗了很多解决办法,终于找到了方法:利用gulp解决缓存问题.关于gulp大家可以去gulp官网去详细了解. 这篇文章主要参考于Gulp解决发布线上文件(CSS和JS)缓存问题和Gulp.js----比Grunt更易用的前端构建工具两篇文章,在这里先谢过原作者. 本文主要记录安装gulp以及使用.解决缓存问题的过程,以便日后方便查阅. 1.安装NodeJS

304和浏览器缓存

浏览器虽然发现了本地有该资源的缓存,但是不确定是否是最新的,于是想服务器询问,若服务器认为浏览器的缓存版本还可用,那么便会返回304. 浏览器缓存分为强缓存和协商缓存. 1.浏览器请求某资源,通过header判断是否强缓存,若是强缓存,则从本地直接获取缓存文件,不发请求到浏览器 2.若不是强缓存,发送请求到服务器,服务器通过一些request header确定是否是协商缓存,如果是,服务器将请求返回,但不返回资源,而是让客户端从本地缓存获取资源 3.强缓存和协商缓存,资源都是本地,只是强缓存不会

浏览器缓存机制详解

对于浏览器缓存,相信很多开发者对它真的是又爱又恨.一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了"错误"的东西,而在开发过程中千方百计地想把缓存禁掉.那么浏览器缓存究竟是个什么样的神奇玩意呢? 什么是浏览器缓存: 简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中.缓存会根据进来的请求保存输出内容的副本.当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是

浏览器缓存策略

浏览器一般缓存图片.CSS.JS等静态文件,因为这些文件的更新频率相对来说比较低,合理利用浏览器的缓存对网站的性能提升有很大帮助.HTTP缓存分为两部分,分别是本地缓存和缓存协商,当本地缓存不生效时会启用缓存协商.HTTP缓存主要由HTTP协议的头(Header)信息来制定. 本地缓存 本地缓存是指当浏览器请求资源时,如果命中了浏览器本地的缓存资源,那么浏览器就不会发送真正请求给服务器.它的执行过程是:1. 第一次浏览器发送请求给服务器时,此时浏览器还没有本地缓存副本,服务器返回资源给浏览器,响

nginx优化--gzip压缩与expire浏览器缓存

gzip压缩 概述 网页在服务器端经过了gzip或者其他格式的压缩后的输出明显减少了content-length字节,当访问过百万时,这些减少的字节就会变为客观的流量给节约下来;从而减轻服务器的压力以及网页的访问速度; 原理 客户端在向服务端发送http请求时,在请求头中有一个Accept-Encoding的头信息,该头信息告知服务器端本客服端能接收什么样的压缩文件,如果服务器端配置了压缩的需求,就会返回相应的压缩文件,然后浏览器再解码呈现出来;我们在做采集时,需要采集的是未压缩的文件,所以在h