zoukankan      html  css  js  c++  java
  • 浏览器缓存

    浏览器查找缓存的顺序

    service worker
    memory cache (Tab页关闭,即失效,主要针对图片,样式等资源)
    disk cache
    push cache(http2独有)

    针对静态文件,动态文件需要 web server解析

    浏览器缓存有强缓存,协商缓存和启发式缓存三种。

    请求的基本过程,浏览器会先检查cache-control和expires,看资源是否缓存过期,不过期,直接使用本地缓存,不发请求
    过期,则向服务器发送请求,服务器比对If-none-match和Etag,或者If-modified-since和last-modified字段,
    看资源是否发生改变,如果未改变,则返回304,body为空,否则返回200,body为文件内容。

    1.强缓存

    cache-control和expires设置的缓存时间,第一次请求后,文件被缓存在本地
    其中cache-control优先级高于expires

    cache-control的各种值的含义:

    max-age: 缓存时间,浏览器,代理服务器均有效
    s-max-age: 缓存时间,代码服务器有效,且优先级高于max-age,浏览器无效
    no-cache: 表示缓存时间为0,每次请求使用协商缓存
    no-store: 不缓存
    public: 浏览器和代理服务器都可以缓存
    private: 只有浏览器可以缓存
    max-stale: 能容忍的最大过期时间
    min-fresh: 能够容忍的最小新鲜度

    2.协商缓存

    http请求的response header中有 last-modified和Etag
    浏览器再次请求该资源时候,会在 request header中携带
    If-none-match(等于上次Etag的值)
    If-modifed-since(等于上次last-modified的值)
    想服务发送请求,服务器对比If-none-match和Etag,If-modified-since和last-modified的值,
    如果一致,则返回304状态码,body为空。
    不一致,则返回200状态码,body为文件内容。

    其中Etag的优先级高于last-modified

    返回状态码 304 Not Modified

    3.启发式缓存

    如果没有cache-control和expires的缓存设置,浏览器依然会有一个本地缓存策略,就是启发式缓存。
    其计算方法如下:
    http response header中的 Date(当前时间) 和 Last-Modified 的值

    本地缓存时间 = (Date - Last-Modified) * 10%

    因此,启发式缓存的缓存时间可长可短,建议明确设置缓存时间


    返回状态码 200 OK (与正常的无缓存请求一致,实际上使用了本地缓存,没有发送请求)

    chrome的Request Headers中会显示一行字

    Provisional(临时的) header are shown, 表明此请求为启发式缓存的请求。

    字段解释

    Last-Modified:文件上次的修改时间

    Etag:文件的唯一标识,类似于hash值

    Etag解决了Last-Modified的哪些问题

    1. Last-Modified的时间精确到秒级,当一个文件在1s内被多次修改,无法记录

    2. 某些文件会被周期性修改,但内容不变,此时不想利用Last-Modified的值更新缓存

    3. 某些服务器不能精确得到文件的最后修改时

      http request   http respose

    If-Modified-Since -> Last-Modified 时间上对比,一致则返回304

    If-None-Match -> Etag 内容上对比,一致则返回304

    在第一次请求URL的时候,服务器讲 Last-Modified和Etag返回给客户端
    在第二次请求此URL的时候,客户端将 If-Modified-Since 和 If-None-Match 发送到服务器
    服务器将 If-Modified-Since 与 Last-Modified,If-None-Match 与 Etag做对比,一致则
    返回304,否则返回200.

    Expires

    服务器返回的http response header中有Expires时,浏览器会在其标记的时间内不去下载请求的内容。
    仅在地址栏输入地址有效,F5刷新无效。

    Pragma和Cahce-Control

    Http1.0的Pragma和Http1.1的Cache-Control可以用来控制页面缓存。

    Pragma->no-cache, Expires->0 ,Cache-Control->no-cahce可以让页面不缓存。
    Cache-Control的max-age可以设置页面在客户端缓存多少秒,是相对时间,并且覆盖Expires

    Age:代理服务的缓存时间(单位秒)
    Date:响应生成的时间
    Vary:Vary:Accept-Encoding,User-Agent告诉代理服务,要缓存资源的压缩和未压缩两个版本

    cache-contorl和pragma的no-cache设置,并不能完全禁用缓存
    此设置只有部分浏览器支持,并且代理服务器由于不解析html文档,完全不支持此方式

    用户行为与缓存的关系

    1. 用户在 地址栏回车,页面链接跳转,新开窗口,前进,后退时,强缓存和协商缓存均有效
    2. 用户在 F5刷新页面,强缓存无效,协商缓存有效
    3. 用户在 ctrl+F5刷新页面,强缓存和协商缓存均无效

    分布式系统的缓存

    分布式系统的多台机器间的last-modified必须保持一致,而且尽量关闭Etag,
    因为每台机器的Etag都会不一致

    服务器缓存

    服务器缓存属于共享缓存

    包括

    1. 代理服务器缓存

    2. 源服务器缓存

    3. CDN缓存



  • 相关阅读:
    promise!
    123
    git回忆回忆回忆
    Vue基本指令
    vue小案例(跑马灯)
    mvc
    nodejs中path模块
    web服务端重定向
    弹性布局
    导出数据库的表的所有字段类型,长度,名称
  • 原文地址:https://www.cnblogs.com/mengff/p/6817535.html
Copyright © 2011-2022 走看看