前端浏览器缓存怎么使用

之前给大家介绍过浏览器的缓存，也介绍过HTML的离线缓存，说的太多反而容易弄混，今天就来给大家好好分辨一下这些缓存分别有什么区别以及怎么使用缓存。

200 from memory cache 不访问服务器，直接读缓存，从内存中读取缓存。此时的数据时缓存到内存中的，当kill进程后，也就是浏览器关闭以后，数据将不存在。但是这种方式只能缓存派生资源

200 from disk cache 不访问服务器，直接读缓存，从磁盘中读取缓存，当kill进程时，数据还是存在。这种方式也只能缓存派生资源

304 Not Modified 访问服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据。

三级缓存原理

先去内存看，如果有，直接加载

如果内存没有，择取硬盘获取，如果有直接加载

如果硬盘也没有，那么就进行网络请求

加载到的资源缓存到硬盘和内存

一般浏览图片，如下流程：

访问-> 200 -> 退出浏览器

再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

application cache和上面缓存有点区别，是离线缓存，就是资源可以从硬盘上读取而不用联网，即使断网，用户也可以浏览。

设置浏览器缓存

304是协商缓存还是要和服务器通信一次，要想断绝服务器通信，就要强制浏览器使用本地缓存（cache-control/expires），

一般有如下几种方式设置浏览器缓存。

1、通过HTTP的META设置expires和cache-control

<meta http-equiv="Cache-Control" content="max-age=7200" />
 <meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />

这样写的话仅对该网页有效，对网页中的图片或其他请求无效。

2、apache服务器配置图片，css，js，flash的缓存

这个主要通过服务器的配置来实现这个技术，如果使用apache服务器的话，可以使用mod_expires模块来实现：

编译mod_expires模块：

Cd  /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

先打开httpd.conf文件，然后查找expires这个模块，找到后，删除左边的#号，表示打这个模块，并重启apache服务器

编辑httpd.conf配置：添加下面内容

<IfModule mod_expires.c>ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript      "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"</IfModule>

3、php等设置

<?php
  header("Cache-Control: public");
  header("Pragma: cache");
  $offset = 30*60*60*24; // cache 1 month
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);?>