浏览器缓存工作原理是什么?

简介: 浏览器缓存工作原理是什么?

大家好,我是阿萨。经常看我文章的同学肯定发现了我昨天的文章标题写错了。本来是想写浏览器访问网址时发生了什么? 结果着急发送,写错了,把网址写成了缓存。错了就错了,也就没有修改。


今天给大家介绍下浏览器缓存工作原理。


浏览器缓存是一种在本地存储网页文件的技术,用于加速页面的加载速度,减少服务器的负载。这些文件可能包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片和其他多媒体内容。


浏览器缓存的工作原理主要涉及两个 HTTP 头:`Cache-Control` 和 `ETag/Last-Modified`。


1. Cache-Control


服务器在响应请求时,可以在 `Cache-Control` 头中指定该资源的缓存策略。例如:


Cache-Control: max-age=3600


上述响应头表示该资源在接下来的 3600 秒(1小时)内都是新鲜的,浏览器无需向服务器请求新的版本。


2. ETag/Last-Modified


对于一些可变资源,服务器会提供 `ETag` 或 `Last-Modified` 头以帮助浏览器验证资源的新鲜度。


- `ETag` 是资源的特定版本的标识符。如果资源发生更改,`ETag` 也会更改。

- `Last-Modified` 表示资源最后一次更改的时间。


当浏览器再次请求这个资源时,它会附带 `If-None-Match`(带有 `ETag` 值)或 `If-Modified-Since`(带有 `Last-Modified` 值)的请求头。


服务器收到请求后,会比较 `ETag` 或 `Last-Modified` 值,以决定是否需要发送全新的资源。如果资源没有更改,服务器会发送一个 `304 Not Modified` 响应,浏览器则会从缓存中加载资源。


例子


假设你在浏览一个网页,这个网页有一个 CSS 样式表。第一次请求这个样式表时,服务器可能会回应:


http

HTTP/1.1 200 OK

Cache-Control: max-age=3600

ETag: "12345"


浏览器将这个响应(包括 CSS 文件和 HTTP 头)存储在本地缓存中。在接下来的一小时内,如果网页再次需要这个 CSS 文件,浏览器会直接从缓存中加载,而不是向服务器发送请求。


一小时后,如果网页再次需要这个 CSS 文件,浏览器会向服务器发送一个请求,包含 `If-None-Match` 头:


GET /style.css HTTP/1.1

If-None-Match: "12345"


服务器会比较 `ETag` 值。如果 CSS 文件没有更改(即 `ETag` 值仍然为 "12345"),服务器会回应:


HTTP/1.1 304 Not Modified


这时,浏览器知道缓存的 CSS 文件仍然是最新的,会直接从缓存中加载。如果 CSS 文件已经更改,服务器会发送新的文件和新的 `ETag` 值。

相关文章
|
24天前
|
缓存 应用服务中间件 数据库
【分布式技术专题】「缓存解决方案」一文带领你好好认识一下企业级别的缓存技术解决方案的运作原理和开发实战(多级缓存设计分析)
【分布式技术专题】「缓存解决方案」一文带领你好好认识一下企业级别的缓存技术解决方案的运作原理和开发实战(多级缓存设计分析)
27 1
|
24天前
|
存储 XML 缓存
【深入浅出Spring原理及实战】「缓存Cache开发系列」带你深入分析Spring所提供的缓存Cache功能的开发实战指南(一)
【深入浅出Spring原理及实战】「缓存Cache开发系列」带你深入分析Spring所提供的缓存Cache功能的开发实战指南
49 0
|
1月前
|
存储 缓存 Java
【Spring原理高级进阶】有Redis为啥不用?深入剖析 Spring Cache:缓存的工作原理、缓存注解的使用方法与最佳实践
【Spring原理高级进阶】有Redis为啥不用?深入剖析 Spring Cache:缓存的工作原理、缓存注解的使用方法与最佳实践
|
1月前
|
缓存 Java 数据库连接
mybatis 数据库缓存的原理
MyBatis 是一个流行的 Java 持久层框架,它封装了 JDBC,使数据库交互变得更简单、直观。MyBatis 支持两级缓存:一级缓存(Local Cache)和二级缓存(Global Cache),通过这两级缓存可以有效地减少数据库的访问次数,提高应用性能。
282 1
|
2月前
|
存储 缓存 关系型数据库
InnoDB 引擎底层存储和缓存原理
InnoDB 引擎底层存储和缓存原理
|
2月前
|
存储 安全 前端开发
浏览器跨窗口通信:原理与实践
浏览器跨窗口通信:原理与实践
41 0
|
2月前
|
消息中间件 JavaScript 前端开发
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
|
3月前
|
缓存 Go API
Go 实现一个支持多种过期、淘汰机制的本地缓存的核心原理
本文旨在探讨实现一个支持多种 过期、淘汰 机制的 go 本地缓存的核心原理,我将重点讲解如何支持多样化的过期和淘汰策略。
68 0
|
3月前
|
消息中间件 前端开发 Java
【面试题】前端必修-浏览器的渲染原理
【面试题】前端必修-浏览器的渲染原理
|
3月前
|
缓存 NoSQL Java
Spring Cache 缓存原理与 Redis 实践
Spring Cache 缓存原理与 Redis 实践
146 0

热门文章

最新文章