`

浏览器缓存实现原理

 
阅读更多

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

分享到:
评论

相关推荐

    初探浏览器缓存实现原理-提高性能

    本文将深入探讨浏览器缓存的实现原理。 首先,浏览器缓存的获取路径包括服务器、本地缓存以及缓存服务器。当用户发起一个HTTP请求时,浏览器会根据服务器返回的HTTP响应头信息来决定是从哪个来源获取内容。页面文件...

    浏览器缓存目录设置

    ### 浏览器缓存目录设置 在日常的网络浏览过程中,浏览器缓存的作用非常重要,它不仅能够提高网页加载速度,还能有效减少硬盘碎片的产生,进而提升整体系统的运行效率。本文将详细介绍如何针对不同浏览器(如Fire...

    Chrome浏览器缓存查看导出工具(支持最新版)

    这款工具对于开发者、网站管理员以及那些需要全面了解浏览器缓存工作原理的人来说非常有用。以下是关于Chrome浏览器缓存、如何查看和导出缓存,以及该工具功能的详细解释。 首先,了解Chrome浏览器的缓存机制至关...

    浏览器缓存相关知识.zip

    一、浏览器缓存的分类与原理 浏览器缓存主要分为强缓存和协商缓存两种。 强缓存 强缓存是浏览器直接从客户端缓存中加载资源的方式,适用于长时间不更新的资源。强缓存的实现主要依赖于Expires和Cache-Control这两...

    清除浏览器缓存

    ### 清除浏览器缓存的方法及原理 #### 一、背景介绍 在现代互联网应用中,浏览器缓存机制被广泛采用以提升用户体验和减少网络流量消耗。然而,在某些情况下(如开发测试阶段或网站更新后),我们需要清除浏览器...

    infrared-remote-浏览器缓存demo

    首先,我们需要理解浏览器缓存的工作原理。当用户访问一个网页时,浏览器会将页面上的静态资源(如图片、CSS样式表、JavaScript文件等)存储在本地。这样,当用户再次访问相同页面或相关页面时,浏览器可以直接从...

    php缓存实现原理

    PHP缓存实现原理主要涉及到的是PHP的输出控制(Output Control)机制,这是一组用于管理脚本输出的函数,能够让我们在数据实际被输出到浏览器之前对其进行处理。这些功能对于优化网页性能,尤其是在动态网站中生成...

    ..........

    【标题】: "深入理解Chrome浏览器缓存机制与文件结构" 【描述】: "本资料主要探讨了Chrome浏览器的缓存机制,包括HTTP缓存、磁盘缓存以及如何通过文件系统来查看和分析这些缓存。同时,还涵盖了Chrome浏览器的特定...

    BAT批处理脚本-浏览器缓存.zip

    标题中的“BAT批处理脚本-浏览器缓存.zip”表明这是一个关于使用批处理脚本来管理浏览器缓存的压缩文件。批处理脚本是基于DOS命令行环境的自动化工具,通常用于执行一系列命令,简化重复操作。在这个场景下,脚本...

    清除Jquery缓存

    为了避免由于浏览器缓存导致的开发过程中出现的问题,开发人员需要确保每次修改文件后都能立即看到效果。此时就需要使用方法来清除浏览器的缓存。 ### 使用`jQuery.ajaxSetup({cache:false})`清除缓存 #### 代码...

    web浏览器-缓存详解

    本文将深入解析浏览器缓存的工作原理、类型、以及如何控制和利用缓存来优化网站性能。 一、浏览器缓存的原理 浏览器缓存(Browser Cache)是一种本地存储机制,它会保存用户访问过的网页资源(如HTML、CSS、...

    存储篇 1:浏览器缓存机制介绍与缓存策略剖析(1).md

    浏览器缓存是前端性能优化的重要手段,了解并掌握不同类型的缓存机制对于实现有效优化至关重要。前端工程师不仅需要理论知识的学习,还需要在实际开发中积累经验,形成自己的性能优化思路和实践方法。通过不断的实践...

    【转载】浏览器的工作原理:新式网络浏览器幕后揭秘

    它管理着缓存、Cookie,以及各种网络协议的实现。 5. **JavaScript引擎**:如V8引擎在Chrome中,它负责解释和执行JavaScript代码。JavaScript引擎使用了如JIT(Just-In-Time)编译等技术来提高性能。 6. **数据...

    JSP实现屏蔽浏览器缓存的方法

    首先,我们需要了解浏览器缓存的工作原理。简单来说,当用户访问一个网页时,浏览器会尝试从本地缓存中加载内容,如果本地已经有了缓存数据,就无需再次从服务器请求,这样可以加快网页的加载速度。然而,在数据频繁...

    vbsIE缓存一键清理

    **知识点详解** 1. **VBScript (Visual Basic Script)**: VBScript是Microsoft开发的一种脚本语言,主要...了解上述知识点,用户不仅可以理解该脚本的工作原理,还能学习到关于清理浏览器缓存的其他方法和注意事项。

    海报:浏览器缓存中的人:通过浏览器缓存中毒持续进行HTTPS攻击

    综上所述,该研究论文详细介绍了浏览器缓存中毒攻击的原理、风险、攻击向量的分类,以及可能对用户造成的严重影响。它强调了提高网络安全意识和采取相应防护措施的重要性,以确保用户在网络浏览过程中的安全。

    前端必读:浏览器内部工作原理.pdf

    ### 前端必读:浏览器内部工作原理 #### 一、引言 浏览器作为互联网时代最为普及的应用之一,其内部工作原理对于前端开发者来说至关重要。本文将深入探讨浏览器的基本功能、主流浏览器介绍以及浏览器的主要构成等...

    浅析http协议、cookies和session机制、浏览器缓存.docx

    总的来说,HTTP协议、Cookies、Session机制和浏览器缓存是构建动态Web应用的基础,理解并掌握它们的工作原理和交互方式,是成为一名优秀的Web开发者的必要条件。在实践中,开发者需要根据具体需求灵活运用这些工具,...

    一款chrome浏览器插件能够让所有请求无缓存

    标题中的“一款chrome浏览器插件能够让所有请求无缓存”是指的是一款专为开发者设计的Chrome浏览器扩展程序,它的主要功能是确保所有的网络请求都不会被浏览器缓存。在Web开发和调试过程中,缓存可能会导致旧的数据...

Global site tag (gtag.js) - Google Analytics