作者:katsulyl_266 | 来源:互联网 | 2023-05-17 23:31
对于web页面中的js和css文件,浏览器并不是每次都请求完整的内容,有时候会直接利用本地的缓存。有一些页面,我们不会经常性的更新,页面内容比较固定,那么如果我们每次请求的时候都要重新加载一遍静态文件
对于web页面中的js和css文件,浏览器并不是每次都请求完整的内容,有时候会直接利用本地的缓存。
有一些页面,我们不会经常性的更新,页面内容比较固定,那么如果我们每次请求的时候都要重新加载一遍静态文件,这无疑对服务器来说是一种浪费,因此我们会希望能够将这些不会经常变动的静态文件缓存到客户端,这样我们在发送http请求时,服务器只要响应部分文件就可以了,那些不会经常变动更改的文件直接从客户端缓存中读取就可以了。
那客户端是如何缓存css,js文件得呢?
我们在访问一个页面时,打开firebug,看看js文件得状态码:
200 表示请求成功 后面就是对GET或者POST请求的应答文档
304 表示文档未按预期修改,客户端有缓冲文档,并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器这时候会告诉客户端,原先缓冲的文档还可以继续使用。此时本地浏览器并没有从服务端加载完整的文件而是读取了本地的缓存文件。
304过程可以得出:1. 由于服务端只是返回简单的头信息,并没有生成完整页面,所以虽然请求依然发出,对于浏览器和服务器来说都更快更轻松了; 2. 我们可以控制浏览器去更新缓存。
现在我们来看下要怎么做;
由于对文档的描述在http头信息中,并且依据304的描述,我们知道,这个属性和 Modified Time有关,我们比对下普通的页面和js的页面的respose的头信息的不同:
我们发现,多了个Last-Modified的属性;
再比对请求,
发现,多了If-Modified-Since;
我们可以这样认为:
1.第一次请求成功返回202;
2.假如返回头信息有Last-Modified属性 则存入浏览器缓存;
3.再次请求,假如请求的为缓存页面,则头信息中加入 If-Modified-Since;
4.服务端通过If-Modified-Since(即上次响应中Last-Modified的值)来判断是否需要更新,否的话返回304;
5.假如返回304,则浏览器则读缓存;
原文地址:http://ilab.iteye.com/blog/1029976