Chrome 如何防止浏览器缓存CSS文件?

xvw2m8pv  于 2023-08-01  发布在  Go
关注(0)|答案(5)|浏览(244)

当我创建一个页面,链接它到一个CSS文件,并在浏览器中打开它,它工作得很好。但是如果在很短的时间内进行更改并再次刷新页面,则不会反映更改。但是过了一段时间,当我再次刷新页面时,更改出现了。
因此,浏览器会以某种方式缓存CSS文件,并在一段时间后过期。如何使浏览器缓存没有CSS或HTML文件。如果我能在特定的域上阻止它就更好了。

我在Ubuntu上,使用Chrome和Firefox,试图阻止浏览器在'localhost'上缓存CSS文件。如何做到这一点...

谢谢...

w1jd8yoj

w1jd8yoj1#

像这样简单的东西应该可以工作:

<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}">

字符串
只需在服务器端代码中将{CURRENT_TIMESTAMP}替换为实际的时间戳即可。这使得浏览器认为这是一个新的文件,因为查询字符串,它将被再次下载。您还可以使用文件的实际修改时间(如果使用PHP,则为filemtime('/path/to/css/screen.css')),这应该可以防止不必要的下载。

wnvonmuf

wnvonmuf2#

您可以通过按Ctrl+Shift+J打开开发人员工具,然后您会在右下角找到一个齿轮图标。当你点击它时,你应该看到一个选项来禁用缓存。

ecfdbz9o

ecfdbz9o3#

这将有助于了解网站是如何托管的,因为您可以在大多数Web服务器中配置它。
另外,引入一个缓存破坏机制是一个好主意,当您更改CSS文件的内容时,该机制将修改到有问题的CSS文件的链接。浏览器将重新加载CSS文件,因为HTML引用不同的URL。
缓存破坏机制的一个很好的例子是ruby on rails 3.1资产管道,如果浏览器支持,它也会缩小文件并gzip它们:
Rails 3 - Asset Pipeline -- What does it mean to me?
http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/

a1o7rhls

a1o7rhls4#

一种看似不优雅但坚如磐石的方法是,当内容发生变化时,为资产赋予一个新名称。这解决了所有用户的问题,而不仅仅是你:

<link rel="stylesheet" src="/css/screen_034.css">
<link rel="stylesheet" src="/css/screen_035.css">
<link rel="stylesheet" src="/css/screen_036.css">

字符串
或者可能(但在IDE中更改更痛苦,有时会导致与缓存无关的问题):

<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034">


在大规模的生产环境中,没有什么比这更好的了,在那里,一个旧的css文件的数百万个副本可能会存放在各种中间缓存或浏览器缓存中。有些客户机会忽略缓存控制头,而且您也不希望破坏缓存,至少在生产环境中不希望。
在开发中,您可以按Ctrl+Shift+J(Chrome)并关闭缓存。

hujrc8aj

hujrc8aj5#

如果不想缓存

var date = new Date().getTime();
document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="/styles.css?='+date+'">';

字符串

相关问题