Home / Questions / 63716
Accepted
Jorius
Asked: 2020-04-19 12:07:55 +0800 CST 2020-04-19 12:07:55 +0800 CST

如何避免缓存css和js文件

  • 772

最近在加载新版本的样式表（_ _通过一个简单的：.css.js

<link rel="stylesheet" href="/private/css/visual.css?v=1" />
<script src="/private/js/visual.js?v=1"></script>

但它并不总是对我有用，我必须不断更改值，v=1以便它加载相应文件的新版本

有什么方法可以正确防止缓存吗？

获取一个库、本机 javascript 代码、添加到我的文件中的内容，.css或者.js在我的服务器上进行更改、在我的机器上进行更改、浏览器设置等......并避免这个问题。

注意：缓存保留在本地并且已经托管在服务器/域上

更新：也许一开始我不是很清楚，虽然 JuankGlezz 的答案和衍生品在开发环境中帮助了我，但我正在寻找一个可以为我的最终用户服务而无需他们接触任何东西的答案......

javascript

8 Answers

  1. Best Answer

    这可以在生产和调试环境中使用，如果你是经常修改网页的 SCRIPT 和 CSS 的人之一，但你通常不保持浏览器控制台打开并且想要避免缓存，你可以添加以下内容HTML 中的行。

    <head>
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Last-Modified" content="0">
  <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
  <meta http-equiv="Pragma" content="no-cache">
</head>

    在 WordPress 中，要在 中添加标签，</head>我们必须编辑模板或主题，具体来说，我们必须编辑和标签header.php所在的文件。<head></head>

    在用 PHP 开发的应用程序中，您可以强制它不在浏览器中保存缓存，您可以使用以下行：

    <?php
  header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
  header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
?>

    如果您是开发人员并且不想添加前面的行，则可以避免来自浏览器控制台的缓存 (F12)。

    建议保持浏览器控制台打开（F12）并在网络选项卡中启用禁用缓存框

    启用网络选项卡中的禁用缓存复选框

    对于 Firefox，打开调试器控制台 (F12)

    1. 我们去工具箱选项
    2. 我们试图禁用 http 缓存

    在Firefox中启用禁用缓存复选框

    笔记：

    为此，控制台必须始终打开 (F12)，否则它将继续为Google Chrome和Mozilla Firefox保存缓存。
    调试领域最推荐的就是以隐身模式打开一个窗口。

    • 24

  2. 一种方法是当您引用放在末尾的 JavaScript 文件时?1。这意味着这?1是文件的某种版本控制，以便浏览器重新加载它并且不加载缓存的文件。例如：

    <script type="text/javascript"
    src="http://sitio.com/jsFiles/miArchivoJavaScript.js?123">
</script>

    推荐的是具有某种功能，以便在问号之后生成一个随机数。

    使用此功能的优点是不需要用户干预。

    更新

    由于您使用的是 PHP 解决方案，因此最好为 JavaScript 或 CSS 文件的版本生成一个动态编号，以确保文件始终从服务器加载，而不是从浏览器的缓存中使用该函数rand()生成随机数字。

    例如：

    <link rel="stylesheet" href="/private/css/visual.css?v=<?php echo(rand()); ?>" />
<script src="/private/js/visual.js?v=<?php echo(rand()); ?>"></script>
    • 21

  3. 如果您的文件具有.php扩展名，您可以通过这种方式进行测试：

    <script type="text/javascript"
 src="http://sitio.com/jsFiles/miArchivoJavaScript.js?v=<?php echo time();?>">
 </script>

    如果你想从 JS 中做到这一点，也许像这样简单的事情会有所帮助：

    var js = document.querySelectorAll('script');

for (var i = 0; i < js.length; i++) {
    js[i].src = js[i].src + '?v=' + Date.now();
}

var css = document.querySelectorAll('link');

for (var i = 0; i < css.length; i++) {
    css[i].href = css[i].href + '?v=' + Date.now();
}

    请记住，如果您使用 JS 代码，应先加载您的 JS 或 CSS 文件，然后立即更新src或href属性。

    • 4

  4. 如果你总是想避免缓存，你可以这样做：

    <script type="text/javascript">
  var estilos = 'carpeta/css/style.css?' + Math.random();
</script>

<script type="text/javascript">
  document.write('<link href="' + estilos + '" rel="stylesheet">');
</script>

    或者动态地进行引用，记住变量estilos可以是字符串的集合。

    • 1

  5. 我要做的是：

    我验证代码中没有错误。

    我使用组合 Control + shift + R

    我打开控制台并转到网络部分，然后按 F5 以查看文件是否正确导入。

    • 0

  6. 另一种避免缓存的方法，例如，您的 css 或 js，将修改您的 apache 的 .htaccess，以防止它被缓存或限制生命时间，这将帮助您下载您的 js。时间和 css 状态码 = 200 而不是 304，这是当资源已经在缓存中时它接收到的。

    <IfModule mod_expires.c> 
      ExpiresActive On
      ExpiresDefault "access plus 1 seconds"
      ExpiresByType text/html "access plus 1 seconds"
      ExpiresByType image/x-icon "access plus 2592000 seconds"
      ExpiresByType image/gif "access plus 2592000 seconds"
      ExpiresByType image/jpeg "access plus 2592000 seconds"
      ExpiresByType image/png "access plus 2592000 seconds"
      ExpiresByType text/css "access plus 604800 seconds"
      ExpiresByType text/javascript "access plus 86400 seconds"
      ExpiresByType application/x-javascript "access plus 86400 seconds"
</IfModule>

    任何一个

    <FilesMatch "\.(?i:gif|jpe?g|png|ico|css|js|swf)$">

  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>

</FilesMatch>
    • 0

  7. 如果您在 linux 上使用apache 服务器，您可以执行以下操作：

    激活mod_expire：

        $ sudo a2enmod expires

    修改/etc/apache2/apache2.conf文件并添加以下内容：

        <IfModule mod_expires.c>
     ExpiresActive On
     #ExpiresDefault "access plus 1 year"    # activar para servidor en producción
     ExpiresDefault "access plus 1 seconds" # activar para servidor en desarrollo
    </IfModule>

    然后重启apache服务器：

        $ sudo service apache2 restart

    有了这个，你应该解决客户端上的缓存。但是您应该知道，在生产服务器上，您应该增加ExpiresDefault变量的值。

    • 0

  8. 您可以应用的另一个选项是自动对CSS y JS.

    选项1：

    将versión（例如：文件的最后修改日期）作为变量添加到文件path中。

    所以：

    1. 我们创建一个函数来获取filemtime文件的最后修改日期（例如：）并将其作为变量连接到path.

      <?php
function autoVer($url)
{
  $path = pathinfo($url);
  $ver = '?v='.filemtime($_SERVER['DOCUMENT_ROOT'].$url);
  return $path['dirname'].'/'.$path['basename'].$ver;
}
?>

    2. 然后我们在文件上调用这个函数来版本。

      <link rel="stylesheet" href="<?php echo autoVer('/private/css/visual.css'); ?>" />
<script src="<?php echo autoVer('/private/js/visual.js'); ?>"></script>

    结果将是这样的：

    <link rel="stylesheet" href="/private/css/visual.css?v=1492816098" />
<script src="/private/js/visual.js?v=1492816000"></script>

    选项 2

    假设选项 1 “并不总是对你有用”，并且按照同一行，我们可以添加versión作为文件名的一部分并.htaccess重写path这些。

    所以：

    1. 我们创建一个函数来获取文件的最后修改日期（例如：）filemtime并将其作为文件名的一部分包含在内。

      <?php
function autoVer($url)
{
  $path = pathinfo($url);
  $ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
  return $path['dirname'].'/'.str_replace('.', $ver, $path['basename']);
}
?>

    2. 然后我们在文件上调用这个函数来版本。

      <link rel="stylesheet" href="<?php echo autoVer('/private/css/visual.css'); ?>" />
<script src="<?php echo autoVer('/private/js/visual.js'); ?>"></script>

      结果将是这样的：

      <link rel="stylesheet" href="/private/css/visual.1492816098.css" />
<script src="/private/js/visual.1492816000.js"></script>

    3. 我们创建一个文件.htaccess规则来翻译这些“路线”

      #Regla para archivos versionados
RewriteRule ^(private/(js|css|imgs)/)(.+)\.(.+)\.(js|css|jpg|gif|png)$ $1$3.$5 [L]
    • 0