浏览器html缓存

浏览器缓存将文件保存在客户端，好的缓存策略能够减小对网络带宽的占用，能够提升访问速度，提升用户的体验，还能够减轻服务器的负担。所以咱们有必要了解它的实现原理，用来提升网站的性能。

当一个客户端请求web服务器, 请求的内容能够从如下几个地方获取：服务器、浏览器缓存中或缓存服务器中。这取决于服务器端输出的页面信息。页面文件有三种缓存状态。

1.最新的：选择不缓存页面，每次请求时都从服务器获取最新的内容。

2.未过时的：在给定的时间内缓存，若是用户刷新或页面过时则去服务器请求，不然将读取本地的缓存，这样能够提升浏览速度。

3.过时的：也就是陈旧的页面，当请求这个页面时，必须进行从新获取。

 

页面的缓存状态是由http header决定的，一个浏览器请求信息，一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0规定，Cache-Control由HTTP/1.1规定。

 

Cache-Control的主要参数

 

Cache-Control: private/public Public 响应会被缓存，而且在多用户间共享。 Private 响应只可以做为私有的缓存，不能再用户间共享。

Cache-Control: no-cache：不进行缓存

Cache-Control: max-age=x：缓存时间 以秒为单位

Cache-Control: must-revalidate：若是页面是过时的 则去服务器进行获取。

 

Expires：显示的设置页面过时时间

Last-Modified：请求对象最后一次的修改时间 用来判断缓存是否过时 一般由文件的时间信息产生

If-Modified-Since ：客户端发送请求附带的信息 指浏览器缓存请求对象的最后修改日期 用来和服务器端的Last-Modified作比较

 

如IE的设置里面有四种方式(如图)的"每次访问页面检查"，用户使用从新加载或超过了过时日期，浏览器就会认为这个页面是陈旧的(它将发送附加一个If - Modified-Since的信息. 若是页面没有改变，服务器端响应一个304状态 Not Modified，而不发送整个页面，这样就会很快，但服务器必需要生成有效的Last-Modified headers且服务器时间必须是有效的。

 

 

 

一个不进行缓存的服务器端响应

 

HTTP/1.0 200 OK

Content-Type: text/html

Content-Length: 19662

Pragma: no-cache

Cache-Control: no-cache

Server: Roxen/2.1.185

Accept-Ranges: bytes

Expires: Wed, 03 Jan 2001 00:18:55 GMT

 

有时候仅仅设置Pragma: no-cache Cache-Control: no-cache 仍是不保险，须要将过时时间设置成过去的时间就确保了对象不被缓存。

 

一个容许缓存的服务器端响应

 

HTTP/1.1 200 OK

Date: Tue, 13 Feb 2001 14:50:31 GMT

Server: Apache/1.3.12

Cache-Control: max-age=43200

Expires: Wed, 14 Feb 2001 02:50:31 GMT

Last-Modified: Sun, 03 Dec 2000 23:52:56 GMT

ETag: "1cbf3-dfd-3a2adcd8"

Accept-Ranges: bytes

Content-Length: 3581

Connection: close

Content-Type: text/html

 

Cache-Control: max-age=43200 表示缓存12个小时

 

咱们来看一个浏览器缓存的具体例子

第一次请求文件

Request：

GET /file.html HTTP/1.1

Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, application/x-comet, */*

Accept-Language: en-us

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)

Host: 24.5.203.101

Connection: Keep-Alive

 

Response：

HTTP/1.1 200 OK

Date: Tue, 13 Feb 2001 20:00:22 GMT

Server: Apache

Cache-Control: max-age=604800

Last-Modified: Wed, 29 Nov 2000 15:28:38 GMT

ETag: "1df-28f1-3a2520a6"

Accept-Ranges: bytes

Content-Length: 10481

Keep-Alive: timeout=5, max=100

Connection: Keep-Alive

Content-Type: text/html

 

这里返回了Last-Modified和ETag，这两个信息就是用来之后比较当前浏览器缓存的文件是否和服务器端文件一致，若是不一直就获取最新，一直则读取本地缓存。

 

第二次请求

Request：

GET /file.html HTTP/1.1

Accept: */*

Accept-Language: en-us

Accept-Encoding: gzip, deflate

If-Modified-Since: Wed, 29 Nov 2000 15:28:38 GMT

If-None-Match: "1df-28f1-3a2520a6"

User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)

Host: 24.5.203.101

Connection: Keep-Alive

 

Response：

HTTP/1.1 304 Not Modified

Date: Tue, 13 Feb 2001 20:01:07 GMT

Server: Apache

Connection: Keep-Alive

Keep-Alive: timeout=5, max=100

ETag: "1df-28f1-3a2520a6"

Cache-Control: max-age=604800

 

请求中的If-None-Match信息就是第一次响应的ETag，用来验证和当前响应的ETag是否一致。服务器返回Not Modified，浏览器就读取本地缓存。

 

咱们还可使用专门缓存服务器来改善性能。他的原理和浏览器的缓存原理同样，全部的浏览器请求将由缓存服务器响应，缓存服务器能够用本身的缓存文件或获取新的文件来响应用户的请求。所以有了缓存服务器的，将大大提升网站的性能。