首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

即使在删除缓存/硬刷新之后,css也不更新

即使在删除缓存/硬刷新之后,CSS也不更新可能是由以下几个原因导致的:

  1. 缓存控制策略:浏览器在加载网页时会根据 HTTP 响应头中的缓存控制策略来决定是否使用缓存。如果服务器设置了较长的缓存有效期或者没有正确配置缓存策略,浏览器就会继续使用缓存的 CSS 文件而不去服务器重新请求最新的文件。
  2. 强缓存:浏览器会先检查是否存在强缓存,如果存在并且尚未过期,浏览器直接从本地缓存中加载 CSS 文件,而不会向服务器发送请求。可以通过在服务器响应头中设置 Cache-ControlExpires 字段来控制强缓存。
    • Cache-Control:设置为no-cache,浏览器每次都会向服务器发送请求验证文件是否有更新。
    • Expires:设置过期时间,在过期之前,浏览器不会重新请求最新的文件。
  • 协商缓存:如果强缓存失效,浏览器会向服务器发送请求,服务器会进行协商缓存验证,判断文件是否有更新。如果服务器返回的响应头中包含304 Not Modified状态码,表示文件未被修改,浏览器将继续使用本地缓存的文件。
    • 服务器可通过响应头中的 Last-Modified 字段和浏览器发送请求头中的 If-Modified-Since 字段进行协商缓存。如果文件未被修改,服务器返回304 Not Modified状态码,否则返回最新的文件内容。
    • 服务器还可使用 ETag 和浏览器发送请求头中的 If-None-Match 字段进行协商缓存。ETag 是文件的唯一标识符,如果文件未被修改,服务器返回304 Not Modified状态码,否则返回最新的文件内容。
  • CDN 缓存:如果网站使用了 CDN(内容分发网络),CDN 服务器也会进行缓存。即使在删除缓存/硬刷新浏览器缓存后,CDN 服务器可能仍然返回缓存的 CSS 文件。可以尝试在 CDN 控制台手动刷新缓存。

针对这个问题,可以考虑以下解决方案:

  1. 修改缓存控制策略:在服务器的响应头中设置合适的缓存控制字段,如Cache-ControlExpires,使浏览器每次都去服务器验证文件是否有更新。
  2. 使用版本号或哈希值:在 CSS 文件的 URL 中加入版本号或哈希值,每次更新文件时修改 URL,强制浏览器重新请求最新的文件。
  3. 文件指纹:将 CSS 文件名与内容的 MD5 值或其他哈希算法的结果关联起来,并将关联结果作为文件名,确保每次文件内容变化都能得到新的文件名。
  4. 利用构建工具:使用构建工具(如Webpack)自动添加版本号或哈希值,将 CSS 文件和其他静态资源打包,并生成具有唯一文件名的文件,确保每次更新都会生成新的文件。

在腾讯云的产品中,可推荐使用以下相关产品:

  • CDN 加速:腾讯云 CDN(https://cloud.tencent.com/product/cdn)可提供全球分布式加速服务,提高网站的访问速度和用户体验。
  • 对象存储:腾讯云对象存储(https://cloud.tencent.com/product/cos)可用于存储静态资源文件,支持自定义缓存配置,可配合 CDN 使用,提供高性能的文件存储和分发能力。

以上答案仅供参考,具体的解决方案需要根据实际情况和使用的技术栈来进行选择和实施。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTTP 缓存最佳实践和 max-age 带来的陷阱

通常情况下,当我们对 HTML 进行重大修改时,很可能会修改 CSS 以反映新的结构,并更新 JS 以适应样式和内容的变化。这些资源是相互依存的,但缓存标头无法表达这一点。...更糟糕的是,浏览器经常会从缓存删除一些内容,而它并不知道 HTML、CSS 和 JS 是相互依存的,所以它会很乐意删除其中一个,而不删除其他的。...一旦它们被缓存,在下次更新 Service Worker 之前,我们将一直提供兼容的 CSS 和 JS。...与本地程序相比,这是一个巨大的优势,本地程序中,即使是很小的改动也要下载整个二进制文件,或者涉及复杂的二进制差异,在这里,我们只需相对较少的下载就能更新一个大型网络应用程序。...如果我想避免这种情况,我会更新第一篇文章,使用 Cloudflare 的用户界面刷新 Cloudflare 的缓存副本,等待三分钟,然后另一篇文章中添加链接。

25020

李洋个人博客《mxlee》zblog主题-梦想家(精品推荐)

PS:更新主题之后,点击模块管理,删除主题插件自带模块(全部),然后重新点击启用主题(生成新模块),最后后台首页“清空缓存并编译模板”然后前台强制刷新即可。...V、优化轮播js和css代码,更新主题之后,需要前往后台首页点击“[清空缓存并重新编译模板]”,然后打开主题设置,轮播设置,点击右侧修改,生成新轮播框架,然后首页强制刷新即可。...--、修改和优化网站侧栏部分调用数据,侧栏留言评论生成缓存方式改为(审核成功和删除评论),如果你发现侧栏的留言评论没有及时更新,请随意点击评论加入审核,通过审核,或者任意删除一垃圾评论即可更新。...--、侧栏的留言评论需要审核成功或者删除评论之后即可生成新的缓存txt文件。 --.修改精选导读样式表,建议超过4篇。 --、修复三级菜单移动端无法点击的BUG。...--、还有啥我忘了,更新就是了(自己修改过源码的朋友你更新,否则修改的会被替换) --、删除logo扫光特效(部分机器暂用CPU过高,如果喜欢可以找我可以设置自定义css样式,代码在下面)  CSS

2.1K20

浅谈浏览器缓存

比如QQ推广上的css资源,max-age=3600,也就是说缓存有效期为3600秒(也就是1h)。于是1小时内都会使用这个版本的资源,即使服务器上的资源发生了变化,浏览器不会得到通知。...s-maxage(单位为s)同max-age,只用于共享缓存(比如CDN缓存)。 比如,当s-maxage=60时,在这60秒中,即使更新了CDN的内容,浏览器不会进行请求。...no-cache 指定缓存响应,表明资源不进行缓存,但是设置了no-cache之后并不代表浏览器缓存,而是获取缓存前要向服务器确认资源是否被更改。...一般情况下,两者会配合一起使用,因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时,浏览器会忽略缓存继续向服务器发送请求,这时Last-Modified/ETag将能够很好利用304,从而减少响应开销...Cache-Control:Public之后,能够对HTTPS的资源进行缓存,参考《HTTPS的七个误解》) POST请求无法被缓存 HTTP响应头中包含Last-Modified/Etag,包含

1.5K70

【利用无服务器云函数(SCF)】自动刷新COS中变更文件的CDN!

,把这些资源的缓存时间设置30天及以上。...某一天,自己的站点需要变更一下css样式,修改完之后扔到COS中,发现站点中的样式仍没有生效。最后想起是命中了CDN的缓存,因此需要到 CDN控制台 进行URL刷新。...现状 目前COS(对象存储)控制台是没有提供这样一个功能:当启用了CDN,COS中文件变更时(上传、删除)自动去刷新CDN的选项。 分析 马云说:世界是由懒人创造的。...上面提到的刷新的工作,一次还好,但每次更新站点的静态文件都需要去执行这样的操作,这样重复性的功能是一定要得到解决的,谁让我懒… 想了下,COS文件变更的场景分为 2 种: API上传 GUI上传(控制台...既然写了这篇东西,卖关子了,直接介绍下我们的主角:SCF(无服务器云函数),简单说,SCF能实现事件式的触发,让你的一段代码跑云上,无需自己去搭建服务器。

2.2K40

腾讯云cdn对wordpress博客加速解决腾讯云564错误

(推荐) 当有新文章或页面的发布或更新时清除之前的缓存文件。 首页额外检查。 (极少数情况下会停止对首页的缓存) (推荐) 当某页面有新评论时,只刷新该页面的缓存。...Autoptimize插件应该对应设置CDN,另外推荐 Autoptimize中 开启预先连接到第三方域(高级用户),写入静态域名。...类型 内容 刷新时间 全部 all 0天 文件类型 .woff2;.woff;.css;.js;.png;.ttf;.eot;.svg 60天 文件类型 .xml;.gz;.php 0天 缓存php....woff2;.otf;.ot;.svg;.ttf;.woff是wordpress主题的字体文件,应该缓存可以根据需要缓存html和首页。...从工程师的回复可以看到,即使套腾讯云CDN,wordpress的后台响应也是很慢的,甚至可能打不开。不考虑了服务器性能过低的因素,建议排查插件,一些代码质量不好的插件会严重影响后台的加载速度。

19.1K90

HTML5离线缓存技术

之后当网络处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 就像cookie一样,html5的离线存储需要服务器环境。...manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及缓存的内容)。...查资料得知:引入manifest的页面,即使没有被列入缓存清单中,仍然会被用户代理缓存。 好吧,那我把.appcache文件更新下,于是乎把头部的版本号修改一下#v02。刷新下页面还是没反应!...通过控制台我们能够窥探一二: 第一次刷新,应用程序缓存更新准备事件, ? 第二次刷新才会看到效果。 ?...站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存缓存中访问 当manifest文件发生改变时,资源请求本身会触发更新

3.7K70

WordPress使用Redis和opcache为网站加速教程

相信建站的朋友都十分关心网站速度问题了,玖柒的小窝一直强调极速优化这次词语,同时之前的很多文章中我简单的介绍了子比主题的关于速度优化的一些原理。...比如海报分享功能、一言功能、文章目录等功能:使用率较低,并且一般打开页面用户不会立即使用此功能。...大量的AJAX刷新加载功能,AJAX就是刷新加载内容,比如AJAX下一页,ajax tab等,有效的减少请求内容,提高页面加载速度,主题的AJAX功能全部使用在不影响SEO的内容中!...,如果需要实时更新可以设置为 0opcache.fast_shutdown=1(default “0”);OPcache更快速清理内存的机制,实际效果视环境而异 查看及分析 缓存安装好了之后,怎么查看效果呢...你可以测试一下,未开缓存以及开启缓存的实际效果。 image.png 最后温馨提醒: 主题更新或者更新重要内容请记得刷新缓存! 适当优化,如果未优化就能低于500毫秒那就不建议再做优化了

2.1K20

谈谈前端性能优化-面试版

Painting之后DOM、CSSOM、Render Tree都可能会被多次更新,比如JS修改了DOM或者CSS属性时,Layout和Painting就会被重复执行。...因为队列中可能存在影响到这些值的操作,即使没有,浏览器会强行刷新渲染队列。...SessionStorage中,这样即使刷新后数据不会丢失;还有一种场景:分页的表单在进行前进或后退时,如果将信息保存在SessionStorage中就不会丢失;设置和获取SessionStorage...因为队列中可能存在影响到这些值的操作,即使没有,浏览器会强行刷新渲染队列。...SessionStorage中,这样即使刷新后数据不会丢失;还有一种场景:分页的表单在进行前进或后退时,如果将信息保存在SessionStorage中就不会丢失;设置和获取SessionStorage

1.2K20

谈谈前端性能优化-面试版_2023-02-27

经过第一次Painting之后DOM、CSSOM、Render Tree都可能会被多次更新,比如JS修改了DOM或者CSS属性时,Layout和Painting就会被重复执行。...除了DOM、CSSOM更新的原因外,图片下载完成后需要调用Layout 和 Painting来更新网页。...; opacity配合图层使用,既不触发重绘触发重排; 原因:透明度的改变时,GPU绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果,并不需要整体的重绘。...因为队列中可能存在影响到这些值的操作,即使没有,浏览器会强行刷新渲染队列。...SessionStorage中,这样即使刷新后数据不会丢失;还有一种场景:分页的表单在进行前进或后退时,如果将信息保存在SessionStorage中就不会丢失; 设置和获取SessionStorage

77160

谈谈前端性能优化-面试版

Painting之后DOM、CSSOM、Render Tree都可能会被多次更新,比如JS修改了DOM或者CSS属性时,Layout和Painting就会被重复执行。...除了DOM、CSSOM更新的原因外,图片下载完成后需要调用Layout 和 Painting来更新网页。...;opacity配合图层使用,既不触发重绘触发重排; 原因:透明度的改变时,GPU绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果,并不需要整体的重绘。...因为队列中可能存在影响到这些值的操作,即使没有,浏览器会强行刷新渲染队列。...SessionStorage中,这样即使刷新后数据不会丢失;还有一种场景:分页的表单在进行前进或后退时,如果将信息保存在SessionStorage中就不会丢失;设置和获取SessionStorage

1.2K10

谈谈前端性能优化-面试版

Painting之后DOM、CSSOM、Render Tree都可能会被多次更新,比如JS修改了DOM或者CSS属性时,Layout和Painting就会被重复执行。...除了DOM、CSSOM更新的原因外,图片下载完成后需要调用Layout 和 Painting来更新网页。...;opacity配合图层使用,既不触发重绘触发重排; 原因:透明度的改变时,GPU绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果,并不需要整体的重绘。...因为队列中可能存在影响到这些值的操作,即使没有,浏览器会强行刷新渲染队列。...SessionStorage中,这样即使刷新后数据不会丢失;还有一种场景:分页的表单在进行前进或后退时,如果将信息保存在SessionStorage中就不会丢失;设置和获取SessionStorage

70110

谈谈前端性能优化--面试版

Painting之后DOM、CSSOM、Render Tree都可能会被多次更新,比如JS修改了DOM或者CSS属性时,Layout和Painting就会被重复执行。...除了DOM、CSSOM更新的原因外,图片下载完成后需要调用Layout 和 Painting来更新网页。...;opacity配合图层使用,既不触发重绘触发重排; 原因:透明度的改变时,GPU绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果,并不需要整体的重绘。...因为队列中可能存在影响到这些值的操作,即使没有,浏览器会强行刷新渲染队列。...SessionStorage中,这样即使刷新后数据不会丢失;还有一种场景:分页的表单在进行前进或后退时,如果将信息保存在SessionStorage中就不会丢失;设置和获取SessionStorage

72260

利用SCF+COS搭建Hexo

本项目主要有以下几个功能: 渲染Markdown文件为静态页面 将渲染的静态页面部署到COS的指定目录下 刷新CDN缓存 本项目的初衷是由于公司业务需要,加入平台的商户可以管理后台发广告、公告、文章等等.../css该目录对应的网站的css目录 /img该目录对应网站的img资源,并非用户的资源,请勿存放其他资源 /audio该目录对应网站的音乐资源,并非用户的资源,用户的音乐请存放到/res/\*的对应目录下...关于访问缓存 由于外部域名https://xxx.com开启了CDN加速,所以存在一定的缓存时间(默认设置为30天),这会导致即使系统渲染完source文件并上传部署到COS中,CDN缓存未过期前用户也无法查看最新的已更改的网页内容...为此,系统deploy页面完成后,触发SCF调用接口刷新CDN缓存,但即使这样CDN的缓存刷新时间存在大概5min延时。...关于文章资源和页面的删除 当用户将res目录下的资源删除时,不会触发任何事件删除已发布的页面,用户需自己实现在删除source文件时删除对应的已发布的页面静态页面。

1.5K132

Hexo自动生成及部署系统

本项目主要有以下几个功能: 渲染Markdown文件为静态页面 将渲染的静态页面部署到COS的指定目录下 刷新CDN缓存 本项目的初衷是由于公司业务需要,加入平台的商户可以管理后台发广告、公告、文章等等.../css该目录对应的网站的css目录 /img该目录对应网站的img资源,并非用户的资源,请勿存放其他资源 /audio该目录对应网站的音乐资源,并非用户的资源,用户的音乐请存放到/res/\*的对应目录下...关于访问缓存 由于外部域名https://xxx.com开启了CDN加速,所以存在一定的缓存时间(默认设置为30天),这会导致即使系统渲染完source文件并上传部署到COS中,CDN缓存未过期前用户也无法查看最新的已更改的网页内容...为此,系统deploy页面完成后,触发SCF调用接口刷新CDN缓存,但即使这样CDN的缓存刷新时间存在大概5min延时。...关于文章资源和页面的删除 当用户将res目录下的资源删除时,不会触发任何事件删除已发布的页面,用户需自己实现在删除source文件时删除对应的已发布的页面静态页面。

8.6K1915

HTML5离线存储原理

之后当网络处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 就像cookie一样,html5的离线存储需要服务器环境。...解析清单 开始之前要先了解下 manifest(即.appcache文件),上面的解析清单要怎么写。 manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及缓存的内容)。...通过控制台我们能够窥探一二: 第一次刷新,应用程序缓存更新准备事件 第二次刷新才会看到效果。...文件同源 当一个资源被缓存后,该浏览器直接请求这个绝对路径会访问缓存中的资源。...站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存缓存中访问 当manifest文件发生改变时,资源请求本身会触发更新

2.8K50

Z-BlogPHP开运锦鲤前来报道(更新说明及操作教程,必看文章)

V、修改博客轮播和右侧图文布局,轮播位置不变,右侧图文增加侧栏模块,随意拖拽,位置自定,采用缓存形式,更新主题之后需要随意编辑任意一篇文章来生成缓存文件(编辑删除也行,总之必须得有这个操作,否则右侧模块内容为空...,所以更改原接口,评论成功之后,即可更新一次缓存可以随意删除一个评论来更新侧栏留言评论的数据。...更新数据调用缓存,需要重新启用主题,你可以直接点击启用主题(锦鲤),可以先启用默认主题,然后重新启用新主题(需要删除模块管理-主题自带插件的读者墙栏目,不要拖拽到右侧侧栏(如果侧栏有那么请移除),因为新版已经删除此代码...文章的编辑(新建)和删除都会重新生成文章数据,发表和删除评论都会重新生成新的留言和读者墙缓存文件。哦对,有人可能会问,后台首页重新编译并清空缓存会不会更新?...2.如果留言更新,登录后台,评论管理,随便找一个评论,点击右侧审核,然后点击顶部审核管理,找到刚才的评论,点击审核通过,或者任意删除一个评论可。

3.3K30

HTML5学习-day02【悟空教程】

所以,传统的跳转翻页,刷新不会丢失状态。 结合两者 现在我们就可以想到,如果在Ajax更新页面局部内容的同时,地址栏的URL里更新状态参数,就可以做出更完美的Ajax翻页了。...现在可以刷新的状况下操作浏览器地址栏和历史记录了,那同一站点的普通链接跳转是否都可以转变为Ajax来提升使用体验?是的,而且已经有了pjax[]这些专门完成这个功能的作品。...) { appCache.swapCache(); //更新成功后,切换到新的缓存} 另外,用户想要更新缓存,可以通过删除缓存文件的方式来清除缓存。...站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存缓存中访问 当manifest文件发生改变时,资源请求本身会触发更新 整体介绍了一下appcache,接下来会对appcache...更新manifest之后,该js的访问得到更新 4.js和css,图片文件的本身的访问,均会进行checking 直接在地址栏输入一个缓存的js文件,console显示如下: Document was

1.7K30

webpack4.41+性能优化(高级篇)

不可用于生产环境的: 自动刷新更新 DllPlugin babel-loader的缓存优化 module: { rules: [ {...热更新:新代码生效,网页刷新,状态丢失 自动网页刷新状态会丢失 自动刷新会用到devServer 1.引入const HotModuleReplacementPlugin = require...如果每次刷新都会有网络请求,增加了后台负担;如果填写都表单有数据,网页刷新表单数据会丢失;如果你进了路由都子路由的子路由,层级比较深,而刷新后又回到了根路由… 开启热更新之后,需要热更新部分加上监听...// 增加,开启热更新之后的代码逻辑 if (module.hot) { module.hot.accept(['....,直接取本地缓存,当内容变化之后contentHash变化,缓存失效,再发起请求拉去新的文件。

71810

简单几步,利用Serverless,让COS中文件变更自动刷新CDN

,把这些资源的缓存时间设置30天及以上。...某一天,自己的站点需要变更一下css样式,修改完之后扔到COS中,发现站点中的样式仍没有生效。最后想起是命中了CDN的缓存,因此需要到 CDN控制台 进行URL刷新。...上面提到的刷新的工作,一次还好,但每次更新站点的静态文件都需要去执行这样的操作,这样重复性的功能是一定要得到解决的,谁让我懒......要实现自动刷新CDN,则需要用到CDN的 刷新URL的API 。 API上传 如果你是代码里去上传静态资源的,那么你是能够知道文件上传的时刻的,文件传完后去调用CDN的API则完成工作。...既然写了这篇东西,卖关子了,直接介绍下我们的主角:SCF(无服务器云函数),简单说,SCF能实现事件式的触发,让你的一段代码跑云上,无需自己去搭建服务器。

10.1K4617

Webpack知识点速记

这意味着,如果在项目中使用类似css-loader并导入CSS文件,则需要将其添加到 side effect 列表中,以免在生产模式中无意中将它删除: { "sideEffects": ['*.css...模块热更新是Webpack是的一个功能,它可以使得代码修改以后不需刷新浏览器就可以更新,是高级版的自动刷新浏览器。devServer通过hot属性可以控制模块热更替。...这个机制可以实现刷新浏览器而将新变更的模块替换旧的模块。.../client传给它的信息以及dev-server的配置决定是刷新浏览器呢还是进行模块热更新。...14.1.7 Dlls 使用DllPlugin将更新频繁的代码进行单独编译。这将改善引用程序的编译速度。即使它增加了构建过程的复杂度。

88920
领券