浏览器缓存

来源：互联网发布：mac预览图片快捷键编辑：程序博客网时间：2024/04/19 05:56

1. 概述

性能优化时请不要忘了浏览器缓存，浏览器缓存就是为了尽量减少没必要的请求，提升用户体验。

2. 查看浏览器缓存

在chrome或Firefox 在浏览器中输入 about:cache 就可以看到保存在浏览器中的缓存了。

3. 缓存协商

web服务器产生内容，缓存在用户浏览器本地，要不要缓存？缓存多长时间？这中间的沟通机制，就是http的“缓存协商”。

3.1 Last-Modified

Http头中的最后修改时间：

静态文件有修改时间，但是动态内容没有，需要程序中增加。

<?phpheader("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");echo "hello world.";?>

请求这个页面，看http响应头

增加了上面的一行。

然后再刷新这个页面，看到http请求头中多了下面一行

 If-Modified-Since:Sat, 22 Mar 2014 15:03:17 GMT

浏览器在请求服务器询问缓存是否过期。

我们修改代码来回答浏览器的询问。

<?php$modified_time = $_SERVER['HTTP_IF_MODIFIED_SINCE'];if(strtotime($modified_time) + 3600 > time()){    header("HTTP/1.1 304");    exit();}header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");echo "hello world.";?>

刷新页面，再看http状态

Status Code:  304 Not Modified

304未修改，直接读取本地缓存。

3.2 ETAG

除了使用last_modified之外，还可以使用ETAG，为一串编码来标记内容。

ETAG由web服务器生成。在http响应头中

 ETag: "12e3"

再次请求时http请求头中增加

If-None-Match: "12e3"

服务器重新计算这个内容的ETAG，并比较，如果相同则返回 304

4 彻底消灭请求

前面两种方式都是去服务端请求检查是否过期，下面就是在缓存失效时间内不去服务端请求。

4.1 Expires

在http头中增加下面一项

Expires:Sat, 03 May 2014 02:36:49 GMT

表示在这个时间内一直有效，取本地cache，不会再请求服务端。

但是这个有个问题，就是这个时间会跟客户端本地的时间进行对比，每个客户端的时间我们不可控，有可能跟服务端不同步，导致这个缓存时间也不可控制，

于是就有了下面的cache-control.

4.2 本地过期时间 cache-control

格式为:

Cache-Control:max-age=3600

表示1小时后过期，为缓存过期的相对时间，单位为秒。

5 HTTP/1.1协议

http://www.w3.org/Protocols/rfc2616/rfc2616.html

0 0