我们可以在HTML页面利用meta tag和PHP程序中通过header来控制例如
代码如下
header(CacheControl:maxage= mustrevalidate);//小时
header(LastModified:gmdate(D d M Y H:i:s)GMT);
header(Expires:gmdate(D d M Y H:i:s time() + )GMT);
echo 我不刷新;再写个HTML文件chtm
hahago
我们请求/chtm点击链接然后利用浏览器的回退按钮返回chtm再点击链接如下图左所示我们发现当添加了缓存指令后我们无论如何来回后退和点击链接下面的网络请求URL这一条始终为灰色表示浏览器并没有发起实际的网络请求而是直接调用了存储在用户电脑中的缓存页除非缓存时间过期在这期间即使是实际内容改变了浏览器也不会去重新读取我们在服务器上的资源你可以把echo的那一句修改后再点击会发现网络请求仍然为灰色在这种情况下只有以下三种情况浏览器才会去更新缓存
()缓存到期
()缓存被清除;
()F或 ctrl+F强制刷新(这一点各种浏览器处理可能存在差异我的测试环境是firefox )
当我们屏蔽上面的header指令或者改用如下代码时//告诉客户端浏览器不使用缓存HTTP 协议
代码如下
header("CacheControl: nocache mustrevalidate");
//告诉客户端浏览器不使用缓存兼容HTTP 协议
代码如下
header("Pragma: nocache");
浏览器就会在每次请求时都去服务器上读取资源如下面右边的图所示 在这里我们可以大致了解下浏览器对页面的缓存处理很容易我们就能联想出其使用场景有时候我们需要它缓存有时候又不需要你可以根据场景来使用不过浏览器的缓存作用是很微小的但能省一点算一点有时候浏览器的缓存是很厉害的需要我们强制刷新才能见效比如JS文件有时你更改了即使刷新也是不会更改的另除了可以在代码中设置页面缓存也可以在APACHE等服务器上配置特别是静态资源加上缓存可以有效减少不必要的请求
又有时我们通常会看到这样的代码在JS文件后加上问号的那一串并没有实际意义只是为了避免JS被缓存给JS文件加一个版本号通常用时间戳做标记这样浏览器就不会缓存我们的JS文件了
既然前端页面缓存的目的是为了减少请求那我马上想到了另一个思路那就是压缩数据通过使用一些工具可以对CSS和JS代码进行压缩比如jquery的使用版就是经过压缩的往往这个压缩比例还很大通常使用jsminjspacker进行压缩具体工具可以到网上搜索下
