Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

HTTP使用Cache缓存让静态资源不重复加载

  前天的文章“使用ETag缓存减少网络开销”,说了ETag缓存。今天来纠结下这个完全不同模式的另一种缓存。使用ETag缓存的时候,虽然请求很小不会占多少服务器的带宽,但是服务器程序还是会被执行一次,这样就会浪费很多资源。就算你的程序代码不消耗太多资源,但是一个连接占用一个HTTP请求这是不可避免的。所以一些没必要浪费这些资源的情况,我们就可以使用Cache缓存来替代它。
  关于Cache缓存,ETag那篇文章中就初略的提到过。Cache缓存是让客户端在一段时间内不向服务器发起请求而使用缓存的数据,这样连HTTP连接都省了,甚至就算断网的情况都能访问到缓存的数据。
  Cache缓存的原理很简单,但是它的操作很复杂。在HTTP/1.0和HTTP/1.1就使用着不同的方法来完成Cache缓存。在HTTP/1.0中,在返回头中设置Expires字段,它的值需要一个GMT格式的时间。就像COOKIE一样,超过设置的时间缓存就会被删除。HTTP/1.1只要在返回头的Cache-Control字段中设置max-age=?(问号替换成缓存持续的秒数)就可以了。老外说为了兼容性,最好把两个都设置上。不过我觉得没必要了,目前市场上已经找不到不支持HTTP/1.1的浏览器了。
  除了HTTP版本兼容性之外还有其他问题,比如打开网页的方式。其实打开网页也是很有学问的←_←

  打开网页的方式很多,不过我不想说一大堆复杂的,就稍微把它们归纳为两种:“刷新”和“跳转”。“刷新”有两种情况,一种直接使用浏览器的刷新命令,比如按F5或右键菜单中的刷新。还有一种是普通操作引起的刷新,比如当前已经打开了某个网页,这时候在导航栏里面输入当前网页的网址(也就是不改变页面的网址)按回车也会刷新(带#号的例外)。还有JavaScript中使用location.reload();也可以刷新网页。这些“刷新”的情况会无视Cache缓存向服务器发起请求。“跳转”一般在点击超链接跳转到某个页面时发生的,跳转到的页面就不会被刷新。即使跳转到自身页面也被定义为了“跳转”。JavaScript中的location.href="URL";也是“跳转”。导航栏输入网址,从一个页面访问到另一个页面也定义为“跳转”。如果页面缓存存在并生效,那么“跳转”这个操作就不会向服务器发起请求的。还有一些比较奇葩的操作,比如“前进”,“后退”的时候使用max-age=0都可以被缓存,只有设置为no-store才能让“前进”“后退”都不缓存。其它的还有private等等一堆值,也有各种奇葩的功能。不过说到底就是两种情况。一个“缓存”一个“不缓存”只要知道设置什么值能缓存就可以了。而且浏览器兼容的参差不齐,一般会用到的也就max-age和no-cache这两个。
  动态页面不推荐用Cache缓存,因为动态页面更新的比较频繁。如果使用Cache缓存会导致用户无法看到最新的信息,建议使用ETag。而对于静态资源,比如JS、CSS这些东西就可以稍微缓存久一些,因为它们的内容很少有变动。而静态图片这些基本上永远也不会改的东西可以设置很长很长的缓存。另外,ETag和Cache可以同时使用,我也推荐这样用。同时设置ETag和Cache时浏览器会先判断Cache,只有缓存失效了才会访问服务器请求最新数据。这时候如果ETag没有改变,服务器还可以返回304和继续设置Cache缓存来节省资源。
  总之,哪个页面适合什么样的缓存需要自己经验判断,这才是难点。真正“使用缓存”其实百度谷歌一下就能学会。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^