浏览器缓存笔记

浏览器一般不会缓存html文件，

• 通过meta标签禁止浏览器缓存html文件

 <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache,no-store, must-revalidate">
  <meta http-equiv="Expires" content="0">

• 可以通过php的header（）方法设置头部信息

header(‘Cache-Control:no-store’);
header(‘Pragma:no-cache’);
header(“Expires:0”);

• 可以使用打包工具在文件名后面加上MD5,时间戳,哈希值等随机数
  比如webpack打包，此时可以在webpack.config.js中对output的文件名进行配置

output: {
filename: “[name]-[hash:6].js” }

• 可以通过PHP 的 filemtime() 函数，filemtime()
  函数可以返回文件最后被修改的时间，这样只有在修改文件的时候版本才会变化。

<link rel="stylesheet" href="static/css/style.css?v=<?echo filemtime('static/css/style.css')?>">

置Cache-Control: no-cache并不会禁止掉浏览器的缓存操作，实际上Cache-Control: no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。
Cache-Control: no-store：这个才是响应不被缓存的意思。

要想禁止浏览器缓存css、js、jpg等的文件，可以通过Apache设置缓存
第一种方法：
1. 在Apache开启mod_expires.so模块 　
2. 在配置文件中打开：LoadModule expires_module modules/mod_expires.so
3. 在.htaccess添加以下内容：

<IfModule mod_expires.c>
    #打开缓存
    ExpiresActive On
    #默认对所有资源缓存600秒
    ExpiresDefault A600
    #png格式的资源缓存5秒
    ExpiresByType image/png A5
    #jpg格式的资源缓存50秒
    ExpiresByType image/jpg A50

    #好含这些后缀的资源，都缓存100秒
    <FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
    ExpiresDefault A100
    </FilesMatch>
</IfModule>

第二种方法：
1. 在Apache开启mod_headers模块
2. 去配置文件中添加以下内容：LoadModule headers_module modules/mod_headers.so
3. 在.htaccess中添加内容：

#包含这些后缀的资源都缓存33秒
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
    Header set Cache-Control "max-age=33"
</FilesMatch>

<FilesMatch ".(css|js)$">
    Header set Cache-Control "no-store"
</FilesMatch>

第三种方法：

1. 在.htaccess添加以下内容：

FileEtag INode Mtime Size

要关闭Etag，则添加以下内容：

FileEtag none