网站首页 > 技术文章 正文
1. 浏览器地址栏中写入URL回车
浏览器首先会检查本地缓存中是否有该资源的副本。
请求头部为cache-control:max-age=0
- 如果缓存中有该资源,并且资源未过期,浏览器将直接从缓存中加载资源,而不会向服务器发送任何请求。
- 如果缓存中没有该资源,或者资源已过期,浏览器将发送一个普通的GET请求到服务器,获取资源。
2. F5刷新
请求头部为cache-control:max-age=0
- 浏览器会检查缓存,并查看缓存的资源是否包含Last-Modified头部。
- 如果有Last-Modified头部,浏览器将发送一个带有If-Modified-Since头部的请求到服务器。这个头部的值就是缓存资源的Last-Modified值。
- 服务器会检查资源是否自If-Modified-Since的日期以来被修改。如果没有,服务器将返回304 Not Modified状态码,告诉浏览器缓存的副本仍然有效。
- 如果资源已被修改,服务器将返回新的资源,并更新Last-Modified头部。
这种方式允许浏览器仅在资源被修改时才重新获取资源,从而节省带宽。
3. Ctrl+F5刷新
请求头部为cache-control:no-cache
- 浏览器会忽略缓存中的任何副本,并向服务器发送一个不带任何条件的GET请求。
- 为了确保服务器返回完整的资源,浏览器通常会包括Cache-Control: no-cache头部。这个头部告诉服务器,浏览器不希望使用缓存的副本,而是要求一个新的资源。
- 服务器将返回完整的资源,就像对一个全新的请求进行响应一样。
这种方式确保了浏览器获取的是服务器上最新的资源副本,而不是可能过时的缓存副本。
虽然直接输入URL和按F5在某些情况下可能看起来行为相似,但按F5更明确地表示了刷新的意图,可能会导致浏览器和服务器在处理缓存时有细微的差别。具体的行为可能取决于浏览器的具体实现和配置。为了确保获取最新的资源,用户可以选择进行强制刷新(如Ctrl+F5),这样可以明确地绕过缓存。
几个相关的头部说明如下
1. Last-Modified 和 If-Modified-Since
- Last-Modified: 服务器在响应中包含此头部,表示资源最后一次被修改的时间。
- If-Modified-Since: 客户端在随后的请求中可以包括此头部,并使用上次响应中的 Last-Modified 值。如果资源自那时未被修改,服务器将返回 304 Not Modified 状态码,否则返回新的资源。
这两个头部共同工作,允许客户端仅在资源被修改时才重新获取资源。
2. If-Unmodified-Since
- If-Unmodified-Since: 客户端发送此头部,要求资源自指定日期以来未被修改。如果资源被修改,则服务器返回 412 Precondition Failed 状态码。
这个头部通常用于确保在客户端获取资源和尝试操作它之间资源未被其他人修改。
3. ETag 和 If-None-Match
- ETag: 服务器在响应中包括此头部,提供资源的一个唯一标识符(通常是内容的哈希)。
- If-None-Match: 客户端在随后的请求中可以包括此头部,并使用上次响应中的 ETag 值。如果资源未被修改(ETag 未改变),服务器将返回 304 Not Modified 状态码。
ETag 和 If-None-Match 的组合提供了一种更精确的缓存验证机制,因为它们是基于资源内容而不是修改时间。
4. If-Match
- If-Match: 客户端发送此头部,要求操作仅在资源的 ETag 与指定值匹配时进行。如果不匹配,则服务器返回 412 Precondition Failed 状态码。
这个头部用于确保客户端操作的是特定版本的资源。
5. If-Range
- If-Range: 客户端发送此头部,与 Range 请求一起使用。如果资源未被修改(ETag 匹配或者未修改自 Last-Modified 日期),服务器将返回请求的范围。如果资源被修改,则服务器返回整个资源。
这个头部允许客户端仅在资源未被修改时执行部分请求,否则重新获取整个资源。
猜你喜欢
- 2024-11-13 「直击面试」- 搞定计算机网络,这些问题还没有我答不出来的
- 2024-11-13 HTTP面试题 高校毕业生就业难 面试题
- 2024-11-13 HTTP的起源与发展 http的具体内容是什么
- 2024-11-13 前端优化的步骤 前端优化的步骤包括
- 2024-11-13 Python最常见的170道面试题全解析答案(四)
- 2024-11-13 前端项目中 浏览器缓存的更新不及时问题及解决方法
- 2024-11-13 你还没弄懂浏览器的缓存机制吗? 介绍一下浏览器缓存
- 2024-11-13 如何使用缓存提高系统性能? 提高缓存速度
- 2024-11-13 网络相关面试题 网络相关面试问题
- 2024-11-13 为什么你做的H5开屏那么慢?H5首屏秒开方案探讨
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-