关于浏览器缓存问题304响应状态简单介绍

快乐打工仔 分类:实例代码

本章节将介绍一下关于http请求304状态内容,其实也就是浏览器缓存问题。

下面先看一个图片:

前端教程

状态是304的相关内容并不是从服务器下载的,而是读取的本地缓存的内容。

这对于优化网站的性能具有很重要的意义,充分利用好缓存,可以极大提高页面浏览速度。

下面就介绍一下关于浏览器缓存的相关知识,需要的朋友可以做一下参考。

浏览器可以缓存访问过的网页文件,缓存的内容不仅仅有网页文件,还包括上一次服务器发过来的该文件的最后服务器修改时间。

If-Modified-Since是标准的HTTP请求头标签,它对应的就是服务器发送过来的该文件的最后服务器修改时间。

在发送http请求的时候,就会将这个最后修改的时间发送到服务器,然后服务器会将这个时间与服务器上当前文件最后修改时间进行比对,如果时间一致,方式如下:

(1).那么返回HTTP状态码304(不返回文件内容),客户端接到之后,就直接把本地缓存文 件显示到浏览器中。

(2).如果时间不一致(说明服务器有了更新的文件),就返回HTTP状态码200和新的文件内容,客户端接到之后,会丢弃旧文件,把新文件 缓存起来,并显示到浏览器中。

代码实例分析:

现在我们在服务器建立一个简单的html文件,然后使用浏览器进行请求,下面是使用Fiddler捕获相关信息。

图示如下:

前端教程

(1).因为是第一次访问该页面,客户端发请求时,请求头中没有If-Modified-Since标签。

(2).服务器返回的HTTP状态码是200,并发送页面的全部内容。

(3).服务器返回的HTTP头标签中有Last-Modified,告诉客户端页面的最后修改时间。

下面我们刷新一下页面,再进行一次请求,图示如下:

前端教程

(1).客户端发HTTP请求时,使用If-Modified-Since标签,把上次服务器告诉它的文件最后修改时间 返回到服务器端了。

(2).因为文件没有改动过,所以服务器返回的HTTP状态码是304,没有Last-Modified,也没有发送页面的内容。

下面我们修改一下网页文件,Fiddler捕获的请求信息如下图:

前端教程

(1).客户端发HTTP请求时,使用If-Modified-Since标签,把上次服务器告诉它的文件最后修改时间 返回到服务器端了。

(2).因为文件被改动过,两边时间不一致,所以服务器返回的HTTP状态码是200,并发送新页面的全 部内容。

(3).服务器返回的HTTP头标签中有Last-Modified,告诉客户端页面的新的最后修改时间。

清除浏览器缓存:

在实际应用中,可能并不需要浏览器缓存,但是也不能要求用户去人为的手动清空浏览器缓存。

所以需要使用一些技巧实现此功能,具体可以参阅js如何实现清空浏览器缓存代码实例一章节。

回复

我来回复
  • 暂无回复内容