关于浏览器缓存最详细解析-德赢Vwin官网网

简述

浏览器缓存即 http 缓存，将请求过的数据（html、css、js）存在浏览器（本地磁盘）中，当再次访问这些资源时可以从本地直接加载，减少服务端请求

服务端通过设置 http 响应头来决定缓存策略（缓存方式）

缓存流程

第一次请求需要的资源，服务器返回资源的同时在 response hearder 响应头中添加了缓存策略，告诉浏览器缓存规则（比如以何种方式缓存，缓存信息。。.。。.），此时就进行缓存了

第二次如果是请求相同资源，那么就会检查缓存里面是否有相应资源，有的话直接取用，具体方式请看后续

缓存位置

先谈谈缓存都会存在哪，然后引出缓存方式进一步说明

Service Worker

可以让我们自由控制缓存哪些文件、如何匹配/读取缓存，并且缓存是持续性的

离线缓存调用的就是 Service Worker

Memory Cache

内存中的缓存，关闭页面就会失效

Disk Cache

硬盘中的缓存

资源存进硬盘的情况

大文件（大概率）

此时内存利用率较高

Push Cache

推送缓存：以上三种缓存都没命中时，才启用

它只在会话（Session）中存在，会话结束就会释放，缓存时间很短

如果以上四种缓存都没被命中，就只能发起请求了。所以为了性能考虑，选择好缓存方式极为重要

缓存方式

缓存方式就两种

强缓存（默认优先）

协商缓存（协商，也就是商量的意思）

先介绍一个响应头中重要的值 Cache-Control，用于控制网页缓存，有如下主要取值

public：响应可以被客户端和代理服务器缓存

private（默认取值）：响应只有客户端可以缓存

no-cache：直接进入协商缓存阶段

no-store：不进行任何缓存

max-age = xxx（xxx 代表数字）：缓存内容在 xxx 时间后失效

must-revalidate：告诉浏览器

浏览器查看响应头的方法（新版 edge 为例）：右键选择 “检查”，进入开发者模式，选择 “网络” ，选中具体选项（如果没有可以 f5 刷新页面），点击 “标头”

强缓存

概念：检查强缓存，不发送 http 请求直接从缓存里读取资源。一般强缓存都会设置有效时间，过期就失效

触发条件，Cache-Control 的值 max-age = xxx

响应头 Expires 存储缓存过期时间（如果修改本地时间会造成缓存失效）

协商缓存

概念：需要携带缓存标识（tag）发送 http 请求，由服务器判断是否使用缓存。服务端会进行判断，若资源已发生变化，则返回新资源，否则告诉浏览器启用缓存即可

触发条件（两个）

强缓存过期

Cache-Control 的值包含 no-cache

缓存标识由响应头 Last-Modified、ETag 决定（简述一下）AX

Last-Modified 用于记录资源最后修改时间，浏览器再次请求时用来对比时间，以此判断资源是否变化

ETag存储一个字符串（类似标识符），只要资源修改了标识符就会变动，以此判断资源是否变化

用户操作对缓存的影响

地址栏输入网址：浏览器会查找

点击刷新按钮或按 f5 刷新：会使用缓存

ctrl+f5 刷新：跳过缓存，直接请求新资源
编辑：lyn

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表德赢Vwin官网网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。举报投诉

缓存

缓存

+关注

关注
1

文章
239

浏览量
26669
浏览器

浏览器

+关注

关注
1

文章
1022

浏览量
35325

HTTP缓存头的使用本地缓存与远程缓存的区别

HTTP缓存头是一组HTTP响应头，它们控制浏览器和中间代理服务器如何缓存网页内容。合理使用HTTP缓存头可以显著提高网站的加载速度和性能，

发表于 12-18 09:41 •80次阅读

Web缓存的类型及功能分析

速度，降低了延迟，并提高了网站的可用性。 Web缓存的类型 Web缓存主要分为以下几种类型： 浏览器缓存（Browser Cache）功能：浏览

发表于 12-18 09:35 •110次阅读

AWTK 最新动态：支持浏览器控件

导读AWTK浏览器控件，基于webview项目实现，将浏览器嵌入到AWTK应用程序中，让开发者可以方便的集成在线帮助和调用地图等功能。awtk-widget-web-view是基于webview实现的AWTK浏览器控件，使得AW

发表于 11-20 01:05 •187次阅读

写一个Chrome浏览器插件

一、什么是浏览器插件 浏览器插件是依附于浏览器，用来拓展网页能力的程序。插件具有监听浏览器事件、获取和修改网页元素、拦截网络请求、添加快捷菜单等功能。使用

发表于 11-18 17:12 •292次阅读

跨域问题是由浏览器的同源策略造成的

浏览器

jf_62215197
发布于 :2024年08月27日 07:51:42

不只是前端，后端、产品和测试也需要了解的浏览器知识（二）

继上篇《不只是前端，后端、产品和测试也需要了解的浏览器知识（一）》介绍了浏览器的基本情况、发展历史以及市场占有率。本篇文章将介绍浏览器基本原理。在掌握基本原理后，通过技术深入，在研发

发表于 08-12 14:32 •331次阅读

不只是前端，后端、产品和测试也需要了解的浏览器知识

一、我们为什么要了解浏览器？ 1. 对于前端开发者 1.浏览器是用户体验的第一线。我们需要了解浏览器的工作原理，才能有效地设计和实现用户界面，确保良好的用户体验。 2.好的产品需要考虑浏览器

发表于 07-01 18:03 •462次阅读

Opera浏览器引领潮流，全球首接端侧AI大模型

昆仑万维旗下海外平台Opera宣布，其旗舰浏览器Opera One和游戏浏览器Opera GX将正式接入端侧AI大模型，成为全球首个实现这一突破的主流浏览器。

发表于 06-03 09:18 •733次阅读

Microsoft Edge浏览器将去除争议性关注创建者功能

据悉，2019 年 The Verge 曾披露 Edge 浏览器的关注创建者功能存在严重漏洞，该功能使得用户在浏览网站时，浏览器将其访问记录上传至必应搜索引擎。

发表于 05-13 15:24 •447次阅读

Edge浏览器关闭Microsoft Rewards扩展原因揭晓

据报道，近期德国等地的Microsoft Edge浏览器用户发现，安装或启动Microsoft Rewards扩展后，会出现“右上角扩展被Edge浏览器禁用以保障您的浏览器安全”的提醒窗口。

发表于 04-10 09:55 •801次阅读

Mozilla Firefox浏览器推出Text Fragments功能，提升用户体验

早在2020年，谷歌即在Chrome浏览器中推出了“Scroll to Text Fragments”功能，而Edge、Opera、Brave、Vivaldi以及苹果Safari等基于Chromium的浏览器也已支持这一便捷特性。

发表于 04-08 10:21 •615次阅读

鸿蒙实战开发：【浏览器制作】

使用[@ohos.systemparameter]接口和[Web组件]展示了一个浏览器的基本功能,展示网页，根据页面历史栈前进回退等。

发表于 03-19 17:47 •580次阅读

安卓版Chrome浏览器现已支持第三方密码管理器调用

据报道，数据解析专家Leppeva64近日在安卓版谷歌Chrome浏览器的源代码中透露，该浏览器已在安卓平台上实现了对第三方密码管理器的调用支持，并覆盖Stable、Beta及Cana

发表于 03-19 11:04 •694次阅读

Windows 11预览版安装受阻，微软提示更新设备或浏览器

该提示翻译如下：由于安全性考虑，您的设备或浏览器未能顺利连接至认证服务器。若您确非恶意行为者，请尝试更新相关设备或浏览器，以获取完整使用体验。

发表于 03-05 14:29 •1024次阅读

昆仑万维旗下Opera将推出全球首款非WebKit内核的iOS浏览器

近日，昆仑万维旗下的国际知名浏览器品牌Opera宣布，将针对欧洲的iPhone和iPad用户推出一款全新的AI浏览器——Opera One。这款浏览器最大的亮点在于，它基于Opera自研的引擎，而非通常的WebKit内核，这在全

发表于 02-06 16:40 •5728次阅读