了解浏览器缓存

news2024/9/20 15:32:28

什么是HTTP缓存，如何工作的？

当我们打开一个页面时，会向服务端发起很多次请求，如下图打开百毒首页，发起了HTML、各种图片、JS、CSS等资源共101次请求。这里面很多资源并不会频繁变化，每次打开页面都重新请求下载，就很浪费了。
在这里插入图片描述

浏览器缓存也称为HTTP缓存，HTTP缓存简单理解就是本地（浏览器）缓存了HTTP响应，以便后续复用，减少向服务端的请求。尤其对于一些静态资源，如图片、JS文件、CSS文件等资源，浏览器端缓存可以极大提升页面的加载速度，不用每次都都全部从服务端下载，也减轻了服务端的压力。
如下图，再次打开百度首页，可以看到很多图片、JS资源、CSS资源都是从缓存加载的，网页加载飞快。
在这里插入图片描述

缓存是一个很重要、很常用的技术，在IT系统中无处不在，基本原理都是就近存储可能要用的数据，用空间换时间，提升数据的加载效率。
● 前端浏览器缓存HTTP的响应。
● 后端服务的数据API也会有缓存，避免每次都访问数据库，数据库本身也会有缓存。
● CDN内容分发也是一种分布式的缓存。
● 计算机中的CPU、磁盘也都会有自己的缓存机制。

基于URL缓存资源

URL是定位资源的唯一路径，通常来说缓存也是基于URL地址的。但不仅限于URL，也支持以通过Header的字段Accept、Accept-Language 、 Accept-Encoding标记的不同内容进行缓存，可通过Vary字段来申明（/ˈveri/ 改变）

Vary: Accept-Language

存在什么地方？

主要存储在内存、磁盘上，具体存在哪则由浏览器来决定了，比如大文件可能会存在磁盘上，使用很频繁的资源可能会存储在内存中，或者都会存储。
在这里插入图片描述
● 内存 from memory cache：内存读取速度快，进程结束内存就释放了。
● 磁盘 from disk cache：读取速度稍慢（其实也是很快的），可以长久保存。

缓存规则

基本的缓存读取规则都是先从本地浏览器缓存查找，如果有且资源没有过期就用本地的，否则求去服务端请求。具体过程又分为强缓存、协商缓存：
● 第一次请求：本地没有，访问服务器获取响应，浏览器会缓存响应。
● 第二/N次请求：本地有缓存，缓存内容有效（没有过保质期），则响应状态码为200，直接使用本地缓存。—— 这个过程中，直接使用了本地的缓存内容称为“强缓存”。
● 第N次请求：本地有缓存，但缓存内容已过期，则会向服务端发起请求询问该资源是否有变化，服务端判断如果资源没变化，则返回304（资源没变化，可继续食用，没有body内容），浏览器使用本地缓存内容（并更新有效期）。如果服务端判断资源变了，则返回状态码200 + 新的资源，浏览器收到会更新缓存。—— 这个过程中，浏览器询问了服务端资源是否有效，进行了协商，称为“协商缓存”。
在这里插入图片描述
所以缓存的使用过程就是，先强缓存（本地缓存有效），再协商缓存。

304: Not Modified 资源未修改，客户端缓存了资源，重定向到本地。

强缓存：本地缓存

强缓存：浏览器自行决定的缓存处理机制，不需连接服务端。浏览器在请求资源时，先在浏览器缓存中查找，如果找到，且缓存有效期正常，则强缓存生效，直接从缓存中获取响应。否则就会使用协商缓存，向服务端发起请求。
所以这里关键就是判断缓存是否有效，是否在有效期内。关键（Header）字段就是：
● Cache-Control:max-age（HTTP/1.1）：缓存有效时长。

Cache-Control:max-age

Cache-Control 是HTTP/1.1中的一个Header字段，用来实现缓存的各种配置。常用指令max-age设置缓存的最大有效时长，用来替换Expires，如果同时存在则max-age优先。

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Date: Tue, 22 Feb 2022 22:22:22 GMT
Cache-Control: max-age=3600		//3600秒，表示一个小时内有效

Cache-Control常用指令：

指令说明
max-age缓存最大周期 (单位秒)，超过这个时间缓存被认为过期
no-cache强制重新验证，不会直接使用本地缓存，必须每次都询问服务器，就是后文的协商缓存
no-store不缓存，禁用缓存
public都可以缓存的公共资源，客户端、代理服务器都可以缓存
private个性化的、私有化内容，每个用户请求URL相同但的内容不同的资源，只能客户端缓存，代理服务器不可缓存
must-revalidate过期后必须重新验证（revalidate /riˈvælɪˌdet/ 重新验证）
immutable长时间缓存（/ɪˈmjuːtəb(ə)l/ 永恒的）
Cache-Control: private
Cache-Control: public, max-age=31536000  //1年有效期
Cache-Control: max-age=31536000, immutable
Cache-Control: max-age=0, must-revalidate  //立即失效，必须重新验证（协商缓存）

如果没有设置Cache-Control字段，采用“启发式缓存“，尽量的最大限度的使用缓存机制。

协商缓存：服务端验证

协商缓存：浏览器需要连接服务端，向服务端询问资源是否过期，服务端判断没过期就继续用本地缓存，否则返回新的资源。
1、✔️基本过程
● 请求HTTP资源时，先查找缓存，找到了但缓存过期，或缓存设置了no-cache，开始“协商缓存”。
● 发起一个HTTP请求，向服务端询问资源是否过期。
● 服务端收到请求后验证资源是否变更，若没变更则返回304（没有body，所以速度很快），告诉浏览器资源没有修改，可以继续使用本地缓存。否则返回200+新的资源。
2、✔️协商缓存的关键（Header）字段
● last-modified：资源最后修改时间。
● ETag：资源的唯一编码，文件内容变更后更新。
3、✔️触发协商缓存的条件
● Cache-Control:no-cache ：强制使用协商缓存。
● 本地缓存过期，或Cache-Control: max-age=0

last-modified 最后修改时间

last-modified 最后修改时间，服务端在Header上给出的资源最后修改时间。

  • 第一次请求资源时，服务端会在响应Header中会返回last-modified字段。
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Date: Tue, 22 Feb 2022 22:22:22 GMT
Last-Modified: Tue, 22 Feb 2022 22:00:00 GMT
Cache-Control: max-age=3600  //缓存有效期1个小时
  • 再次请求该资源时，浏览器发现缓存资源已过期（时间已超过1个小时），开始“协商缓存”。
  • 先发起一个（询问）HTTP请求，Header中加上if-modified-since（/ˈmɑːdɪfaɪd/ /sɪns/），值为上次的last-modified值。
GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
If-Modified-Since: Tue, 22 Feb 2022 22:00:00 GMT
  • 服务端收到请求，判断如果资源最后修改时间相同，认为资源没有变化，可以继续使用本地的缓存，则返回304（无body内容）。否则返回200+新的资源，并更新last-modified。
  • 浏览器收到304响应后，从本地缓存获取资源，并恢复其正常缓存状态，更新Last-Modified，生命延迟1小时。
HTTP/1.1 304 Not Modified
Content-Type: text/html
Date: Tue, 22 Feb 2022 23:22:22 GMT
Last-Modified: Tue, 22 Feb 2022 22:00:00 GMT
Cache-Control: max-age=3600
  • 如果浏览器收到200响应，同第一次请求资源一样，更新缓存资源。
    在这里插入图片描述

⛔缺点：如果1s内有多次文件修改，则会判断出现问题，因此就有了下面的ETag。

ETag 资源唯一标签

ETag，机制和last-modified类似，ETag是文件内容的一个唯一标识符，文件变更后会更新标识符，可以看做是文件内容的摘要。值是服务端自定义生成的，目的是为了标记文件内容的版本，可以用版本号、哈希值等。
● 第一次请求资源时，服务端在响应Header中会返回ETag字段。
● 协商缓存时发送HTTP请求，浏览器在Header中加上If-None-Match，值为上一次的ETag值。
● 服务端收到请求，读取If-None-Match值，判断如果匹配一致，文件没更新，则返回304。否则返回200+新的资源，并更新ETag。
● 浏览器收到304响应后，从本地缓存获取资源，并恢复其正常缓存状态，更新ETag。
● 如果浏览器收到200响应，同第一次请求资源一样，更新缓存资源。

HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: max-age=0
Connection: keep-alive
Content-Length: 114
Content-Type: text/html
Date: Wed, 19 Apr 2023 09:05:30 GMT
Etag: "639b0692-72"
Expires: Wed, 19 Apr 2023 09:05:30 GMT   //2023年4月19日09:08，今天早上，现在是下午5点多了。
Last-Modified: Thu, 15 Dec 2022 11:35:46 GMT

📢相比较而言，ETag要更科学、更准确一些。文件修改了并不代码内容一定有变化，还有就是最后修改时间的单位是秒，如果1秒内的多次变化就会判断失误。Etag 优先级高于 Last-Modified。

总结流程图

在这里插入图片描述

实践

缓存应用

● 不经常变的静态资源，如JS、CSS、图片推荐使用强制缓存，Cache-Control: max-age=31536000。
● HTML文档推荐使用协商缓存，比如SPA的入口页面可以使用Cache-Control: no-cache强制每次都使用协商缓存。
● Last-Modified、ETag可同时使用，ETag优先级更高，但Last-Modified还有额外的价值，可用来标识文件的修改时间。
● 合理定制不同资源文件的缓存机制、缓存周期。
● 缓存的Header配置都是在服务端，可以通过Nginx配置。

清除缓存

● 浏览器强制（忽略缓存）刷新：Shift + F5，Command + Shift + R（Mac）。
● 清除浏览器缓存：设置 > 历史记录 > 清除浏览数据。
● 浏览器禁用缓存：浏览器调试模式下 > 网络 > 开启“停用缓存”
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/705039.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

利用Python构建宁德时代、比亚迪、隆基绿能股票时间序列预测模型

利用Python构建宁德时代、比亚迪、隆基绿能股票时间序列预测模型

存货 import tushare as ts # 导包 import numpy as np import matplotlib.pyplot as plt from scipy.signal import find_peaks from scipy.stats import norm import datetime import pandas as pd import seaborn as sns # pip install seaborn import matplotlib.patches …
阅读更多...
Oracle报错：“Error in invoking target ‘agent nmhs’ of makefile...”

Oracle报错：“Error in invoking target ‘agent nmhs’ of makefile...”

前言：Oracle在安装过程中的报错一定要重视，这决定你后续是否能完成安装以及是否能使用。我这边会陆续汇总一些报错现象以及解决方案共享。 ##Install Product 86%报错信息 ：“Error in invoking target agent nmhs of makefile...”解决方案…
阅读更多...
意大利语翻译哪个公司比较专业？

意大利语翻译哪个公司比较专业？

据了解，意大利语除了通行于意大利之外，还通行于美国、加拿大、阿根廷和巴西等29个国家的，其应用极为广泛。随着意大利语翻译需求量的日益增加，也促进了意大利语与其它语言间的交流、转化和发展。那么，意大利语翻译难吗…
阅读更多...
抖音短视频矩阵号系统开源部署搭建分享（二）

抖音短视频矩阵号系统开源部署搭建分享（二）

开发背景：抖音seo源码，抖音矩阵系统源码。抖音获客系统源码，短视频矩阵系统源码开源搭建（MySQL数据库，NGINX，PHP7.4，MySQL5.7，redis） 技术要点： 服务器配置服…
阅读更多...
vue-router.esm.js:2248 Error: Cannot find module ‘@/views/dylife/ 报错解决

vue-router.esm.js:2248 Error: Cannot find module ‘@/views/dylife/ 报错解决

具体是展示 一直加载 控制台报找不到模块 webpack版本问题，webpack4 不支持变量方式的动态 import ，新版本需要使用 require() 来解决此问题。 return () > import(/views/${view}) 改写成 return (resolve) > require([/views/${view}], reso…
阅读更多...
python接口自动化（四）--接口测试工具介绍（详解）

python接口自动化（四）--接口测试工具介绍（详解）

简介 “工欲善其事必先利其器”，通过前边几篇文章的介绍，大家大致对接口有了进一步的认识。那么接下来让我们看看接口测试的工具有哪些。 目前，市场上有很多支持接口测试的工具。利用工具进行接口测试，能够提供测试效率。例如&…
阅读更多...
【C++】浅析C++中的虚函数

【C++】浅析C++中的虚函数

关于虚函数 Q1&#xff1a;观察一个类引入虚函数后&#xff0c;类会发生什么变化&#xff1f; 首先&#xff0c;创建一个空类A&#xff0c;并实例化出A的一个对象a&#xff0c;计算一下这个对象占用多少字节&#xff1a; #include<iostream> using namespace std;clas…
阅读更多...
02-阴影

02-阴影

使用阴影 1.给立方体添加castShadow&#xff0c;让立方体产生阴影 cube.castShadow true;2.创建一个地面用于接收阴影 const planeGemetry new THREE.PlaneGeometry(20, 30)const planeMaterial new THREE.MeshPhongMaterial({ color: 0xffffff })const plane new THREE.…
阅读更多...
LeetCode 2. 两数相加

LeetCode 2. 两数相加

文章目录 1. 题目描述2. 解题代码 1. 题目描述 链接&#xff1a;https://leetcode.cn/problems/add-two-numbers/ 2. 解题代码 public ListNode AddTwoNumber(ListNode l1, ListNode l2) {ListNode head new ListNode();ListNode cur head;int carry 0;while (l1 ! null…
阅读更多...
CIO 访谈｜财达证券 IT 基础架构云化转型思考与实践

CIO 访谈｜财达证券 IT 基础架构云化转型思考与实践

作为河北省证券行业的主力军&#xff0c;财达证券始终坚持用科技赋能业务&#xff0c;全方位推动信息化和数字化建设。在本期视频中&#xff0c;我们请到了财达证券首席信息官谢井民&#xff0c;分享如何基于 SmartX 超融合逐步实现 IT 基础架构云化转型&#xff0c;满足公司“…
阅读更多...
RPC框架(一)：扫盲

RPC框架(一)：扫盲

文章目录 一、概要二、RPC组成部分三、影响RPC框架性能的因素 一、概要 RPC作用&#xff1f; 让不同服务间调用方法像同一服务间调用本地方法一样 二、RPC组成部分 Client&#xff1a;RPC协议调用方 Server&#xff1a;远程服务方法的具体实现 Stub/Proxy&#xff1a;RPC代…
阅读更多...
基于SpringBoot的家庭理财记账系统的设计与开发

基于SpringBoot的家庭理财记账系统的设计与开发

1.引言 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个…
阅读更多...
Apache组件POI，将图片下载到Excel文件中并导出。

Apache组件POI，将图片下载到Excel文件中并导出。

在日常的工作中&#xff0c;有时我们会遇到需要将数据库表中图片字段下载到Excel中的需求&#xff0c;为方便各位小伙伴今后的开发工作&#xff0c;我将分享出自己写的代码&#xff0c;在文章末尾有我上传到 Gitee 上的 Demo案例&#xff0c;希望大家喜欢。 将图片下载到Excel文…
阅读更多...
[CKA]考试之Deployment管理pod扩缩容

[CKA]考试之Deployment管理pod扩缩容

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 扩容 deployment guestbook 为 6个pod 注意&#xff0c;如果题目要求先切换K8…
阅读更多...
低价高品质的头戴式降噪耳机，还支持主动降噪，QCY H4体验

低价高品质的头戴式降噪耳机，还支持主动降噪，QCY H4体验

每天办公的时候&#xff0c;我都喜欢戴上耳机听音乐&#xff0c;开会的时候也会方便一些。以前我用过无线入耳式耳机&#xff0c;但是戴时间长了会让耳朵很痛苦&#xff0c;因为室内也不算热&#xff0c;所以我觉得头戴式蓝牙耳机很合适&#xff0c;目前我用的是这款QCY H4头戴…
阅读更多...
Laravel 多字段去重count计数

Laravel 多字段去重count计数

Laravel 多字段去重count计数 背景&#xff1a;需要统计数据列表总条数&#xff08;字段1、字段2去重统计&#xff09; table&#xff1a;policy_view,去重字段admin_id和permission 期望结果&#xff1a;count不含重复统计数据 解决思路&#xff1a; 语法&#xff1a;DISTI…
阅读更多...
appium下载安装及环境配置及夜神模拟器下载、nodejs安装

appium下载安装及环境配置及夜神模拟器下载、nodejs安装

appium所需要的环境有&#xff1a;jdk、android sdk、Nodejs、appium客户端 此次教程只针对于windows jdk、Android sdk已下载安装配置好环境&#xff0c;此次教程不再重复记录 jdk可看这篇博文jdk安装及环境配置 Android sdk 可看这篇 Android SDK下载与安装 一、Nodejs安装 …
阅读更多...
有哪些做任务赚佣金的平台 做任务挣钱的app

有哪些做任务赚佣金的平台 做任务挣钱的app

科思创业汇 大家好&#xff0c;这里是科思创业汇&#xff0c;一个轻资产创业孵化平台。赚钱的方式有很多种&#xff0c;我希望在科思创业汇能够给你带来最快乐的那一种&#xff01; 做任务赚佣金的平台&#xff1f;做任务赚钱一直是一种流行的赚钱方式。现在有无数的app可以通…
阅读更多...
优化细节令人惊叹，用户体验直接拉满！你的App也能如此丝滑！

优化细节令人惊叹，用户体验直接拉满！你的App也能如此丝滑！

启动时间是App使用者的第一体验&#xff0c;很多大厂都通过A/B实验论证启动速度的优化可以带来用户留存的显著收益&#xff0c;尤其是体量大的用户&#xff0c;启动时间缩短一点&#xff0c;留存增长一点&#xff0c;那就带来了非常大的收益。因此&#xff0c;启动性能优化一直…
阅读更多...
济南中医风湿病医院受邀参加北坦街道“学习二十大 奋进新征程”主题党日活动

济南中医风湿病医院受邀参加北坦街道“学习二十大 奋进新征程”主题党日活动

为学习贯彻党的二十大精神&#xff0c;中共天桥区北坦街道工作委员会于近日特组织开展“学习贯彻二十大精神 凝心聚力奋进新征程”联合主题党日活动&#xff0c;济南中医风湿病医院党支部预备党员卢雪梅同志受邀参加。 活动第一站&#xff0c;参观济南黄河文化展览馆。这是一部…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023