http://blog.csdn.net/windylcx/article/details/5943417
浏览器缓存将文件保存在客户端,好的缓存策略可以减少对网络带宽的占用,可以提高访问速度,提高用户的体验,还可以减轻服务器的负担。因此我们有必要了解它的实现原理,用来提高网站的性能。
当一个客户端请求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
相关推荐
因此我们有必要了解它的实现原理,用来提高网站的性能。 当一个客户端请求web服务器, 请求的内容可以从以下几个地方获取:服务器、浏览器缓存中或缓存服务器中。这取决于服务器端输出的页面信息。页面文件有三种缓存...
一、浏览器缓存的分类与原理 浏览器缓存主要分为强缓存和协商缓存两种。 强缓存 强缓存是浏览器直接从客户端缓存中加载资源的方式,适用于长时间不更新的资源。强缓存的实现主要依赖于Expires和Cache-Control这两...
本文主要介绍分布式缓存服务mencached的分布式实现原理。 缓存本质 计算机体系缓存 什么是缓存,我们先看看计算机体系结构中的存储体系,根据冯·诺依曼计算机体系结构模型,计算机分为五大部分:运算器、控制器、...
当浏览不同Url时,浏览器会自动将当前访问的地址进行一次缓存;而第二次访问时着调用缓存下来的页面,从而达到页面快速加载(页面加载优化)的目的; 因此,我们可以给页面后面设定个不同的值,让页面保持没错访问的...
主要介绍了node.js实现http服务器与浏览器之间的内容缓存操作,结合实例形式分析了node.js http服务器与浏览器之间的内容缓存原理与具体实现技巧,需要的朋友可以参考下
深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...
接着详细分析了底层支持模块的源码实现,包括:选择器sizzle、异步队列deferred、数据缓存data、队列queue、浏览器功能测试support;最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、...
原创,高并发中用处非常大。...实现原理: 通过缓存过滤器实现.do的url请求数据的缓存,这样同一url请求,可以不用访问数据库,直接从缓存中取数据。 实现方式: 后端请求浏览器缓存 后端请求后端缓存
当然这些都不在本文的讨论范围,本文要讨论的是最流行的JavaScript框架jQuery的数据缓存实现原理,这是jQuery1.2.3版开始加入的新功能。 一、 jQuery数据缓存的作用 jQuery数据缓存的作用在中文API中是这样描述的:...
深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...
在浏览器中实现对路由页面的缓存可以减少接口请求,也方便了用户来回切换想搜索的数据列表。 原理 Vue 提供的 keep-alive API实现对路由组件的缓存。 include 属性可以绑定一个数组,里面是需要路由组件的 name 值...
无论是浏览器缓存(如果是chrome浏览器,可以通过chrome:://cache查看),还是服务端的缓存(通过memcached或者redis等内存数据库)。缓存不仅可以加速用户的访问,同时也可以降低服务器的负载和压力。那么,了解常见的...
浏览器原理浏览器缓存机制缓存 http https 项目优化为什么要使用单页面应用 基础实战经验欠缺刷题 js基础 1.let const var let const不存在变量提升 var声明的变量会挂到windows上,让const不会 var是函数作用域,...
本书尝试对jQuery的源码进行系统、完整的介绍和分析,阐述jQuery的设计理念、实现原理和源码实现。 在2010年参与了一款卫星机顶盒用户界面的设计和开发,程序运行在机顶盒中间件供应商提供的一款定制浏览器上,在...
keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 feb-alive与keep-alive差异性 1. 针对activated钩子差异性 keep-alive配合vue-router在动态路由切换的情况下不会触发activated钩子,因为切换的...
反向代理缓存的详细介绍 传统代理: 用户隐藏在代理...我们可以将内容缓存在反向代理服务器上,所有缓存机制的实现仍然采用HTTP/1.1协议。 反向代理服务器不使用缓存: 可将Nginx做为Apache的反向代理服务器,反向代
HTTP Compression技术,但客户端缓存往往却被人们忽略了,即使服务器的缓存让你的页面访问起来非常地快,但她依然需要依赖浏览器下载并输出,而当你加入客户端缓存时,会给你带来非常多的好处.因为她可以对站点中访问最...
常量 CEF代理_system, "“system”", 公开这种代理也是全局代理,重启程序也同样存在,在缓存目录下的"UserPrefs.json"文本中可以看到配置,这种方式的原理是在进行每次请求的时候CEF给应用一次机会让应用可以修改...
4.1 浏览器工作原理(老师讲解1学时,学生理解1学时) 浏览器工作原理如图4-1所示。 图4-1 浏览器工作原理 (1) 浏览器分析超链指向页面的 URL。 (2) 浏览器向 DNS 请求解析 www.tsinghua.edu.cn 的 IP 地址。 (3...