• 深入了解浏览器缓存原理


    浏览器缓存将文件保存在客户端,好的缓存策略可以减少对网络带宽的占用,可以提高访问速度,提高用户的体验,还可以减轻服务器的负担。因此我们有必要了解它的实现原理,用来提高网站的性能。
    当一个客户端请求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,浏览器就读取本地缓存。
     
    我们还可以使用专门缓存服务器来改善性能。他的原理和浏览器的缓存原理一样,所有的浏览器请求将由缓存服务器响应,缓存服务器可以用自己的缓存文件或获取新的文件来响应用户的请求。因此有了缓存服务器的,将大大提高网站的性能。
    参考文章:http://www.webperformance.org/caching/caching_for_performance.htmlCreated by jecray 

  • 相关阅读:
    mysql从视图view简化到带子查询的sql
    my.ini或my.cnf
    Windows文件在linux下每行后出现^M字样
    Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'
    javascript 判断中文字符长度
    该如何正确的使用position属性 它的作用是什么?
    css中em与px的介绍及换算方法
    如何卸载Linux下的Apache?
    HDU 3954 Level up
    HDU 4027 Can you answer these queries?
  • 原文地址:https://www.cnblogs.com/ranzige/p/browser_huancun.html
Copyright © 2020-2023  润新知