【问题标题】:How to prevent CSS caching on a web page?如何防止网页上的 CSS 缓存?
【发布时间】:2012-10-11 03:47:45
【问题描述】:

我正在学习开发 xhtml、css 网页。我经常在 CSS 中进行更改,但由于浏览器缓存,它不会反映在页面上,如果我手动清除 cahceing,它会显示最新的代码效果。有什么我可以在代码中放入让浏览器不缓存东西的东西吗?请给点建议

【问题讨论】:

  • 这个问题遍历了许多元标记以防止缓存:stackoverflow.com/questions/1341089/… 但最好的办法是修改从服务器返回的标头。
  • 如果你这样做是为了开发目的,最好关闭缓存,你使用的是什么浏览器?
  • @Matthew:很好的提示,您应该将其添加为答案。缺点当然是 - 你关闭了页面上的所有缓存,而不仅仅是 CSS。
  • @Matthew:不,我认为出于开发目的最好的选择是禁用浏览器上的缓存,而不是弄乱服务器设置。
  • @frenchie:与往常一样,这实际上取决于您的情况。在某些情况下,更改 html 可能会更好。例如,如果您正在测试浏览器的兼容性,那么您将不得不更改所有浏览器的设置。或者,如果您在不同的 PC 上向不同的人显示页面。

标签: asp.net .net html css xhtml


【解决方案1】:
  • 在 chrome 上按 F12 打开开发者工具
  • 然后右键单击重新加载按钮 - 单击(清除缓存和硬重新加载)

【讨论】:

  • 实际上 ctrl + F5 强制浏览器清除我所知道的每个浏览器中的缓存(显然不包括移动设备)。
  • 在普通浏览器中,页面加载后按一次应该足以刷新页面的缓存
  • Ankush Jain 我现在也在做同样的事情,但我不想每次都这样做,并且想要某种方式,我可能不必每次都这样做,默认情况下浏览器可能不会这样做。
  • 只按F5Ctrl+RGUI Refresh button 可能不会改变任何事情。考虑按(谷歌浏览器)Shift+F5Ctrl+Shift+RShift+ GUI Refresh button。另外,您真的会直接要求用户强制清除缓存吗?更多信息:ghacks.net/2018/01/24/… 取决于浏览器。
  • 这是我刚开始学习编码时给出的答案。每次当我得到这个答案时,我都会笑。
【解决方案2】:

这可以通过 .htaccess 文件来完成。将此代码放在您网站根目录下名为 .htaccess 的文件中:

<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>

【讨论】:

  • 这是如果您不想每次都手动刷新缓存。
  • 这在 asp.net 中不起作用;这不是标题在框架中的工作方式。
  • asp.net 有类似的机制,但使用 web.config 代替
【解决方案3】:

您可以将随机查询参数附加到样式表 url(例如通过 javascript 或服务器端代码)。 它不会改变正在加载的 css 文件,但会阻止缓存,因为浏览器检测到不同的 url 并且不会加载缓存的样式表。

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">

【讨论】:

  • 谢谢。只是为我节省了很多时间和麻烦。 +1
  • 函数 rs( $length = 8 ) { $chars = "abcdefghijklmnopqrstuvwxyz0123456789"; $rs = substr(str_shuffle($chars), 0, $length);返回 $rs; }
【解决方案4】:

您可以使用 GetVersion 方法创建类,该方法将返回您的应用程序版本(或例如构建号或构建日期)。

对于标记中的 asp.net 应用程序,您可以指定如下内容:

<script src="Scripts/some.js?version=<%= Common.GetVersion%>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/styles/Style.css?version=<%= Common.GetVersion%>" />

这将强制浏览器重新加载文件,因为静态文件的部分 URL 将在每次构建(或至少每个版本)时更改。

【讨论】:

  • 非常好的主意,这样当您推送新版本时,您的缓存就会“重置”
【解决方案5】:

如果您使用 Chrome 作为开发浏览器,有 2 个选项:

1) 当您按住 重新加载页面 按钮一秒钟时,将出现一个菜单并提供重新加载硬页面的可能性。

2) 在 Inspector 设置中,您可以强制浏览器从不缓存文件。

我认为通过在浏览器上禁用缓存比在服务器配置中处理这个问题更容易、更快且麻烦更少。

【讨论】:

    【解决方案6】:

    没有捕捉: 将可变字符串放在 css 路径的末尾,如下所示:

    <link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/>
    

    版本更改时刷新:

    <link rel="stylesheet" type="text/css" href="style.css?v=1.1.0"/>
    

    【讨论】:

      【解决方案7】:

      您可以在链接中使用随机版本 ID。例如使用这个:

      <link   href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%>   rel="stylesheet" type="text/css"/>
      

      其中 myStyle.css 是样式表文件,而 DateTime.Now.ToString("yyyyMMddhhmmss") 函数用于生成随机的不同版本 ID。 通过使用这个随机版本 id,浏览器会强制重新加载你的 css。

      【讨论】:

        【解决方案8】:

        不要使用 html 编写 &lt;link&gt; 标签,而是使用 php 代码。在最后的&lt;link&gt; 标记内使用php mt_rand() 函数,该函数将产生一个随机数,因此您的样式表将永远不会被缓存。 <?php echo "<link rel='stylesheet' type='text/css' href='style.css?'".mt_rand().">"; ?>

        【讨论】:

          【解决方案9】:

          由于 ASP.net 标记也包含在问题中,我想扩展 Maxim Kornilov 的回答 (https://stackoverflow.com/a/12992813/903783) 以及我如何使用他在 ASP.net 上制作特定于 webapp-build 的 URL 的想法MVC(他的示例使用 ASP/ASP.net WebForms 语法,而不是 MVC 和 Razor Pages 的新 Razor 语法):

          1) 在 Global.asax.cs 中添加到 webapp 的主类(称为 MvcApplication)

          #region Versioning
          
          public static string Version => typeof(MvcApplication).Assembly.GetName().Version.ToString(); //note: syntax requires C# version >=6
          
          public static DateTime LastUpdated => File.GetLastWriteTime(typeof(MvcApplication).Assembly.Location);
          
          #endregion
          

          someProperty => someReadOnlyExpression 语法只是 someProperty { get { return ... ;} } 自 C# 6 起可能的简写

          2) 在其 Content/_Layout.cshtml 文件中,我曾经在页脚上显示构建号和构建日期时间(基于 webapp 的主程序集):

          Version @ViewContext.Controller.GetType().Assembly.GetName().Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", @File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location)))
          

          我改成了更简单的:

          Version @somewebappname.MvcApplication.Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", somewebappname.MvcApplication.LastUpdated))
          

          3) 它通过 _Layout.cshtml 中的硬编码链接加载 CSS(仍在重构),我将其更改为:

          <link href='@Url.Content("~/Content/Site.css?version=" + somewebappname.MvcApplication.Version)' rel="stylesheet" type="text/css" /> 
          

          因此,如果在网页中单击鼠标右键,他们确实会查看他们看到的源代码:

          <link href='/Content/Site.css?version=2.1.5435.22633' rel="stylesheet" type="text/css" /> 
          

          由于虚拟参数版本,CSS url 是特定于版本的

          如果使用随机数,它会在每次页面加载时获取 CSS,这通常是不希望的,特别是如果您已经将新的 webapp 构建而不是单独的页面更改推送到 web 服务器(这样您就可以访问到可以注入 URL 的内部版本号)。

          请注意,要实现内部版本号的自动递增,在 Properties/AssemblyInfo.cs 我有(请参阅How to have an auto incrementing version number (Visual Studio)?):

          // Version information for an assembly consists of the following four values:
          //
          //      Major Version
          //      Minor Version 
          //      Build Number
          //      Revision
          //
          // You can specify all the values or you can default the Revision and Build Numbers 
          // by using the '*' as shown below:
          [assembly: AssemblyVersion("1.0.*")]
          //[assembly: AssemblyFileVersion("1.0.*")] //don't use boh AssemblyVersion and AssemblyFileVersion with auto-increment
          

          【讨论】:

            【解决方案10】:

            如果您使用的是 Google Chrome,只需按 CTRL + F5 即可强制刷新。 CSS 将更新为它在本地计算机或服务器上的状态。您也可以使用 .htaccess 文件,但这更像是对可能临时问题的永久解决方案。 CSS 缓存有助于加快页面加载速度,因此我不建议完全禁用它。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2014-03-01
              • 1970-01-01
              • 2013-02-20
              • 1970-01-01
              • 2016-02-12
              • 1970-01-01
              • 2020-05-27
              • 1970-01-01
              相关资源
              最近更新 更多