前端解决js、css等浏览器缓存问题

最新推荐文章于 2024-08-22 11:33:27 发布
最新推荐文章于 2024-08-22 11:33:27 发布
阅读量4.1k 收藏 10
点赞数 3
分类专栏： 前端学习 文章标签： HTMl 浏览器缓存问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JxiaoZhang/article/details/90750998
版权

前景：近期公司做了一款针对IE8的产品，这就要求使用原生HTML+jQuery1.9。测试过程中发现每次发版都要清理浏览器缓存才能访问最新代码，这跟浏览器机制有关。

我们没办法要求用户每次更新版本之后清理浏览器缓存，所以要做的就是不使用浏览器缓存。

1.关于js、css在每次引用之后添加版本号，使其能区分版本：

<link rel="stylesheet" type="text/css" href="./reverse.css?v=2019060301">

<script src="./reverse.js?v=2019060301"></script>

2.关于HTML的缓存，在<head></head>中间加入以下代码：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

<meta http-equiv="Pragma" content="no-cache" />

<meta http-equiv="Expires" content="0" />

前端缓存页面处理方法
我不写文章，我只是文章的搬运工
09-09 1374
通常我们希望在应用发布后，浏览器能够加载最新的资源文件，而不是从缓存中读取过时的内容。可以为 HTML 文件设置较短的缓存时间，而为带有文件指纹的静态资源（如 CSS、JS）设置较长的缓存时间。每次发布新版本时，生成的资源文件名中的哈希值会改变，这样就避免了加载旧的缓存文件。• 文件指纹 是最简单且广泛使用的解决方案，与服务器的 Cache-Control 设置结合，可以很好地控制缓存问题。• CSS/JS 文件（带有指纹）：可以设置较长的缓存时间，因为文件名会变更，确保用户不会下载旧版本。
js、css、img等浏览器缓存问题的2种解决方案
12-02
细节决定成败！浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致服务端修改了js、css，客户端不能更新 方法一 生成随机数字 代码如下: [removed][removed] 缺点，浏览器缓存失去意义，每次都动态加载。 方法二 版本号控制,设置全局变量，每次发布前版本号加1 代码如下: [removed]“>[removed] 推荐这种做法，这种做法比较简单。缺点
js 浏览器缓存机制
weixin_30237281的博客
08-12 88
Web缓存是指一个Web资源（如html页面，图片，js，数据等）存在于Web服务器和客户端（浏览器）之间的副本。缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，...
前端性能优化(三)——浏览器九大缓存方法
2401_84094725的博客
04-15 982
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取题：常用算法》PDF完整版点击这里领取**[外链图片转存中…(img-5WiWWGF6-1713160366656)][外链图片转存中…(img-gWW3SeoM-1713160366657)]
前端性能优化(三)——浏览器九大缓存方法，如何快速学习前端开发
2401_84093860的博客
04-05 1660
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取。
深入理解浏览器的缓存机制
前端发动机
04-16 457
一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷...
js、css、img等浏览器缓存问题的2种解决方案.docx
01-20
在 Web 开发中，浏览器缓存是非常重要的一部分，它可以提高网站的加载速度和执行效率，但同时也带来了许多问题，例如当服务端修改了 js、css 等文件时，客户端无法更新，这就需要我们采取一些方法来解决这些问题。...
解决浏览器缓存问题【浏览器缓存JS文件导致的问题】
weixin_43286206的博客
08-19 1468
如果用户以前曾访问过系统，则浏览器将缓存系统的CSS和JS。在这些CSS和JS缓存过期之前，浏览器将仅从缓存中读取CSS和JS。如果在上面对css和js进行了修改，则这些修改不会在用户的浏览器中更改。前端避免js文件缓存后修改不生效；前端给js文件添加时间戳；浏览器缓存导致修改js文件不生效，需要清除缓存；
前端发版后后及时拉取最新版本代码， 解决浏览器缓存问题
最新发布
iOS逆向与安全
08-22 314
vue 默认配置，打包后 css 和 js 的名字后面都加了哈希值，不会有缓存问题，但是 index.html 在服务器端可能是有缓存的，需要在服务器配置不让缓存 index.html。proxy_set_header是nginx设置请求头给上游服务器，add_header是nginx设置响应头信息给浏览器。问题： 当修改了JS文件的内容并发布到线上时，用户的浏览器可能会因为缓存了旧的JS文件而不会立即加载新的代码。更新生产环境站点资源时，需要错开高峰期 ，涉及前端文件更新的，记得做站点缓存验证。
HTML页面自动清理js、css文件的缓存（自动添加版本号）
12-13
总的来说，自动添加版本号是解决浏览器缓存问题的有效手段，它可以确保用户始终能够获取到最新版本的CSS和JavaScript文件。通过JavaScript、服务器端语言或构建工具，开发者可以轻松地实现这一功能，从而提供更好的...
Vue进阶（幺捌柒）浏览器缓存问题解决
IT全栈 华强工作室
08-24 6830
vue 项目打包部署上线之后，每一次都会有浏览器缓存问题，导致系统用户访问上个迭代批次的旧资源（css/js资源），若当前迭代批次项目包中不存在旧资源，系统就是出现404错误信息，需要系统用户手动清除缓存才能解决以上问题，导致用户体验非常不好。浏览器缓存（Browser Caching）机制是为了节约网络资源提升页面渲染性能，浏览器在用户磁盘上会对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，进而提升页面性能。
前端发版解决缓存问题
qq_45660256的博客
01-24 983
当资源的强缓存失效时，浏览器将向服务器发送一个条件请求，询问是否可以使用缓存的资源。服务器会判断资源的版本是否有更新，如果没有更新，服务器将返回一个304状态码，浏览器会从缓存中加载资源。如果有更新，服务器会返回新的资源内容。当用户再次访问同一网页时，浏览器会尝试从本地缓存中加载这些资源，以减少页面加载时间和网络请求，提升用户体验。如果资源仍在有效期内，浏览器将直接从缓存中加载资源，而不会向服务器发送请求。2、在 main.js 中修改版本号，将版本号存在浏览器缓存中，如果版本号不一致，就重新加载。
WEB前端开发js，css文件浏览器缓存问题处理
小学程序员的博客
11-23 389
请求路径文件加版本号（简单粗暴有效） <script src="../js/common.js?v=1"></script> <script src="../js/mui.min.js?v=1"></script> <script src="../js/public.js?v=1"></script> 每次修改js，css文件后 一同修改版本号，前端就会请求新版本号的文件了 ...
HTML 解决css缓存
weixin_43814775的博客
07-26 470
HTMl 解决css 缓存
初学web——浏览器缓存
MiniTitan57245的博客
01-13 200
先阅读：https://www.cnblogs.com/520yang/articles/4807408.html 理解的一些关键内容：         第一次请求后，response的header；         本地操作不同操作的逻辑：                 不是刷新的操作，会判断是否超时；                 普通刷新发送的请求header中带用于判断是
html前后端缓存,前后端分离系列-缓存篇
weixin_29968283的博客
06-09 758
1.我们需要在静态文件返回给浏览器的时候header中的缓存变长，这样就可以在本地秒加载，省去了带宽和加载时间修改server.jsconst path = require('path');const Koa = require('koa');const send = require('koa-send');const Router = require('koa-router');const ap...
解决浏览器JS缓存问题的两种方法
weixin_34242658的博客
01-08 1255
2019独角兽企业重金招聘Python工程师标准>>> ...
前端性能优化：浏览器缓存与代码部署策略
"本文主要探讨前端性能优化中的一个重要环节——浏览器缓存，以及与之相关的代码部署策略。文章提到了不同类型的缓存响应状态，如200 OK (FROM MemoryCache)、200 OK (FROM DiskCache) 和 304 NOT MODIFIED，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值