测试同学问我为什么每次让我清缓存（聊聊浏览器的缓存）

浏览器缓存详解：从强制到协商
最新推荐文章于 2024-07-24 07:24:51 发布
原创 最新推荐文章于 2024-07-24 07:24:51 发布 · 233 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#缓存

本文详细讲解了浏览器缓存的工作原理，包括强缓存和协商缓存，涉及Expires、Cache-Control、Last-Modified、If-Modified-Since以及Etag等关键概念，并给出了在实际开发中如何设置缓存的建议。

Python微信订餐小程序课程视频

https://edu.youkuaiyun.com/course/detail/36074

Python实战量化交易理财系统

https://edu.youkuaiyun.com/course/detail/35475

前言

最近一个好奇的测试同学问我，你们前端开发完成后，每次都让我们清缓存或者Ctrl+f5强制刷新，我能不能每次不用强制刷新，就能看到你们更新的内容呢。我说是可以做到的，我来跟你讲讲浏览器的缓存策略。我相信应该有不少的同学在工作中都会遇到这种情况，让你的测试同学清缓存等。

缓存

浏览器缓存是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘或内存中显示文档，这样就可以加速页面的阅览。

浏览器缓存主要有两类：强缓存：cache-control，Expires 缓存协商：Last-modified ，Etag。

所有的缓存策略都是通过http header里设置的。

浏览器缓存.png

强缓存

当浏览器去获取资源的时候，不给服务器发请求，直接从缓存中读取。

Expires（过期时间）

Expire

最低0.47元/天 解锁文章
聊一聊缓存如何进行测试
wang163cang的博客
05-07 353
在测试缓存之前需要了解缓存的作用都有哪些，缓存的好处是提高访问速度，减少资源消耗，提升用户体验，还能增强系统的扩展性。缓存测试不仅仅是验证数据是否被存储和检索，还要考虑一致性、性能、失效策略，功能测试包括缓存是否正确地存储和返回数据，命中与未命中的情况如何处理。然后要考虑性能测试，看看缓存是否真的提升了响应速度，减少了后端负载，异常情况下的测试也很重要，比如缓存穿透、雪崩、击穿这些常见问题。作为测试从业者如何进行测试缓存是个值得考虑的问题，缓存的更新，删除，过期，读取，删除数据过程中出现失败，缓存雪崩等。
客户端缓存——让浏览器帮你加速网站
最新发布
weixin_42587823的博客
04-01 908
在这个快节奏的互联网时代，我们都希望网页能够迅速打开、运行流畅。其实，这背后有一项神奇的技术在默默地帮忙——客户端缓存。今天，我就带大家轻松聊聊客户端缓存的那些事，看看它是如何通过减少重复请求、降低服务器压力，进而让你的网站变得更快、更好用的。
为什么要经常清理缓存?
weixin_34161083的博客
04-15 1754
有的用户在做自己网站的时候，经常会遇到这样一个问题: 上传了一张图片准备做网页背景、或者上传一个动画Flash装饰网页，然后又发现这个图片/动画不太满意，接着上传新的图片/动画来替换老的(使用了相同的文件名字)，结果发现新的图片没有出现在网页里，还是老的、没有更新的图片或者动画。 为什么会出现这个情况呢：这是由于计算机的缓存还保留着你以前上传的老文件，下面就...
简述清除浏览器缓存
weixin_51900414的博客
01-06 2959
浏览器缓存（也叫客户端缓存）是指浏览器在读取网页内容时，会将部分内容保存到电脑本地磁盘中，以便下次读取时能够直接使用这些之前缓存的内容，以提升浏览速度。这部分缓存的内容包括图片、CSS文件、JavaScript文件等。另外，浏览器缓存还会保存上次访问过的网页。当浏览器再次访问该网站时，浏览器直接从本地加载，不需要去服务端请求。减少服务器负担，提高网站性能加快客户端网页的加载速度，提升用户体验减少多余网络数据传输。
主管：清除浏览器缓存就解决的问题，你为什么还要报个bug？
自动化测试技术栈
08-25 1866
本文着眼于此，学习浏览器缓存的相关知识，总结缓存避免和缓存管理的方法，结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。
浏览器缓存的作用，如何使用，如何清除。
diechuo9466的博客
01-22 735
浏览器缓存就是你看网页的网页里的图片、音乐、视频文件，存在系统里，在你下次访问的时候若网页没有变化，则直接从缓存调用，来加快浏览速度。 一、作用： 浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。 主要目的：节约宽带资源。节约...
怎样在 Nginx 中配置基于请求客户端浏览器类型的缓存策略？
技术笔记
07-24 1130
通过以上的介绍，相信您对如何在 Nginx 中配置基于请求客户端浏览器类型的缓存策略有了一个较为清晰的认识。就像一位经验丰富的厨师，通过精心挑选食材和巧妙搭配调料，为顾客呈上一道道美味佳肴；我们也可以通过合理配置 Nginx 的缓存策略，为用户提供快速、流畅的网站访问体验。在这个数字化的时代，每一个细节都可能影响到用户的满意度和忠诚度。希望您能够运用好 Nginx 的强大功能，为您的网站打造出一套高效、个性化的缓存策略，让您的网站在竞争激烈的互联网世界中脱颖而出！🎉相关推荐🍅关注博主🎗️。
详细的聊一聊从输入一个url到页面展示都包含那些过程---知识点包含强缓存、协商缓存、缓存位置、DNS解析、F5强制刷新都做了什么、TCP三次连接、四次挥手过程、解析浏览器解析html的整个过程
m0_60622481的博客
03-01 1284
详细的聊一聊从输入一个url到页面展示都包含那些过程---知识点包含强缓存、协商缓存、缓存位置、DNS解析、F5强制刷新都做了什么、TCP三次连接、四次挥手过程
nginx服务器上发布的新版本代码总需要清除浏览器缓存问题
weixin_45748897的博客
06-22 6447
前端发布新代码后的浏览器缓存问题问题场景原因解决方法 问题场景 代码运行环境：nginx 现象：发布新版本代码时浏览器总是有上次缓存 结果：页面显示混乱、更新的功能还是上个版本等一系列问题 原因 浏览器缓存 解决方法 1. 用户自行清理浏览器缓存。 优点：清除浏览器缓存后可达到效果。 缺点：影响用户体验 2. 使用禁用缓存标签，实现禁用浏览器缓存。 优点：可达到效果。 缺点：每次请求页面都要重新请求，我们还是希望有缓存的 <meta http-equiv="Cache-Control" con
解决浏览器缓存问题
weixin_44552233的博客
04-07 7527
在编写代码的过程中，我们时常会因为一个问题而苦恼，当我们自己写好单独JS文件的时候，想要去更改，更改过后发现没有效果或者是报错，会让我们时常感到困惑，这到底是什么原因呢？ 其实这就是一种“浏览器缓存机制”所导致的。下面我来简单的说一下浏览器缓存机制所遇到的问题和处理方法。 在我们做项目时经常会出现验证码的功能，验证码也能很好的解释浏览器遇到这种缓存机制所存在的问题。 登陆过网页的都知道，验证码经...
细说前端打包发布后，浏览器缓存如何清理？其实只需要简单的webpack配置就行
wz9608的博客
03-07 8629
由此可见，没配置过的webpack输出文件名，每次打包产生的文件是一样的，所以浏览器缓存以为还是之前的js文件，就直接从缓存获取，在项目中配置webpack打包输出文件名还是很有必要的，是杜绝发布后存在的缓存问题的最有效方式，vite的配置。
如何解决前端上线之后，用户所在页面不刷新也会自动更新
朱远辉的博客
05-08 3578
当前所在页面不刷新会出现其他页面已经更新但当前页面没有更新的情况。这种情况下，通常需要通过前端代码来处理。一种解决办法是在前端代码中，添加一个定时器，定期去检查后台服务是否有更新。如果检测到新版本，可以使用 JavaScript 程序重新加载相应的资源，让用户可以获得新内容。
vueCli3.0 前端打包项目部署nginx后去除缓存
IT博客技术分享
02-22 4948
由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。让静态资源有缓存好办，问题在于怎么只让index.html不缓存。不推荐使用的原因是：升级时缓存问题倒解决了，但直接导致了用户每次访问你的程序时都要重新请求服务器，所有的静态资源都无法用缓存了，浪费流量，网络压力变大。vue项目每次打包上线后，浏览器需要强制刷新浏览器才能去除缓存，更新最新的版本，这样做的话，肯定不是很合理。
前端部署 自动提示用户页面刷新
qq_42164957的博客
11-27 769
前端部署 自动提示用户页面刷新
解决web项目发布新版本需要清除浏览器缓存的问题
热门推荐
chen_bo526的博客
01-10 2万+
一、bug起因 最近做公司的项目，对样式进行了修改后，新版本上线。测试那边经常说：修改的样式没有生效，我都是让他们清下浏览器缓存试试。可是到了正式环境，用户（也就是老总们）并不都一定知道清缓存这件事，导致一出问题就找我们，所以上面下死命令，要把这个问题解决掉。 二、解决方案 其实浏览器缓存是有好处的，第一次访问网站会从服务器获取静态的资源，然后将静态资源在游览器中缓存，下次用户在访问时，就直接获取...
你修改了样式，却要我手动清除游览器缓存，这是BUG！
程序员小奎的博客
01-09 1万+
1. 事件背景 公司网站首页的样式进行了大量改版，但是上测试线后，测试同事对我们开发说：怎么还是原来的效果，没有任何变化啊。听到这样的问题，我们第一反应是游览器缓存。你清除一下游览器缓存，或者换一个游览器。 手动清除游览器缓存虽然可以解决问题，但是用户根本不知道啥是缓存，也不会手动清楚游览器缓存。我不管！这个是BUG，不解决这个BUG 不能上线。 嗯… 你说的有道理，我马上去修改！ 2. 解决方案...
解决每次上线更新文件需要手动清除缓存的问题-------js 、css自动清除浏览器缓存方法
06-12 1万+
说明 1.分享页更新后，浏览器总是有缓存，须手动清理才能加载修改后的CSS和JS，故在加载地址后动态添加一个随机数（或时间戳）来确保每次加载的文件都不同来消除缓存。 2.在加载js文件时，被加载js文件字符串的结束标签 </script>会与本段js代码的开始标签<script>配对，解决办法参照下面示例代码。 清除css文件 <script> ...
浏览器缓存对测试结果的影响及解决方法
weixin_42874924的博客
09-04 701
浏览器缓存对测试结果的影响及解决方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值