浏览器缓存的研究 - bluesky - JavaEye技术网站

来源：百度文库 编辑：神马文学网 时间：2024/04/27 23:23:04

1. 概述

1.1. 说明

浏览器默认情况下缓存是开启的，当我们向服务器发送某个请求并正确返回（状态码为 200 ）的时候，返回的内容（包括页面、图片、 css 文件、 js 文件、 xml 文件等）是自动被缓存的。这样在以后需要请求同样内容的时候，浏览器会先从缓存中查找，如果缓存的内容没有过期，则直接返回缓存的内容，否则则会去服务器再请求一次并返回结果并在浏览器缓存。（如果是刷新页面的情况，则会去服务器检查一次浏览器缓存的内容是否已经有新的更新，如果有新的更新，则重新返回新的内容并缓存，否则（状态码为 304 ）则直接从浏览器缓存中取得内容。）

我们的需求只是在第一次请求页面的时候，把以后将要加载的较大文件一次性加载完成并缓存在浏览的缓存中，这样以后访问页面请求同样内容的时候就会直接从缓存中取得了。

由于缓存文件存放在硬盘上一个隐藏目录，所以，即使断电或重启电脑之后，缓存的内容依然存在依然可用。

2. 图片缓存

2.1. 预加载图片代码

 

Html代码
  1.   
  2.   
  3.   
  4.   
  5.  type="text/javascript" src="jquery.js">  
  6.   
  7.   
  8.   
  9.   
  10.   
  11.  onload="loadImage('http://www.yunnany.cn/jingdiandaquan/UploadFiles_2558/200809/20080901110309997.jpg',function(){alert(' 加载图片完成！ ' + this.width)})">  
  12.   
  13.  id="imgdiv23">
  
  •   
  • fdsfsafadsf   
  •   
  •   
  •   
  •   
  •   
  •    
    •  

     

    2.2. 预加载页面截图

    2.2.1. 首次加载

    只是加载图片，并不显示图片。

     

     

    加载中

    加载完成（显示图片的宽度）

    2.3. 其它页面的代码

    该页面加载一张图片，该图片与上面预加载的图片 url 一样。

    Html代码
    1.   
    2.   
    3.   
    4.   
    5.   
    6.   
    7.   
    8.   
    9.  src="http://www.yunnany.cn/jingdiandaquan/UploadFiles_2558/200809/20080901110309997.jpg"/>
        
    10.   
    11.   
    12.   
    13.    
     

     

    2.4. 其它页面截图

    该图片会从浏览器缓存中直接读取，瞬间加载完成。

     

     

    加载完成

    3. XML 文件缓存

    3.1. 说明

    对于 xml 文件是否是从缓存读取的方法是通过 firefox 的 httpfox 插件观察 http 请求 header 信息（服务器端响应状态码）来完成的。

    3.2. 页面代码

     

    Html代码
    1.  xmlns="http://www.w3.org/1999/xhtml">  
    2.   
    3.  runat="server">  
    4.   
    5.     </font></strong> 无标题页 <strong><font color="#006699">  
    6.   
    7.      src="jquery.js" type="text/javascript">  
    8.   
    9.      type="text/javascript">  
    10.   
    11.         $(document).ready(function(){   
    12.   
    13.                $.ajax({url:"http://www.testserver.com:8080/fckeditor/test.xml ",   
    14.   
    15.                     success:function(xml){   
    16.   
    17.                             $(xml).find("province").each(function(){   
    18.   
    19.                                 var t = $(this).attr("name");//this->  
    20.   
    21.                                 $("#DropProvince").append(""+t+"");   
    22.   
    23.                            });   
    24.   
    25.                      }   
    26.   
    27.                });   
    28.   
    29.             $("#DropProvince").change(function(){   
    30.   
    31.                     $("#sCity>option").remove();   
    32.   
    33.                     var pname = $("#DropProvince").val();   
    34.   
    35.                     $.ajax({url:"City.xml",   
    36.   
    37.                         success:function(xml){   
    38.   
    39.                             $(xml).find("province[name='"+pname+"']>city").each(function(){   
    40.   
    41.                                 $("#sCity").append(""+$(this).text()+"");   
    42.   
    43.                             });   
    44.   
    45.                          }   
    46.   
    47.                     });   
    48.   
    49.             });   
    50.   
    51.         });   
    52.   
    53.       
    54.   
    55.   
    56.   
    57.   
    58.   
    59.      id="form1">  
    60.   
    61.     
        
    62.   
    63.          id="DropProvince" style="width:60px;">  
    64.   
    65.              请选择   
    66.   
    67.           
    68.   
    69.          id="sCity" style="width:60px;">  
    70.   
    71.           
    72.   
    73.     
      
  •   
  •       
  •   
  •   
  •   
  •    
    •  

     

    3.3. 截图

    通过比较可以发现首次加载之后再次加载页面的时候， xml 文件是直接从浏览器缓存中获取的。

     

    首次加载的时候状态码为 200 。（ Result 列）

    首次加载

    再次加载的时候 Result 列为（ Cache ）。

    再次加载

    浏览器缓存的研究 - bluesky - JavaEye技术网站 浏览器缓存 - Rambing - JavaEye技术网站 浏览器缓存总结 - 一生一火花 - JavaEye技术网站 利用 iBatis 缓存 - zxjava - JavaEye技术网站 浏览器加载和渲染网页的过程 - - JavaEye技术网站 zhangjunji111的博客 - JavaEye技术网站 卡布奇诺 - JavaEye技术网站 JSTL使用 - - JavaEye技术网站 enum用法 - - JavaEye技术网站 ant 安装 - - JavaEye技术网站 Android的MediaPlayer架构介绍 - 狂徒的 - JavaEye技术网站 Emacs的基本操作 - 飞奔的火鸟 - JavaEye技术网站 Nginx的安装 - 奔跑的羚羊 - JavaEye技术网站 Servlet,Filter的url-pattern详解 - LuckyFox - JavaEye技术网站 SHTML 教程 - jack的Blog - JavaEye技术网站 katta初体验 - 疯子的遐想 - JavaEye技术网站 Activity文档翻译 - 醋溜的 - JavaEye技术网站 HBase的概念和性能选项 - - JavaEye技术网站 中国的政府官员级别组织结构 - FutureInHands - JavaEye技术网站 response.encodeURL的用法 - 神雕大侠 - JavaEye技术网站 哈佛大学凌晨四点半的景象[转] - - JavaEye技术网站 哈佛图书馆的二十条训言 - JohnnyCan - JavaEye技术网站 几款在线文本编辑器的比较 - - JavaEye技术网站 excel去掉中间的空格 - - JavaEye技术网站