比较浏览器的“刷新”

名词解释：
缓存（cache memory）：数据交换的缓冲区。

当使用的是post方法时，不会有对应的缓存；当使用的是get方法时，会有对应的缓存。
使用“刷新”的功能时相当于第一次向服务器发送请求；而再次点击回车键相当于读取缓存中的数据。

 

我们一直在用着浏览器刷新，从 http 协议的角度来看，我们常见的有三种刷新：

1、再次点击enter键或者超链接a标签；
2、F5或者Ctrl+R 普通刷新；
3、ctrl+F5 强制刷新。

 

这三种刷新究竟有何不同呢？举三个简单的例子大家就明白了。

条件：将要访问的url路径，最近已经使用浏览器访问过，并且没有超过缓存的时间。比如您在前1分钟刚刚访问过此url路径。

1、点击Enter键或者点击a标签的超链接。

　　比如我们点击超链接后，发现用firebug查看网络请求是灰色的，说明此请求来自于缓存。其实此请求并没有发送到后端node.js，而是浏览器直接读取的缓存的数据 。这里需要设置 response.setHeader(‘Cache-Control’, 'public, max-age=3600'); //缓存3600秒，也就是缓存一小时

2、F5刷新
　　还是那个url地址，只不过这次我轻轻的按了下F5键，我们仔细看响应状态码，变成304了，这里浏览器是去请求了后端node.js服务器，同时它带上了2个重要的参数：

1、If-Modified-Since：对应的node.js响应头 Last-Modified

2、If-None-Match：对应的node.js响应头 Etag

　　当node.js服务器收到这样的http请求后，则去判断是否需要更新客户端的缓存，至于使用 Last-Modified 还是 Etag 来判断缓存是否更新就要看您的node.js服务器代码是怎么写的了。expressjs是优先判断Etag（至于Etag的值如何获取，也要看您使用的web服务器是怎么获取的，可以是修改时间+文件大小的md5值或者其他）。如果node.js服务器判断 Last-Modified 还是 Etag 后，认为此请求资源还在缓存里面，则返回 304状态码，以及最新的 Last-Modified和Etag。并且响应头没 有“Content-Length”属性，说明响应的body是空的，浏览器收到304状态码以后，认为资源未被修改，所以就直接去取缓存响应给用户了。

3、ctrl+F5强制刷新

　　我们可以仔细看下请求头，没有了第2种情况的2个缓存头，和第一次来访问此url地址是一样的，所以node.js服务器就直接将图片响应给浏览器了，所以这时是没有使用任何浏览器缓存的。

 

　　三种刷新的情况相信您已经全看明白了，百分之90%的用户是使用第一或者第二种的。由此可以看出缓存技术至关重要。对于一些不经常修改的页面完全可以使用 Cache-Control，让请求都不用发了，节约服务器资源，快速响应。对于一些静态图片等一定要加上 Last-Modified 或者 Etag，因为一般此类资源体积都比较大，缓存做好的话可以提高不少效率。当然，不论是静态文件、json数据，还是html数据，都可以充分地利用浏览器缓存，只要你遵循http协议。