浏览器按F5与地址栏访问的区别

以下是本人对这些现象的个人理解，不正确的还请指正。

首先来看一下表面现象:

        用来测试的浏览器为IE浏览器，首先将浏览器的缓存全部清空。

第一次访问目标地址，我们的开发者工具中网络面板显示情况如下:

    

相应的请求头和响应头分别为:

1.Request头部，IE浏览器没有控制缓存的信息

   

2.Response的头部信息:

可以看到，响应表头添加了ETag和Last-Modified信息。ETag和Last-Modified的意义将在下文讲到。

此时我们分别通过按F5刷新按和在地址栏里重新输入地址观察现象。

按F5刷新按钮:

    

我们得到一个304的状态码，意思是服务器资源并没有修改，b.html将从缓存加载。对这次请求的request和response进行分析。

        request请求:

                    

        可以看到，这次的请求头部有一个if-Modified-Since和if-None-Match信息。它们的含义大致为:在第一次访问的过程中，我们看到响应里有ETag和Last-Modified两个key的信息。Last-Modified根据字面理解就是该资源上次修改的日期。ETag可以简单理解为资源的一个标识符，在资源的各个生命周期中，它都具有不同的值。当资源发生变更时，如果其头信息中一个或者多个发生变化，或者消息实体发生变化，那么ETag也随之发生变化。第二次请求的if-Modified-Since和if-None-Match作用便是与服务器上存储的ETag和Last-Modified进行对比，如若if-Modified-Since与Last-Modified相等并且ETag和if-None-Match相等，则服务器返回304状态码，表示资源并没有刷新。若不相等，则重新从服务器进行资源的获取。

明白了以上的原理，我们分析上面的请求头，可以看到该对比是相等的，所以系统的Response便是304状态码，我们可以看一下这个Response。

Response:

    

分析了按F5出现304状态码的原因，我们再来看一下在地址栏输入出现的结果

地址栏输入地址按回车:

    可以看到，结果为200状态码，结果来自缓存，意思就是浏览器并没有发送请求。

我们看到的请求的标头也是空的，那么地址栏输入地址按回车意思就是直接从缓存进行加载，而不去进行缓存内容的更新验证。但是问题来了，我们都知道缓存是有一个过期时间的，如果缓存没有过期可以看到以上结果，如果缓存过期怎么办呢，我们继续分析。

现在我们用charles工具进行分析，该工具可以拦截Http的请求响应并进行相应的想改再发送。

我们首先在Charles打好断点，清楚缓存，访问该html页面。

此时，我们的该html的响应中，给它添加一个过期时间，Cache-Control:max-age=30。意思是该缓存可以存活30s，具体的Cache-Control细节我正在研究，并在将来写相应的原理讲解的文章。

这时，将这个请求，返回给浏览器。等待30s，我们再次通过地址栏输入地址按回车键，可以看到此次请求并没有像之前那样直接从缓存加载数据，而是向服务器发送了请求，进行了缓存的验证工作。

此处需要明确的是，当浏览发现缓存文件过期后，并不会直接从服务器下载资源，而是首先进行资源的版本检测，如果发现服务器资源没有发生变化，便会如上图所示服务器返回304状态码，这样相对于直接从服务器下载会节省很多流量。