浏览器三种刷新的区别
by snoopyxdy
at 2012-02-21 10:44:08
original http://snoopyxdy.blog.163.com/blog/static/6011744020121219322085
我们一直在用着浏览器刷新，其实刷新也是有一些小学问的哦，我们常见的三种刷新：
1、url+enter或者a标签的超链接点击
2、F5刷新
3、ctrl+F5刷新
这三种刷新级别从低到高一层层的，举一个简单的例子大家就明白了。
条件：此url路径您已经使用浏览器最近访问过，并没有超过缓存的时间，比如您在前1分钟刚刚访问过此url路径。
1、url+enter或者a标签的超链接点击
先上截图
哇！一张我梦想的三菱EVO X的图片出现了。
我们发现用firebug查看网络请求是灰色的，后面说明此请求来自于缓存，其实此请求并有发送到后端node.js端，而是浏览器直接读取的缓存的数据。这里只需要在 response.setHeader(‘Cache-Control’, 'public, max-age=3600'); //缓存一小时
2、F5刷新
还是那个url地址，只不过这次我轻轻的按了下F5哦~
EVO X还是那么帅啊，哈哈。
我们仔细看响应状态码，变成304了，这里浏览器是去请求了后端node.js服务器，并且响应头没有“Content-Length”属性，说明响应的body是空的，同时它带上了2个重要的参数：
1、If-Modified-Since：对应的浏览器响应头 Last-Modified
2、If-None-Match：对应的浏览器响应头 Etag
当node.js服务器收到这样的http请求后，则去判断是否需要更新客户端的缓存，至于使用 Last-Modified 还是 Etag 来判断缓存是否更新就要看您的node.js服务器代码是怎么写的了。rrestjs是优先判断Etag，至于Etag的值如何获取，也要看您使用的web服务器是怎么获取的，可以是修改时间+文件大小的md5值或者其他。
EVO X还是那么霸气！虽然已经停产了！
我们可以仔细看下请求头，没有了第2种情况的2个缓存头，和第一次来访问此url地址是一样的，所以node.js服务器就直接将图片响应给浏览器了，所以这里的151.1KB是这张图片的大小，不使用任何浏览器缓存。
总结发言：
EVO X ...
三种刷新的情况相信您已经全看明白了，百分之90%的用户是使用第一或者第二种的，所以缓存技术至关重要。对于一些不经常修改的页面完全可以使用 Cache-Control 让请求都不用发了，节约服务器资源，快速响应。对于一些静态图片等一定要加上 Last-Modified 或者 Etag，因为一般此类资源体积都比较大，缓存做好的话可以提高不少效率。
当然不论是静态文件还是json数据或者是html数据都可以这么做，只要你遵循http协议。
最后广告时间：
node.js的高性能restful框架——rrestjs（基于express开发，异于express的connect结构，全新的体验），让您省去那些繁琐的缓存的设置，专心业务应用的开发，简单的部署，丰富的功能，友好的API，node.js手册原生的代码风格，没有学习门槛，让您像php那样开发node.js应用，免去了频繁手动重启的麻烦！
项目地址及新手入门：https://github.com/DoubleSpout/rrestjs
1、url+enter或者a标签的超链接点击
2、F5刷新
3、ctrl+F5刷新
这三种刷新级别从低到高一层层的，举一个简单的例子大家就明白了。
条件：此url路径您已经使用浏览器最近访问过，并没有超过缓存的时间，比如您在前1分钟刚刚访问过此url路径。
1、url+enter或者a标签的超链接点击
先上截图
哇！一张我梦想的三菱EVO X的图片出现了。
我们发现用firebug查看网络请求是灰色的，后面说明此请求来自于缓存，其实此请求并有发送到后端node.js端，而是浏览器直接读取的缓存的数据。这里只需要在 response.setHeader(‘Cache-Control’, 'public, max-age=3600'); //缓存一小时
2、F5刷新
还是那个url地址，只不过这次我轻轻的按了下F5哦~
EVO X还是那么帅啊，哈哈。
我们仔细看响应状态码，变成304了，这里浏览器是去请求了后端node.js服务器，并且响应头没有“Content-Length”属性，说明响应的body是空的，同时它带上了2个重要的参数：
1、If-Modified-Since：对应的浏览器响应头 Last-Modified
2、If-None-Match：对应的浏览器响应头 Etag
当node.js服务器收到这样的http请求后，则去判断是否需要更新客户端的缓存，至于使用 Last-Modified 还是 Etag 来判断缓存是否更新就要看您的node.js服务器代码是怎么写的了。rrestjs是优先判断Etag，至于Etag的值如何获取，也要看您使用的web服务器是怎么获取的，可以是修改时间+文件大小的md5值或者其他。
如果node.js服务器判断 Last-Modified 还是 Etag 后认为此请求资源还在缓存，然后返回 304状态码，和最新的 Last-Modified和Etag。
浏览器收到304状态码以后，认为资源未被修改，所以就去取缓存响应给用户了。
3、ctrl+F5刷新
强制刷新，我们还是先看截图：浏览器收到304状态码以后，认为资源未被修改，所以就去取缓存响应给用户了。
3、ctrl+F5刷新
EVO X还是那么霸气！虽然已经停产了！
我们可以仔细看下请求头，没有了第2种情况的2个缓存头，和第一次来访问此url地址是一样的，所以node.js服务器就直接将图片响应给浏览器了，所以这里的151.1KB是这张图片的大小，不使用任何浏览器缓存。
总结发言：
EVO X ...
三种刷新的情况相信您已经全看明白了，百分之90%的用户是使用第一或者第二种的，所以缓存技术至关重要。对于一些不经常修改的页面完全可以使用 Cache-Control 让请求都不用发了，节约服务器资源，快速响应。对于一些静态图片等一定要加上 Last-Modified 或者 Etag，因为一般此类资源体积都比较大，缓存做好的话可以提高不少效率。
当然不论是静态文件还是json数据或者是html数据都可以这么做，只要你遵循http协议。
最后广告时间：
node.js的高性能restful框架——rrestjs（基于express开发，异于express的connect结构，全新的体验），让您省去那些繁琐的缓存的设置，专心业务应用的开发，简单的部署，丰富的功能，友好的API，node.js手册原生的代码风格，没有学习门槛，让您像php那样开发node.js应用，免去了频繁手动重启的麻烦！
项目地址及新手入门：https://github.com/DoubleSpout/rrestjs