1. 橘子皮首页
  2. 前端教程

使用HTTP缓存状态码200和304提升网站访问速度

网站访问速度对一个网站来说是非常重要的,访问慢会流失用户,访问快会大大的提高用户体验。提升网站访问速度的方式很多,比如这里提升PHP程序运行速度的几个优化方案,但火端今天要介绍的是HTTP缓存,也可以叫浏览器缓存。

浏览器缓存大概有两种,200 OK (from memory/disk cache)304 Not Modified各有各的优势,把他们发挥好可以大大的提升访问速度。

1、200 OK (from memory/disk cache)

这种缓存方式已经很普遍,大部分网站的静态文件都采用了,200 OK (from memory cache)或者200 OK (from disk cache)都是直接读取客户端的缓存,无需再请求服务器。一般是在Apache或者Nginx里设置,比如Nginx配置里会有类似这样的配置:

  1.     location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
  2.                      {
  3.                          expires      30d;
  4.                      }
  5.                      location ~ .*\.(js|css)?$
  6.                      {
  7.                          expires      12h;
  8.                      }

这样就可以给静态文件缓存了,在有效期内,浏览器会直接读取客户端的缓存,而不用再请求服务器,除非用户清除了缓存或者使用Ctrl+F5强制刷新了页面。

使用HTTP缓存状态码200和304提升网站访问速度

比如上图,是已经缓存过了的,至于有些是200 OK (from memory cache)有些会是200 OK (from disk cache)都差不多,只是从客户端取的位置不一样而已。除了给静态文件做200 OK (from cache)缓存外,其实我们也可以给某些页面做,比如一些不经常改变内容的ajax页面。

举个例子:

一个在线手册网站,左侧是导航,用户浏览手册时可能会频繁在不同的文档页面来回切换,如果不启用HTTP缓存,体验会非常差,如果使用Ajax切换,再加上200 OK (from cache)就可以做到快速切换了,无刷新、无白屏,体验棒棒哒!

200缓存能大大的提升速度,但是如果网站内容有更新,访客是无法及时的获取最新的内容。这时候我们一般是采用在静态文件后面加参数来解决,比如 /statis/js/jquery.js?20180505 ,因为是一个新的URL,所以浏览器没有缓存可取,只能取新内容。

2、304 Not Modified

304缓存和上面最大的区别是浏览器需要向服务器询问一次,如果服务器端认为没有内容更新,直接返回304状态码,无需返回body内容,浏览器就会直接取缓存内容输出,这样省掉了没必要的数据传输,也就提升了访问速度。

要实现304缓存,我们需要在浏览器首次访问时返回过期时间等header,比如如下PHP代码:

  1.     $time=86400; //单位秒
  2.     header(‘Cache-Control:max-age=’ . $time);
  3.     header(“Expires: ” . gmdate(“D, d M Y H:i:s”, time() + $time) . ” GMT”);
  4.     header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);

上面的代码就告诉了浏览器缓存时间,下次浏览器再访问该页面的时候会带上名叫IF_MODIFIED_SINCE的请求头来访问,这时候我们可以用PHP变量:$_SERVER['HTTP_IF_MODIFIED_SINCE']来获取浏览器记录的缓存时间,如果没有内容更新,我们直接返回304状态码即可,如果有更新直接输出新内容,并返回新的过期时间给浏览器。大概的代码如下:

  1.     <?php
  2.     $time = 86400;
  3.     if(isset($_SERVER[‘HTTP_IF_MODIFIED_SINCE’])){
  4.              $is_update=0;//判断是否有更新
  5.              if($c_time > time()){
  6.                  header(‘Cache-Control:max-age=’.$time);
  7.                  header(“Expires: ” . gmdate(“D, d M Y H:i:s”,time()+$time).” GMT”);
  8.                  header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);
  9.                  header(‘HTTP/1.1 304 Not Modified’);
  10.                  exit();
  11.              }
  12.     }
  13.     header(‘Cache-Control:max-age=’ . $time);
  14.     header(“Expires: ” . gmdate(“D, d M Y H:i:s”, time() + $time) . ” GMT”);
  15.     header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);

具体使用还需要考虑一些其它问题,本站就已经在很多页面使用了304缓存功能,返回状态如下图:

使用HTTP缓存状态码200和304提升网站访问速度

如何来判断服务器内容是否有更新有很多种方式,比如Etag功能就可以,关于Etag的介绍可以百度下。网站访问速度很重要,能快一点,就让它快一点吧!搞网站就在于折腾,哈!

使用HTTP缓存状态码200和304提升网站访问速度

文章整理,作者:橘子皮,如若转载,请注明出处:https://www.juzip.cn/1437.html

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

发表评论

电子邮件地址不会被公开。 必填项已用*标注