1. 首页
  2. IT资讯

面试总被问到HTTP缓存机制及原理?看完你就彻底明白了

“u003Ch3 class=”pgc-h-arrow-right”u003E前言u003Cu002Fh3u003Eu003Cpu003EHttp 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能。u003Cu002Fpu003Eu003Cpu003E但是对于很多前端同学来说,仅仅只是知道浏览器会对请求的静态文件进行缓存,但是为什么被缓存,缓存是怎样生效的,却并不是很清楚。u003Cu002Fpu003Eu003Cpu003E在此,我会尝试用简单明了的文字,像大家系统的介绍HTTP缓存机制,期望对各位正确的理解前端缓存有所帮助。u003Cu002Fpu003Eu003Ch3 class=”pgc-h-arrow-right”u003E在介绍HTTP缓存之前,作为知识铺垫,先简单介绍一下HTTP报文u003Cu002Fh3u003Eu003Cpu003EHTTP报文就是浏览器和服务器间通信时发送及响应的数据块。u003Cu002Fpu003Eu003Cpu003E浏览器向服务器请求数据,发送请求(request)报文;服务器向浏览器返回数据,返回响应(response)报文。u003Cu002Fpu003Eu003Cpu003E报文信息主要分为两部分u003Cu002Fpu003Eu003Col start=”1″u003Eu003Cliu003Eu003Cstrongu003E包含属性的首部(header):u003Cu002Fstrongu003E附加信息(cookie,缓存信息等)与缓存相关的规则信息,均包含在header中u003Cu002Fliu003Eu003Cliu003Eu003Cstrongu003E包含数据的主体部分(body):u003Cu002Fstrongu003EHTTP请求真正想要传输的部分u003Cu002Fliu003Eu003Cu002Folu003Eu003Ch3 class=”pgc-h-arrow-right”u003E缓存规则解析u003Cu002Fh3u003Eu003Cpu003E为方便大家理解,我们认为浏览器存在一个缓存数据库,用于存储缓存信息。u003Cu002Fpu003Eu003Cpu003E在客户端第一次请求数据时,此时缓存数据库中没有对应的缓存数据,需要请求服务器,服务器返回后,将数据存储至缓存数据库中。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F1b65f2937fb3437c82414d8062711442″ img_width=”403″ img_height=”325″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EHTTP缓存有多种规则,根据是否需要重新向服务器发起请求来分类,我将其分为两大类(强制缓存,对比缓存)u003Cu002Fpu003Eu003Cpu003E在详细介绍这两种规则之前,先通过时序图的方式,让大家对这两种规则有个简单了解。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E已存在缓存数据时,仅基于强制缓存,请求数据的流程如下u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F0d78344c52134866a94ea27d2f4e3f80″ img_width=”865″ img_height=”332″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E已存在缓存数据时,仅基于对比缓存,请求数据的流程如下u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fe1da45c4bfc144098de85f5eb201bdf8″ img_width=”947″ img_height=”340″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E对缓存机制不太了解的同学可能会问,基于对比缓存的流程下,不管是否使用缓存,都需要向服务器发送请求,那么还用缓存干什么?u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E这个问题,我们暂且放下,后文在详细介绍每种缓存规则的时候,会带给大家答案。u003Cu002Fpu003Eu003Cpu003E我们可以看到两类缓存规则的不同,强制缓存如果生效,不需要再和服务器发生交互,而对比缓存不管是否生效,都需要与服务端发生交互。u003Cu002Fpu003Eu003Cpu003E两类缓存规则可以同时存在,强制缓存优先级高于对比缓存,也就是说,当执行强制缓存的规则时,如果缓存生效,直接使用缓存,不再执行对比缓存规则。u003Cu002Fpu003Eu003Ch2 class=”pgc-h-arrow-right”u003E强制缓存u003Cu002Fh2u003Eu003Cpu003E从上文我们得知,强制缓存,在缓存数据未失效的情况下,可以直接使用缓存数据,u003Cstrongu003E那么浏览器是如何判断缓存数据是否失效呢?u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们知道,在没有缓存数据的时候,浏览器向服务器请求数据时,服务器会将数据和缓存规则一并返回,缓存规则信息包含在响应header中。u003Cu002Fpu003Eu003Cpu003E对于强制缓存来说,响应header中会有两个字段来标明失效规则(Expiresu002FCache-Control)u003Cu002Fpu003Eu003Cpu003E使用chrome的开发者工具,可以很明显的看到对于强制缓存生效时,网络请求的情况u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F538cf3c8d84f4a72a55e1e3b1d048bb3″ img_width=”644″ img_height=”251″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch3 class=”pgc-h-arrow-right”u003EExpiresu003Cu002Fh3u003Eu003Cpu003EExpires的值为服务端返回的到期时间,即下一次请求时,请求时间小于服务端返回的到期时间,直接使用缓存数据。u003Cu002Fpu003Eu003Cpu003E不过Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1,所以它的作用基本忽略。u003Cu002Fpu003Eu003Cpu003E另一个问题是,到期时间是由服务端生成的,但是u003Cstrongu003E客户端时间可能跟服务端时间有误差,这就会导致缓存命中的误差。u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E所以HTTP 1.1 的版本,使用Cache-Control替代。u003Cu002Fpu003Eu003Ch3 class=”pgc-h-arrow-right”u003ECache-Controlu003Cu002Fh3u003Eu003Cpu003ECache-Control 是最重要的规则。常见的取值有private、public、no-cache、max-age,no-store,默认为private。u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003Eprivate: 客户端可以缓存u003Cbru002Fu003Epublic: 客户端和代理服务器都可缓存(前端的同学,可以认为public和private是一样的)u003Cbru002Fu003Emax-age=xxx: 缓存的内容将在 xxx 秒后失效u003Cbru002Fu003Eno-cache: 需要使用对比缓存来验证缓存数据(后面介绍)u003Cbru002Fu003Eno-store: 所有内容都不会缓存,强制缓存,对比缓存都不会触发(对于前端开发来说,缓存越多越好,so…基本上和它说886)u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003Eu003Cstrongu003E举个板栗u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fcb591e24427940208f56cfefe2509edd” img_width=”393″ img_height=”144″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E图中Cache-Control仅指定了max-age,所以默认为private,缓存时间为31536000秒(365天)u003Cu002Fpu003Eu003Cpu003E也就是说,在365天内再次请求这条数据,都会直接获取缓存数据库中的数据,直接使用。u003Cu002Fpu003Eu003Ch3 class=”pgc-h-arrow-right”u003E对比缓存u003Cu002Fh3u003Eu003Cpu003Eu003Cstrongu003E对比缓存,顾名思义,需要进行比较判断是否可以使用缓存。u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E浏览器第一次请求数据时,服务器会将缓存标识与数据一起返回给客户端,客户端将二者备份至缓存数据库中。u003Cu002Fpu003Eu003Cpu003E再次请求数据时,客户端将备份的缓存标识发送给服务器,服务器根据缓存标识进行判断,判断成功后,返回304状态码,通知客户端比较成功,可以使用缓存数据。u003Cu002Fpu003Eu003Cpu003E第一次访问:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F5b90b93fe0aa4d7a8c77a6c20b3e0426″ img_width=”600″ img_height=”103″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E再次访问:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fbd8865d1b859423ca3ca4d216ec1cd12″ img_width=”586″ img_height=”106″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E通过两图的对比,我们可以很清楚的发现,在对比缓存生效时,状态码为304,并且报文大小和请求时间大大减少。u003Cu002Fpu003Eu003Cpu003E原因是,服务端在进行标识比较后,只返回header部分,通过状态码通知客户端使用缓存,不再需要将报文主体部分返回给客户端。u003Cu002Fpu003Eu003Cpu003E对于对比缓存来说,缓存标识的传递是我们着重需要理解的,它在请求header和响应header间进行传递,一共分为两种标识传递,接下来,我们分开介绍。u003Cu002Fpu003Eu003Ch3 class=”pgc-h-arrow-right”u003ELast-Modified u002F If-Modified-Sinceu003Cu002Fh3u003Eu003Cpu003Eu003Cstrongu003ELast-Modified:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E服务器在响应请求时,告诉浏览器资源的最后修改时间。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F446ac3524a964b8c93d549af382f6fd8″ img_width=”591″ img_height=”221″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003EIf-Modified-Since:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E再次请求服务器时,通过此字段通知服务器上次请求时,服务器返回的资源最后修改时间。u003Cu002Fpu003Eu003Cpu003E服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。u003Cu002Fpu003Eu003Cpu003E若资源的最后修改时间大于If-Modified-Since,说明资源又被改动过,则响应整片资源内容,返回状态码200;若资源的最后修改时间小于或等于If-Modified-Since,说明资源无新修改,则响应HTTP 304,告知浏览器继续使用所保存的cache。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F5dce0fc657af4f12836eaa83ae2b3eff” img_width=”597″ img_height=”247″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch3 class=”pgc-h-arrow-right”u003EEtag u002F If-None-Match(优先级高于Last-Modified u002F If-Modified-Since)u003Cu002Fh3u003Eu003Cpu003Eu003Cstrongu003EEtag:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F7b1d3bd4b11b4c618f15220069613688″ img_width=”592″ img_height=”219″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003EIf-None-Match:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E再次请求服务器时,通过此字段通知服务器客户端缓存数据的唯一标识。u003Cu002Fpu003Eu003Cpu003E服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对,不同,说明资源又被改动过,则响应整片资源内容,返回状态码200;相同,说明资源无新修改,则响应HTTP 304,告知浏览器继续使用所保存的cache。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fc3b3958ece8b4b5790953e7a0cbd4c97″ img_width=”592″ img_height=”228″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch3 class=”pgc-h-arrow-right”u003E总结u003Cu002Fh3u003Eu003Cpu003E对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略。u003Cu002Fpu003Eu003Cpu003E对于比较缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E浏览器第一次请求:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F7c90821ebd884f1c907fe7ce8dd51e2a” img_width=”501″ img_height=”412″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E浏览器再次请求时:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F706e116a72eb4cc8aebee5d8b482c27a” img_width=”556″ img_height=”531″ alt=”面试总被问到HTTP缓存机制及原理?看完你就彻底明白了” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cbru002Fu003Eu003Cu002Fpu003E”

原文始发于:面试总被问到HTTP缓存机制及原理?看完你就彻底明白了

主题测试文章,只做测试使用。发布者:乾奕,转转请注明出处:http://www.cxybcw.com/26260.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code