sailinglee

浏览: 311458 次
性别:
来自: 上海

最近访客更多访客>>

zq_0752

1040087877

HUAGE1969

leimingchao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

浏览器缓存的研究

博客分类：

Others

浏览器 jQuery XML JavaScript Ajax

1. 概述

1.1. 说明

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

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

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

2. 图片缓存

2.1. 预加载图片代码

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script>

function loadImage(url, callback) {

    var img = new Image(); // 创建一个 Image 对象，实现图片的预下载

    img.src = url;

  

     if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数

        callback.call(img);

        return; // 直接返回，不用再处理 onload 事件

    }

 

    img.onload = function () { // 图片下载完毕时异步调用 callback 函数。

        callback.call(img);// 将回调函数的 this 替换为 Image 对象

    };

};

 

/*function f(){

$('#imgdiv23').append(this);

$('#imgdiv2').append(this);

}*/

</script>

</head>

<body onload="loadImage('http://www.yunnany.cn/jingdiandaquan/UploadFiles_2558/200809/20080901110309997.jpg',function(){alert(' 加载图片完成！ ' + this.width)})">

<div id="imgdiv23"></div>

fdsfsafadsf

<div></div>

</body>

</html>

2.2. 预加载页面截图

2.2.1. 首次加载

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

加载中

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

2.3. 其它页面的代码

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

<html>

<head>

</head>

<body>

<div><img src="http://www.yunnany.cn/jingdiandaquan/UploadFiles_2558/200809/20080901110309997.jpg"/></div>

</body>

</html>

2.4. 其它页面截图

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

加载完成

3. XML 文件缓存

3.1. 说明

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

3.2. 页面代码

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title> 无标题页 </title>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function(){

               $.ajax({url:"http://www.testserver.com:8080/fckeditor/test.xml ",

                    success:function(xml){

                            $(xml).find("province").each(function(){

                                var t = $(this).attr("name");//this->

                                $("#DropProvince").append("<option>"+t+"</option>");

                           });

                     }

               });

            $("#DropProvince").change(function(){

                    $("#sCity>option").remove();

                    var pname = $("#DropProvince").val();

                    $.ajax({url:"City.xml",

                        success:function(xml){

                            $(xml).find("province[name='"+pname+"']>city").each(function(){

                                $("#sCity").append("<option>"+$(this).text()+"</option>");

                            });

                         }

                    });

            });

        });

    </script>

</head>

<body>

    <form id="form1">

    <div>

        <select id="DropProvince" style="width:60px;">

            <option> 请选择 </option>

        </select>

        <select id="sCity" style="width:60px;">

        </select>

    </div>

    </form>

</body>

</html>

3.3. 截图

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

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

首次加载

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

再次加载

查看图片附件

分享到：

设计模式笔记 | BTree — java实现

2010-08-10 17:27
浏览 1359
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

浏览器缓存的研究

1. 概述

1.1. 说明

2. 图片缓存

2.1. 预加载图片代码

2.2. 预加载页面截图

2.2.1. 首次加载

2.3. 其它页面的代码

2.4. 其它页面截图

3. XML 文件缓存

3.1. 说明

3.2. 页面代码

3.3. 截图

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

浏览器缓存的研究

1. 概述

1.1. 说明

2. 图片缓存

2.1. 预加载图片代码

2.2. 预加载页面截图

2.2.1. 首次加载

2.3. 其它页面的代码

2.4. 其它页面截图

3. XML 文件缓存

3.1. 说明

3.2. 页面代码

3.3. 截图

评论

发表评论

相关推荐

“爱股指”上线

a simple mvvm library - bird

阿里已经侵入生活的方方面面了，百度加油吧

Github上的1000多本免费电子书重磅来袭

学习是一种心态

从平安金科转战百度

把笔记本改造成无线路由器 —— 手机抓包牛刀小试

tracker.js

nodejs一些东西

行与思、法与践

有PSD or PNG 自动生成Html系统么？

说说携程面试经历（纯属吐槽）

去你妈的iteye。

打个广告（http://flowergirl229.taobao.com）——清洁产品淘宝网店

Bye Bye

webstorm 4.0 注册码

linux安装mongodb

centos 安装 Node.js 0.8.5

Python2.7的安装

分享MyEclipse6.5下载地址和注册码（代码）

最近访客更多访客>>