本文导读:浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制。客户端缓存是否需要是可以在服务端代码上控制的。那就是响应头。响应头告诉缓存器不要保留缓存,缓存器就不会缓存相应内容;如果请求信息是需要认证或者安全加密的,相应内容也不会被缓存。那么,HTTP请求中浏览器是如何缓存数据呢?

一、HTTP请求中浏览器缓存流程图

1、浏览器第一次请求

2、浏览器再次请求时

二、HTTP请求中浏览器缓存流程的文字描述

1、当资源第一次被访问的时候,HTTP头部如下

(Request-Line)  GET /a.html HTTP/1.1

Host    127.0.0.1

User-Agent  Mozilla/5.0 (X11; U; Linux i686; zh-CN; rv:1.9.0.15) Gecko/2009102815 Ubuntu/9.04 (jaunty) Firefox/3.0.15

Accept             text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language     zh-cn,zh;q=0.5

Accept-Encoding     gzip,deflate

Accept-Charset      gb2312,utf-8;q=0.7,;q=0.7

Keep-Alive          300

Connection          keep-alive

HTTP返回头部如下

(Status-Line)       HTTP/1.1 200 OK

Date                Thu, 26 Nov 2009 13:50:54 GMT

Server              Apache/2.2.11 (Unix) PHP/5.2.9

Last-Modified       Thu, 26 Nov 2009 13:50:19 GMT

Etag                "8fb8b-14-4794674acdcc0"

Accept-Ranges       bytes

Content-Length      20

Keep-Alive          timeout=5, max=100

Connection          Keep-Alive

Content-Type        text/html

当资源第一次被访问的时候,http返回200的状态码,并在头部携带上当前资源的一些描述信息,如

 

Last-Modified      // 指示最后修改的时

Etag                // 指示资源的状态唯一标识
Expires // 指示资源在浏览器缓存中的过期时间

接着浏览器会将文件缓存到Cache目录下,并同时保存文件的上述信息

2、当第二次请求该文件时

浏览器会先检查Cache目录下是否含有该文件,如果有,并且还没到Expires设置的时间,即文件还没有过期,那么此时浏览器将直接从Cache目录中读取文件,而不再发送请求

如果文件此时已经过期,则浏览器会发送一次HTTP请求到WebServer,并在头部携带上当前文件的如下信息

 

If-Modified-Since   Thu, 26 Nov 2009 13:50:19 GMT

If-None-Match       "8fb8b-14-4794674acdcc0"

即把上一次修改的时间,以及上一次请求返回的Etag值一起发送给服务器。服务器在接收到这个请求的时候,先解析Header里头的信息,然后校验该头部信息。

如果该文件从上次时间到现在都没有过修改或者Etag信息没有变化,则服务端将直接返回一个304的状态,而不再返回文件资源,状态头部如下

(Status-Line)       HTTP/1.1 304 Not Modified

Date                Thu, 26 Nov 2009 14:09:07 GMT

Server              Apache/2.2.11 (Unix) PHP/5.2.9

Connection          Keep-Alive

Keep-Alive          timeout=5, max=100

Etag                "8fb8b-14-4794674acdcc0"

这样,就能够很大程度上减少网络带宽以及提升用户的浏览器体验。

当然,如果服务器经过匹配发现文件修改过了,就会将文件资源返回,并带上新文件状态信息。

三、浏览器缓存行为还有用户的行为有关!

用户操作

Expires/Cache-Control

Last-Modified/Etag

地址栏回车

有效

有效

页面链接跳转

有效

有效

新开窗口

有效

有效

前进、后退

有效

有效

F5刷新

无效

有效

Ctrl+F5刷新

无效

无效

from:http://www.studyofnet.com/news/391.html

HTTP请求中浏览器缓存的更多相关文章

  1. Ajax请求与浏览器缓存

    在现代Web应用程序中,前端代码充斥着大量的Ajax请求,如果对于Ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度. 1. Ajax Request 使用jQuery框架可 ...

  2. HTTP请求中浏览器的缓存机制

    摘要:在Web开发过程中,我们可能会经常遇到浏览器缓存的问题.本文作者详细解释了浏览器缓存的机制,帮助读者更深层次的认识浏览器的缓存. 流程 当资源第一次被访问的时候,HTTP头部如下 (Reques ...

  3. HTTP请求中的缓存(cache)机制

    http://www.chaorenmao.com/blog/?p=79 流程 当资源第一次被访问的时候,HTTP头部如下 (Request-Line)  GET /a.html HTTP/1.1Ho ...

  4. Java缓存学习之二:浏览器缓存机制

    浏览器端的九种缓存机制介绍 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存 ...

  5. JavaWeb学习篇之----浏览器缓存问题详解

    摘要 1.Etag和Expires中Client 端Http Request Header及Server端Http Reponse Header工作原理. 2.静态下Apache.Lighttpd和N ...

  6. 使用Filter防止浏览器缓存页面或请求结果

    仅仅须要两步: 1.定义一个Filter: /** * 防止浏览器缓存页面或请求结果 * @author XuJijun * */ public class NoCacheFilter impleme ...

  7. 发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存

    AppendFileVersion 是一个VSIX插件支持vs2015意以上版本 是我用来发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存 分享给大家! download ...

  8. WEB请求过程(http解析,浏览器缓存机制,域名解析,cdn分发)

    概述 发起一个http请求的过程就是建立一个socket通信的过程. 我们可以模仿浏览器发起http请求,譬如用httpclient工具包,curl命令等方式. curl "http://w ...

  9. 浏览器缓存如何控制? && 在url框中回车、F5 和 Ctrl + F5的区别是什么?

    第一部分: 浏览器缓存如何控制?   最近在做网站,但是不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存   说明: 浏览器向服务器请求 ...

随机推荐

  1. 15个实用的jQuery技术

    JQuery是目前最流行的JavaScript框架之一,可以显著的提高用户与网络应用的交互. 今天为大家介绍50有用的jQuery技术: 1.移动Box 2.滑动框和标题 3.数据的可视化:使用HTM ...

  2. NGINX的奇淫技巧 —— 3. 不同域名输出不同伺服器标识

    NGINX的奇淫技巧 —— 3. 不同域名输出不同伺服器标识 ARGUS 1月13日 发布 推荐 0 推荐 收藏 6 收藏,707 浏览 大家或许会有这种奇葩的需求...要是同一台主机上, 需要针对不 ...

  3. java基础知识回顾之java Thread类学习(七)--java多线程通信等待唤醒机制(wait和notify,notifyAll)

    1.wait和notify,notifyAll: wait和notify,notifyAll是Object类方法,因为等待和唤醒必须是同一个锁,不可以对不同锁中的线程进行唤醒,而锁可以是任意对象,所以 ...

  4. POJ1159Palindrome

    http://poj.org/problem?id=1159 题意 : 给定一个字符串,问最少插入多少字符,使该字符串变成回文串 思路 : 设原字符串序为X,逆序列为Y,则最少需要补充的字母数 = X ...

  5. SDUT2484算术表达式的转换

    http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2484&cid=1182 题目描述 小明在学习了数据结构之后,突然想起了以前没有解决的算术 ...

  6. hdu 4417 Super Mario 离线线段树

    思路:将点按值从小到大排序,询问按h从小到大排序. 在建立线段树,按h的大小更新树并得到该次查询的结果! 代码如下: #include<iostream> #include<stdi ...

  7. 2013 Multi-University Training Contest 1 Cards

    数据不是很大,直接枚举约数,判断4个条件是否满足! 这样就得到4种卡片,总共2^4种情况,枚举各种情况即可!!! #include<iostream> #include<cmath& ...

  8. sqlserver 空间数据类型

    --.建立有空间数据的表 create table x ( v ,) primary key, geog geography not null, geogWKT as geog.STAsText() ...

  9. lintcode :Invert Binary Tree 翻转二叉树

    题目: 翻转二叉树 翻转一棵二叉树 样例 1 1 / \ / \ 2 3 => 3 2 / \ 4 4 挑战 递归固然可行,能否写个非递归的? 解题: 递归比较简单,非递归待补充 Java程序: ...

  10. React使用rAF动画介绍

    一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...