[技术分享]浏览器缓存机制等话题二三事

shangjin发布于1 个月前 • 61 次阅读

浏览器缓存由来

小编其实是不想写这类开头的,但是为了照顾基础一般的童鞋,小编就稍微提几句!我们在写代码的过程中,常常会遇到缓存问题,比如有时候明明改了样式,本地缺不起作用,必须要ctrl+f5才行,这就是缓存引起的!那么缓存既然会引起这个问题,那么我们还需要缓存嘛?答案是需要

缓存的好处

上面说了缓存引起的问题,也就是资源更新不及时,需要强制刷新,那么现在我们看看缓存的好处,主要是更快响应和更少的请求。首先来看更快响应,资源从服务器获得和速度明显低于从缓存获得的速度,给客户更好的体验。其次来看更少的请求,更少的请求可以减轻服务器的压力,节省服务器资源贷款等成本。

缓存的分类

1.强制缓存

强制缓存主要有两种:Expires和Cache-Control,Expires作用有2个,一个是设置缓存,另外一个是兼容。Cache-Control作用其实是设置缓存,但是有个优先级问题,Cache-Control优先级高于Expires。设置强制缓存也简单,加个max-age即可,具体大家可以自行测试!

2.协商缓存

协商缓存主要是Cache-Control下的,在强缓存失效后触发,这个时候强制缓存往往设置成Cache-Control:no-cache,主要有以下两类Last-Modified,If-Modified-SinceETag、If-None-Match。先来说说Last-Modified表示本地文件最后修改日期,也就是本地文件最后修改的时间,If-Modified-Since这个是http请求的时候用的,它的值就是Last-Modified的值,只要设置了Last-Modified,浏览器会自动在请求头header设置If-Modified-Since,之后如果服务器有更新,那么就会获得新的资源!但是会存在一个问题,只有本地的 缓存文件被打开, Last-Modified就会被修改!

ETag的出现就是用来解决上面打开本地文件, Last-Modified会发生变化的问题。ETag可以理解为只要你文件发生的改变,ETag就会发生变化,同理你也只要设置ETag,浏览器会在请求时自动添加If-None-Match,其值是上次返回的ETag。

注意:ETag的优先级是高于Last-Modified,但是性能上Last-Modified比ETag好

关于memory cache和disk cache

写到这里,大家是不是发现漏了啥,没错,就是 memory cache和disk cache。这2个其实是强缓存里的,属于浏览器本地的内存缓存和磁盘缓存,浏览器会自己把资源区分到内存缓存还是本地缓存,区别是memory中的资源是临时的,当关闭或者刷新页面后就会丢失,而disk是是存在硬盘上的,可以从文件夹中找到,至于浏览器缓存的文件夹在哪里,大家自行google。这个工作是浏览器自动完成的,人为区分memory cache和disk cache的方法,小编暂时没有找到。

缓存触发相关流程

简单写下缓存触发的流程,当资源需要请求的时候,先去校验强制缓存,max-age如果没有超过,则从memory cache或者disk cache获取缓存,如果强制缓存失效,则去协商缓存,这个时候发送http或者https请求,如果ETag和Last-Modified本地和服务端一样,则返回304,同时从浏览器缓存取资源,这就是我们常见的304。如果不一样则重新请求资源,返回200,同时再度把新资源的ETag和Last-Modified存入浏览器缓存!

用户行为与缓存

大家只要记着,ctrl+F5是强制刷新,也就是强制缓存失效,协商缓存如果配置了ETag和Last-Modified,也会失效,会直接从服务器返回新的资源,同时返回200。用户其他的行为,则是按照正常的流程来,先检验强制缓存,再检验协商缓存,再返回304或者200。

哪里设置

小编查了很多资料,不建议在html中的meta设置,因为你在那里设置只是缓存了html,html中的js,css等没有设置缓存,建议在ngnx等代理服务器,或者直接后端设置。

缓存策略

小编说下简单的2点,经常变动的资源少用缓存,比如max-age设置时间短或者干脆不要设置,Cache-Control则是设置为no-cache,同时配合ETag和Last-Modified。长时间不变的资源,直接把max-age设置的时间长点,同时配合其他缓存策略。这类资源如果要更新,检验用时间戳,比如css的v=1.0,通过改变请求链接,获得最新资源。当然对于不需要缓存的资源,我们直接使用no-store。

共收到 0 条回复