美文网首页http
浏览器缓存原理

浏览器缓存原理

作者: fina小姐 | 来源:发表于2017-04-04 09:23 被阅读0次

    背景:http1中利用缓存机制可以节约http请求数量,减少请求数据

    弱缓存(协商缓存)

    1.第一次请求, 服务端通过 last-Modified 或 Etag标记实体

    再次发起请求,带上If-Modified-Since: 上次 Last-Modified 的内容或If-None-Match: 上次 ETag 的内容,询问服务端资源是否过期。(服务端此时会对比该文件在服务器上的last-modified和Etag,若没有变化,则表示没有过期)

    没有过期,直接返回一个状态码为 304、正文为空的响应,告知浏览器使用本地缓存(可以节约返回数据)

    过期,返回资源,状态码200,新的last-modified,ETag,和正文。

    用两个字段完成标识的意义是?

    last-modified有问题,第一,只能精确到秒,第二,负载均衡算法中,各机器读到的文件修改时间不一致,会导致文件无故失效或着得不到更新。ETap是由服务端生成的摘要,更准确。

    强缓存

    用 expire 和cache-control(max-age= xxx) 前者规定文件到期时间,后者规定时间段。expire会依赖客户端时间,cache-control是相对时间,更准确一点,若两者同时设定 cache-control会覆盖expire

    浏览器刷新清缓存规则

    F5(cmd+r):清楚一般缓存,就是弱缓存,可能看到304

    control+F5(shift+cmd+r):强制刷新,强刷会忽略浏览器所有缓存(并且请求头会携带 Cache-Control:no-cache 和 Pragma:no-cache,用来通知所有中间节点忽略缓存)。只有从地址栏或收藏夹输入网址、点击链接等情况下,浏览器才会使用强缓存。

    综合使用

    一般服务端返回的头部都会带上上述字段,那是如何配合使用的呢?

    浏览器缓存流程

    第一次发起请求(www.baidu.com

    request header:无

    response header:status:200,last-modified:xxx,ETag:'xxx',cache-control:max-age=3600

    第二次发起同样的请求(浏览器刷新)

    根据cache-control判断是否使用缓存,若未过期,不向服务端发起请求,如图

    图1

    若过期,则向服务端发起请求,服务端端根据last-modified和ETag判断文件是否有改动,若没有,则返回304,浏览器继续使用缓存

    若文件有改动,则返回200,新的last-modified,ETag 以及正文

    相关文章

      网友评论

        本文标题:浏览器缓存原理

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