http请求头和响应头能够避免重复的资源(css,js,图片,文本等),浏览器通常访问这些静态资源以后会缓存一段时间,静态资源通常是不会常常改变的,并且这些资源比较大,比较多的状况会影响加载效果,因此要避免屡次从网络加载这些文件。php
一个完整的请求(本文做于2014-11-12,但资源时间是2014-10-30)css
GET /assets/github-208780c72d87b50a0c3b932094adabe0ed787e29f3a60ddf60b7a8c0b66aeaff.css HTTP/1.1 Host: assets-cdn.github.com Connection: keep-alive Cache-Control: max-age=0 Accept: text/css,*/*;q=0.1 If-Modified-Since: Thu, 30 Oct 2014 22:36:24 GMT User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36 Referer: https://github.com/ Accept-Encoding: gzip,deflate Accept-Language: en-US,en;q=0.8 Cookie: logged_in=no; _octo=GH1.1.1132014134.1407914921; _ga=GA1.2.249759956.1407914919
服务器响应html
HTTP/1.1 304 Not Modified Date: Sun, 02 Nov 2014 01:59:39 GMT Server: Apache Via: 1.1 varnish Last-Modified: Thu, 30 Oct 2014 22:36:24 GMT Cache-Control: max-age=31536000, public Expires: Sat, 31 Oct 2015 20:46:08 GMT Age: 105210
浏览器资源访问过程:java
1.当访问静态资源文件时,首先使用url hashcode做为key查询本地资源缓存。git
2.若是没找到资源,那么直接访问浏览器,而后将请求的资源文件缓存并载入到html中。github
3.若是找到资源,读该资源在服务器建立的的时间,加入http响应头If-Modified-Since: Thu, 30 Oct 2014 22:36:24 GMT,并发送到服务器。浏览器
4.服务器根据url进行查找资源,若是未找到,返回404。不然读取资源建立时间,给出响应状态吗。缓存
5.浏览器若是收到404,会清空hascode对应的缓存,资源没法加载到html服务器
6.浏览器若是收到 304,检查Last-Modified:Thu, 30 Oct 2014 22:36:24 GMT,若是(Last-Modified=If-Modified-Since),表示文件未被修改,则直接使用本地缓存加载到html.网络
7.比较以后,若是服务器>浏览器,则从新请求资源。
8.若是是200,则进行本地缓存更新 Last-Modified>If-Modified-Since,并加载到html。
这个过程看似复杂,但提升了资源的访问效率
额外浅谈一下验证码问题。
验证码刷新问题也是这个原理,通常来讲验证码生成以后会缓存到服务上,他的建立时间和浏览器读取到的建立时间进行比较后,每每不在请求服务器。
验证码更新问题的结局,由于没法设置If-Modified-Since,但能够修改url,当url不行同时hashcode是找不到资源的,他会再次请求的,好比咱们使用js,能够这样改变验证码的url,
var url=http://hostname:[port]/xxx/checkcode.php?rnd=Math.random(); img.src=url 。