HTTP 304客户端缓存优化的神奇作用和用法 Unknown 2009/08/19

| |

HTTP 304: Not Modified,与服务器的缓存设置非常有关。

Last-Modified

这个头标是一个响应头标,表示客户端(通常指浏览器)所请求资源在服务器端的最后修改时间。通常情况下客户端在接受这个头标后,在以后对这个资源的请求会附带一个'If-Modified-Since'请求头标,而这个头标是想告诉服务器上次客户端所请求资源的最后修改时间。如下图中的 Last-Modified: Sat, 07 Mar 2009 13:28:57 GMT,这是一个HTML页面的来自服务器的response header信息。

html-header-info

对于一些图像、css、js等静态文件资源,配置好了的apache服务器会理解这些If-Modified-Since请求头标,将头标里的时间和文件的最后修改时间进行比较并作出响应。如果二者相等则发送一个"304 Not Modified"来告诉客户端所请求资源并未修改,让客户端放心使用缓存中的资源,否则的话会重新发送一个新的资源和新的Last-Modified的头标。

但是对于一个动态的PHP脚本,我们即使在脚本加入了header('Last Modified: '.$time)来发送一个Last Modified响应头标,当客户端附带'If-Modified-Since'在次请求时apache服务器不会进行处理,这需要我们自己用$ _SERVER['HTTP_IF_MODIFIED_SINCE']来获取'If-Modified-Since'的值自己来进行判断处理。

header-if-modified-since

而且,上面提到的配置好的apache服务器会检查If-Modified-Since变量,而有些.css啊,.js啊,apache服务器似乎并不检查。这都需要我们人工检查。

在这之前,先让我们谈谈浏览器的一些工作原理:

在先前至少有过一次有效访问后,在以后对同一URI资源的请求中,浏览器只进行两种动作:

(1)直接在缓存中去获取内容。如果先前有效访问的响应头包含 Expires, max-age的话,“打开新窗口”、“输入URI回车”、“前一页”、“后一页”这些浏览器行为不会使浏览器在Expires, max-age设置的有效期时间内去访问服务器,而是在缓存中去获取内容,但是'"刷新'"或"重载"例外。

(2)访问服务器,根据服务器响应来获取内容。这种情况发生在设置no-cache等头标要求不缓存,或者是设置了 Expires,max-age但浏览器行为是“刷新”“重载”时候。'Last-Modified'、'ETag'、'must-revalidate' 等有些特殊,不直接受浏览器行为影响,它们必须访问服务器后,再由服务器判断是直接发送新的资源,还是发送一个304 Not Modfied让浏览器使用缓存中的资源。

目的

尽可能减少服务器向客户端重复发送资源,尤其是图片,Flash,CSS,JS等。

原理

1、强行判断$_ENV['If-Modified-Since']是否等于$file_mtime,如果相等,是发送HTTP 304 Not Modified,告诉浏览器,你直接用你缓存中的好了。当然了,如果两者不相等,或缓存中的文件被删除了,就直接发送新的内容。
2、$_ENV['If-Modified-Since']变量存在的前提是,在前一次有效的访问过程中,发送了形如Last-Modified: Sat, 07 Mar 2009 13:28:57 GMT的Header。

方法:

1、先配置.htaccess,强行将扩展名为.jpg|.png|.gif|.css|.js|.swf的文件,转交给gzip.php处理。参考《Bo-blog的一种更简单更实用的gzip优化方法》。
2、检查要访问的URI是否是一个文件,用is_file($file)判断,如果不是,Header至404 Error。
3、检查gzip.php得到的访问URI是否满足.jpg|.png|.gif|.css|.js|.swf的要求,如果不符合,Header至403 Forbidden。
4、检查$_ENV['If-Modified-Since']是否等于$file_mtime,如果相等,发送304 Not Modified。
5、如果第4步的结果是不相等的,判断是否是.css|.js,如果是,使用gzip发送。否则如果是.jpg|.png|.gif|.swf,不使用gzip发送。

这样做的结果与好处:除非服务器端文件更新(导致Last-Modified值变化),或是客户端缓存被清除,否则不管你是刷新还是重载,我都会发送304 Not Modified,指示你直接用你那边的缓存就可以了,不必到我这里来取。<-这对一些大的文件资源,如图像,JS,CSS等,非常有用!!!本来要发送一个100k的图像的,我现在只要发送500个字节左右的数据,告诉你直接用缓存就OK了,多好啊!

现在我们来拿数据来比较一下实际的差异。304优化后,用户的下载量仅需要88k,则原来怎么也要在460k以上,节约了66%~80%的流量。但所占的时间,效果不是很明显,整个也差不多几秒。同时每次尝试,得到的累计时间也不相同。

ps. Bytes Sent我估计和Request Count有关,向服务器请求资源时,会发现一些内容,见上面的第二张图,Request Headers,有很多内容,差不多1K,所以有一个请求,就差多占掉1K,合起来确实差不多那些量。

  Request Count Bytes Sent Bytes Received Elapsed Time
第一次载入(全部载入) 126 98,342 501,640 23.328 s
强制刷新(无304优化) 125 111,251 546,257 16.562 s
强制刷新(仅优化css和js) 125 112,538 461,056 16.437 s
强制刷新(304优化) 125 112,538 88,110 16.937 s

现在我的博客上的资源访问,除了php以外,似乎其他资源全部已经被这个304 Not Modified功能优化了。

请给这篇日志评个分吧~!

本文评分: 5.3/10 (107 votes)    提示:您还未对本文评分,您可以进行评分并发表您的意见!

加入收藏!

ooxx IP
2009/08/20 11:03
还是不行,郁闷

引用
<?php
  if(isset($_GET['URL']))
   $file=$_ENV['DOCUMENT_ROOT'].$_GET['URL']; // for URLRewrite manually
  else
   $file=$_ENV['DOCUMENT_ROOT'].$_ENV['REQUEST_URI']; // for URLRewrite automatically
  
  if(is_file($file))
  {
    if(!preg_match("/\.(css|js|gif|png|jpg|swf)$/i",basename($file),$result))
      @header('Location: /403.html');
    
    switch($result[0])
    {
      case '.js':
        $contentType='text/javascript';
       break;
      case '.css':
        $contentType='text/css';
       break;
      case '.gif':
        $contentType='image/gif';
       break;
      case '.png':
        $contentType='image/png';
       break;
      case '.jpg':
        $contentType='image/jpeg';
       break;
      case '.swf':
        $contentType='application/x-shockwave-flash';
       break;
      default:
        @header('Location: /403.html');
    }
    
    $mtime=filemtime($file);
    $gmt_mtime=gmdate('D, d M Y H:i:s',$mtime).' GMT';
    
    if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && $_SERVER['HTTP_IF_MODIFIED_SINCE']==$gmt_mtime)
    {
      //if not modified since last modification, return "HTTP/1.1 304 Not Modified".
      @header('HTTP/1.1 304 Not Modified');
      @header('Last-Modified: '.$gmt_mtime);
      @header('Content-Type: '.$contentType);
    }
    else
    {
      $content=file_get_contents($file);
      $forbiddenFileType=array('.gif','.png','.jpg','.swf');
      
      if(strpos($SERVER["HTTP_ACCEPT_ENCODING"],'gzip')!=-1 && extension_loaded('zlib') && in_array($result[0],$forbiddenFileType)!=True)
      {
        // gzip client and server side enable.
        ob_start(ob_gzhandler);
        
        @header('Last-Modified: '.$gmt_mtime);
       @header('Content-Type: '.$contentType);
       echo $content;
      
       ob_end_flush();
      }
      else
      {
        // gzip client and server side disable.
        @header('Last-Modified: '.$gmt_mtime);
       @header('Content-Type: '.$contentType);
       echo $content;
      }
    }
  }
  else
    @header('Location: /403.html');
  ?>
spyrise 回复于 2009/08/20 18:42
你设置好.htaccess了吗?还有,你的gzip.php是否放在根目录下?
"还是不行"具体是指?
ooxx IP
2009/08/19 23:57
敲了这么久的代码,结果css,js确不能正确加载,不知道哪里出错了,对于不懂php的童鞋可真辛苦[ico36]
spyrise 回复于 2009/08/20 06:50
应该是$contentType这个变量出错了吧?

或你先直接运行gzip.php?url=/xx.js看看有没有错,有错就先改啊。

对了,最新版的gzip.php见这里:http://spyrise.org/blog/gzip-php-source-code-updated/
ooxx IP
2009/08/19 23:06
日记中的一些载入参数对比,要用什么软件查看了[ico04]
spyrise 回复于 2009/08/20 06:44
fiddler,前面我有介绍的。找找。:)
ZNZ Email Homepage IP
2009/08/19 22:23
先回复 后研究 沙发没坐上 板凳也还行
ooxx IP
2009/08/19 22:13
有源文件就好了,省的自己改,期待楼主放出
spyrise 回复于 2009/08/19 22:18
建议有空自己按图敲一阵代码,理解一下各行代码的作用。。。授之以鱼,不如授之以渔。。。
分页: 2/2 第一页 上页 1 2 最后页
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [注册]