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

浏览器缓存问题

作者: 前端小帅 | 来源:发表于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生效。

    相关文章

      网友评论

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

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