缓存缓存CSS的策略

浏览器缓存CSS将带来主要的性能提升。 您确保服务器设置为发送标头，这些标头告诉浏览器在给定的时间内挂接到CSS文件。 最好的做法是，即使不是大多数站点，许多站点已经在这样做。

与浏览器缓存紧密结合的是缓存清除 。 假设浏览器将CSS文件缓存了一年（这并不罕见）。 然后，您想更改CSS。 您需要一种策略来打破缓存并强制浏览器下载CSS的新副本。

这里有一些方法。

CSS必须缓存起来才有意义……

为了确保这一点，这是缓存CSS文件的一些看起来不错的标头：

我们正在寻找那个Cache-Control and Expires标头。 我不是服务器配置专家。 我可能会看一下H5BP服务器配置。 但是，这里有一些经典的Apache / HTAccess方法来实现：

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
  Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
</FilesMatch>

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
</IfModule>

查询字串

如今，大多数浏览器会看到带有不同查询字符串的URL作为不同文件，并下载新副本。 大多数CDN甚至都支持并建议这样做。

<link rel="stylesheet" href="style.css?v=3.4.1">

零钱吗？ 更改为：

<link rel="stylesheet" href="style.css?v=3.4.2">

通过将服务器端变量设置为可在多个位置使用，可以使自己更容易。 因此，对其进行更改将立即破坏许多文件的缓存。

<?php $cssVersion = "3.4.2"; ?>

<link rel="stylesheet" href="global.css?v=<?php echo $cssVersion; ?>">

也许您甚至可以使用语义版本控制 。 您还可以