• 【明年找到好工作】:面试题打卡第三天


    # http缓存

    在这里插入图片描述

    http缓存都是从第二次请求开始的

    流程:

    1、第一次请求资源时,服务器返回资源,并在响应头部中注入回传资源的缓存参数

    如:

    Cache-Control: max-age=31536000单位是s(http1.1)

    expires (http1.0)

    优先级:Cache-Control > expires

    在这里插入图片描述

    在这里插入图片描述

    选项解释
    max-age=100缓存100秒后过期,资源缓存在本地
    no-cache不使用本地缓存。使用协商缓存,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ETag,那么请求的时候会与服务器验证,如果资源未被更改,那可以避免重新下载
    no-store所有内容都不会被缓存,既不使用强制缓存也不使用协商缓存,每次用户请求该资源,都会向服务器发送请求,服务器再返回资源
    public可以被所有的用户缓存,包括客户端和代理服务器
    private只能被客户端缓存,不允许CDN等中继续存服务器对其缓存
    s-maxage覆盖max-age,作用与max-age一样,但只用于代理服务器中缓存

    第一次请求:

    在这里插入图片描述

    2、第二次请求时(相同资源),浏览器会先查看该资源的缓存参数,通过判断 max-age=315360000是否过期,未过期则命中强缓存,不会向后端发送请求。否则就把请求参数注入到请求头部传给服务器

    第二次请求:

    在这里插入图片描述

    补充知识点:

    • from memory cache 代表使用内存中的缓存
    • from disk cache 代表使用硬盘中的缓存

    浏览器加载顺序为 memory -> disk

    在浏览器中,浏览器会在js和图片等文件解析执行后直接存入内存缓存中;而css文件存放在硬盘中的缓存中

    在这里插入图片描述

    在这里插入图片描述

    强缓存的这种方式页面加载速度是最快的,性能也是最好的,但是在这期间必须保证线上资源没有被修改

    3、到达服务器,看是否命中协商缓存,命中则返回304,否则服务器会返回新的资源

    常见的http缓存只能缓存get请求响应的资源


    # 协商缓存(对比缓存)

    协商缓存是一种服务端缓存策略

    流程:

    1、如果服务器使用协商缓存,第一次发送请求从服务端获取到资源后,会将资源在本地进行缓存。并且服务端还会返回资源标识符。

    2、再次发送请求时(会携带资源标识符)。此时服务器通过标识符判断浏览器中的资源版本是否与服务器中最新的资源版本是否一致。

    3、若一致,服务器就会返回给浏览器304的状态码,重定向让浏览器直接从本地缓存中去取资源

    4、若不一致,服务器就会返回给浏览器200的状态码,并且返回最新的资源和新的资源标识符

    补充:

    资源标识符:

    • Last-Modified/If-Modified-Since:指资源上一次修改的时间(精确到秒)

    • Etag/If-None-Match:资源对应的唯一字符串(只要文件内容不同,对应的Etag就一定会发生变化)

    为什么需要使用Etag来判断文件是否修改

    如果在浏览器本地缓存中缓存了文件,若后台打开了该文件,并进行编辑,但最终保存内容没有发生变化,但此时Last-Modified/If-Modified-Since已经更新修改时间。

    再次请求该资源时,通过判断 Last-Modified/If-Modified-Since就会出现下载相同文件,浪费带宽。

    因此Etag/If-None-Match就应运而生,服务器会先验证ETag,一致的情况下,才会判断Last-Modified/If-Modified-Since,最后才决定是否返回 304


    # 强缓存和协商缓存的对比
    强缓存协商缓存
    缓存存放位置本地浏览器本地浏览器
    http状态码200304
    谁来决定Cache-Control
    Expires
    ETag/If-Not-Match
    Last-Modified/If-Modified-Since
    操作是否有效1、Ctrl+F5 强制刷新(无效)
    2、F5刷新(无效)
    3、地址栏回车(有效)
    4、页面链接跳转(有效)
    5、新开窗口(有效)
    6、前进、后退(有效)
    1、Ctrl+F5 强制刷新(无效)
    2、F5刷新(有效)
    3、地址栏回车(有效)
    4、页面链接跳转(有效)
    5、新开窗口(有效)
    6、前进、后退(有效)
  • 相关阅读:
    Windows与网络基础-28-子网划分
    基于nodejs+vue云旅青城系统
    Elasticsearch语法知多少之Term query
    统信 UOS 连接 Windows 共享打印机
    芥墨 | 设计需要平衡那些我们都会跳跃的创意
    一个包搞定中文数据集: datasetstore
    十二、组合API(2)
    JMeter性能测试,完整入门篇
    Janus VideoRoom信令分析--public、subscribe
    机器学习VS深度学习
  • 原文地址:https://blog.csdn.net/weixin_44659458/article/details/126649789