前端缓存/浏览器缓存机制

最新推荐文章于 2024-08-07 10:01:30 发布
最新推荐文章于 2024-08-07 10:01:30 发布
阅读量1k 收藏 2
点赞数
分类专栏： 网络协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HZ___ZH/article/details/109656621
版权
本文详细介绍了前端缓存/浏览器缓存的工作机制，包括缓存过程分析、强缓存（Expires与Cache-Control）和协商缓存（Last-Modified与ETag）。浏览器首先会尝试使用强缓存，如果失效则进行协商缓存，由服务器决定是否使用缓存。缓存位置包括Service Worker、Memory Cache、Disk Cache和网络请求，不同的缓存位置有不同的优先级和特点。
摘要由CSDN通过智能技术生成

前端缓存/浏览器缓存机制

1. 缓存过程分析

浏览器第一次向服务器发起该请求后拿到请求结果后,将请求结果和缓存标识存入浏览器缓存,浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。
在这里插入图片描述

  • 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
  • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

2.浏览器缓存方式

浏览器中的缓存作用分为两种情况，一种是需要发送HTTP请求，一种是不需要发送。

（1）强缓存

  • 不会向服务器发送请求,直接从缓存中读取资源。

  • 通过相应的字段来进行检查：在早期，也就是HTTP/1.0时期，使用的是Expires，而HTTP/1.1使用的是Cache-Control。

  • 强缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段,而不关心服务器端文件是否已经更新,这可能会导致加载文件不是服务器端最新的内容。

Expires：
即过期时间（Expires=max-age +请求时间），存在于服务端返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求

Expires:
最低0.47元/天 解锁文章
Y or Z
关注
专栏目录
前端浏览器缓存机制
weixin_45798469的博客
05-09 1349
目录1 缓存定义及其优点2 强缓存2.1 expires 和 Cache-Control3 协商缓存4 浏览器缓存位置 1 缓存定义及其优点 什么是缓存？ 当我们第一次访问网站的时候，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问的时候，网站就会从电脑中直接加载出来，这就是缓存。比如我们访问网页点击后退功能的时候，加载的非常快，这就是缓存的优势。 缓存优点： 1 缓存服务器压力，不用每次都去请求某些数据了 2 提升性能，打开本地资源肯定会比请求服务器更快 3 减少带宽消耗，当我们使用缓存时，只会产
前端缓存机制
weixin_33849215的博客
05-30 146
浏览器缓存步骤 1）浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器； 2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通...
理解 HTTP 状态码 304: Not Modified
最新发布
qq_45811217的博客
08-07 2598
服务器使用这个状态码告诉客户端，资源没有变化，因此客户端可以继续使用它的缓存副本，而无需重新下载资源。当客户端第一次请求该图片时，会下载并缓存该图片。​ • 在后续请求中，客户端会带上之前缓存的相关信息（例如 If-Modified-Since 或 If-None-Match 头部），以检查资源是否已被修改。如果自上次请求以来资源没有被修改，服务器会返回 304 Not Modified 状态码，告诉客户端可以继续使用缓存的资源。​ • 客户端收到 304 响应后，使用缓存中的资源，而不需要重新下载。
浏览器的缓存机制
weixin_34409703的博客
05-21 274
当浏览器请求资源时，会默认将资源存入缓存中，有两种读取缓存的方式from disk cache 和 from memory cache，当第一请求的时候会在内存和硬盘中同时备份文件，以便下次重复利用资源。当用户刷新页面，如果缓存的资源没有过期，那么直接从内存中读取并加载。当用户关闭页面后，当前页面缓存在内存中的资源被清空。当用户再一次访问页面时，如果资源文件的缓存没有过期，那么将从本地...
前端浏览器的缓存机制
LuckXinXin的博客
11-05 147
注意：该知识点属于性能优化领域，并且整一章节都是一个面试题 缓存可以说是性能优化中简单高效的一种优化方式了，它可以显著减少网络传输所带来的损耗。 对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 接下来的内容中我们将通过以下几个部分来探讨浏览器缓存机制： 缓存位置 缓存策略 实际场景应用缓存策.
前端基础-浏览器缓存/HTTP缓存机制(面试常考)
热门推荐
LYFlied的博客
03-28 1万+
浏览器缓存/HTTP缓存机制(面试常考) HTTP报文 HTTP请求(Request)报文 HTTP响应(Response)报文 缓存过程分析 缓存规则 1.强制缓存 1.1Expires 1.2 Cache-Control 2. 缓存存储 3.协商缓存 3.1 Last-Modified / If-Modified-Since 3.2 Etag / If-None-Match 四、不同刷新的请求执行过程 强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存
前端性能优化(二)——浏览器缓存机制
2401_84435739的博客
04-27 865
对于网站运营者或者访问网页的用户，带宽就代表着 money ，过多的消耗带宽，我们服务器配置就得升级，使用浏览器缓存之后，就会减少网络流量，降低运营成本。2、降低服务器压力使用浏览器缓存之后，除第一次访问需要向服务器请求网站全部资源，后续访问可以重复使用浏览器本地缓存，减少对服务器的请求，间接降低服务器的压力，同时，搜索引擎的爬虫也会根据缓存过期机制降低抓取的频率，也可以降低服务器压力。3、减少网络延迟，加快网页加载。
前端更新需要清空浏览器缓存_浏览器缓存机制分析及前端缓存清理
weixin_39622760的博客
12-24 2579
浏览器缓存机制分析及前端缓存清理发布时间：2018-06-03 16:56,浏览次数：857本文主题：理清浏览器的缓存机制的内部逻辑，并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面的时候都会遇到一个问题，就是明明页面已经更新了，但是浏览器浏览页面并没有变化，那么如何解决这个问题呢？事实上，这个问题各种搜索引擎搜索之后会发现有很多的方案，但不一定有效，一般的解决方案有以下的两种：1：添加...
前端面试必刷/跨域/浏览器工作原理/Vue/React/性能优化
12-06
此外，了解浏览器缓存机制，如HTTP缓存（强缓存和协商缓存）以及Service Worker的应用，能够显著提升网页加载速度。 接下来，我们来探讨Vue和React这两个主流的JavaScript框架。Vue以其简洁易学的API和组件化思想受...
JS实现前端缓存的方法
10-19
主要为大家详细介绍了JS实现前端缓存的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于angularJs清除浏览器缓存的方法
10-18
主要介绍了关于angularJs清除浏览器缓存的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端本地缓存机制
qq_64469057的博客
12-29 657
缓存
浅谈下前端缓存机制
mr_japson的博客
08-23 314
由于是本人的演讲内容摘录，所以上下文衔接有些抽象，适合有基础的阅读： 先附上本人喜欢的由腾讯团队维护的技术网站： http://www.alloyteam.com/category/webdevelop/ 引言：在项目中遇到了IE浏览器因缓存问题未能成功向后端发送GET类型请求的bug。 导出：性能优化之一——合理使用缓存 在前端开发中，性能一直都是被大家所重视的一点，然而判...
前端缓存
稻草人
09-18 679
1、缓存web缓存
五分钟了解前端缓存机制
weixin_34250434的博客
10-31 330
前言 任职一年多，经常有测试问我：哎呀，测试环境没看见更新啊。我通常会回复清缓存刷新页面就好了。至于缓存机制，因涉及到前后端，也没去深究。 但是客户不会每次清缓存再访问公司的网站，难道要我们逐个客户打电话过去：麻烦清下缓存，我们更新文件了？理想的情况应该是，我们每次上线版本，客户都能第一时间获取到最新的页面。 因而这次我通过node搭建服务器来搞清前端缓存到底是怎么运作的。 缓存机制 类型 缓存分...
一文彻底搞懂前端缓存机制
hellocoder2029的博客
03-15 1417
2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；当强缓存未命中时，浏览器就会发送请求到服务器，服务器会验证协商缓存是否命中，如果协商缓存命中，请求返回的http状态为304，并会显示说明Not Modified，浏览器收到该返回后，就会从缓存中加载了。
前端缓存详解
huangpb的博客
09-26 6983
前言 缓存机制无处不在，有客户端缓存，服务端缓存，代理服务器缓存等。 一、按缓存位置分类 按缓存位置分类，可以分为：Service Worker，Memory Cache，Disk Cache。 在 Chrome 浏览器开发者工具的Network的Size栏会出现的四种情况： from ServiceWorker from memory cache from disk cache ...
浏览器缓存机制详解：从HTTP头域到缓存策略
浏览器缓存机制是前端性能优化的重要一环，通过合理利用缓存，可以显著提升网页加载速度，减少网络带宽消耗。本篇文章主要探讨了HTTP请求和响应头域中的关键缓存相关字段，以及它们如何影响浏览器的缓存策略。 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值