美文网首页
浏览器缓存问题

浏览器缓存问题

作者: 前端小帅 | 来源:发表于2020-05-25 19:25 被阅读0次

强缓存

强缓存:会直接从浏览器里面拿数据。

控制强缓存的字段有:Expires和Cache-Control,其中cache-control比expires优先级高

Expires

Expires是HTTP/1.0控制网页缓存的字段,其值为服务器返回该请求的结果缓存的到期时间,即再次发送请求时,如果客户端的时间小于Expires的值时,直接使用缓存结果。

弊端:expires控制缓存原理是使用客户端时间服务端时间来控制,如果客户端与服务端的时间由于某些原因(时区不同;客户端和服务端有一方的时间不准确)发生误差,那么强制缓存直接失效,那么强制缓存存在的意义就毫无意义。

Cache-Control

在HTTP/1.1中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要有5种取值:

(1)public:所有内容都将被缓存(客户端和代理服务器都可缓存)

(2)private:所有内容只有客户端可以缓存,Cache-Control的默认取值

(3)no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定

(4)no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存

(5)max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效

举例:由于Cache-Control的优先级比expires,那么直接根据Cache-Control的值进行缓存,意思就是说在600秒内再次发起该请求,则会直接使用缓存结果,强制缓存生效。

拓展:

图片中请求对应的size值为该缓存,分别为from memory cachefrom disk cache。

那么from memory cache 和 from disk cache又分别代表的是什么呢?什么时候会使用from disk cache,什么时候会使用from memory cache呢?

from memory cache代表使用内存中的缓存,from disk cache则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为memory –> disk

内存缓存(from memory cache)和硬盘缓存(from disk cache)的相关知识?

(1)内存缓存(from memory cache):内存缓存具有两个特点,分别是快速读取时效性

1、快速读取:内存缓存会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取。

2、时效性:一旦该进程关闭,则该进程的内存则会清空。

2)硬盘缓存(from disk cache):硬盘缓存则是直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢。

tips:在浏览器中,浏览器会在js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

协商缓存

协商缓存:强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程。

控制协商缓存的字段有:Last-Modified/if-Modified-SinceEtag/if-None-Match

主要有以下两种情况:1,协商缓存生效,返回304;2,协商缓存失败,返回200和请求结果。

1、Last-Modified / If-Modified-Since

(1)Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间,如下:

2)If-Modified-Since则是客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求,发现请求头含有If-Modified-Since字段,则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件。

2、Etag / If-None-Match

(1)Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成),如下:

2)If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200,如下

注:Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since,同时存在则只有Etag / If-None-Match生效。

相关文章

  • 浏览器缓存?优点?清除方法?

    ☆前端优化:浏览器缓存技术介绍 - 简书 浏览器缓存(适用于前端解决缓存问题) - 简书 js清除浏览器缓存问题的...

  • 静态文件缓存问题

    问题描述 在日常的项目中,在浏览器加载静态文件,会遇到浏览器缓存的问题。 浏览器会默认使用缓存,当我们修改了静态文...

  • display:none无效问题问题

    如果display:none是通过 引入,则可能是浏览器缓存问题,浏览器对以前版本的缓存解决: 方法一、清楚浏览器...

  • 浏览器缓存(http缓存)

    浏览器缓存有两种:强制缓存和协商缓存 浏览器缓存机制 浏览器发送请求,会先从浏览器缓存中查找【请求结果】和【缓存标...

  • 缓存、cookie、token、session、localSto

    一、缓存分类 服务器端缓存(CDN缓存) 客户端缓存(浏览器缓存); 二、浏览器缓存 强缓存:浏览器在加载资源时,...

  • 协商缓存和强缓存

    浏览器缓存主要有两类:缓存协商和彻底缓存,也有称之为协商缓存和强缓存 浏览器缓存机制浏览器缓存(Brower Ca...

  • JS获取服务器时间——IE浏览器时间出现1970问题

    归根结底是IE浏览器的缓存机制问题 解决方法: cache:false关闭浏览器的缓存,而加入type:"HEAD...

  • 浏览器缓存策略

    最近在对项目做 IE 11 兼容,由 IE 的缓存问题,引发我对于浏览器缓存策略的思考。 缓存类型 web缓存主要...

  • DSBD

    1.浏览器缓存 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识 强制缓存优先于协商缓存进...

  • 浏览器缓存问题

    最近上线发现,新上线的内容要强刷下浏览器,页面才会是新内容 Last-Modified 是什么 Last-Modi...

网友评论

      本文标题:浏览器缓存问题

      本文链接:https://www.haomeiwen.com/subject/kmduahtx.html