邓学彬(泪闯天涯)的专栏

功能界面相辅相成,重视软件界面设计,努力提高用户体验,致力提升软件价值

浏览器缓存专题

览器缓存是很重要的,一次交互,有95%以上的时间是在处理前端的,如果能提高前端的性能,对提高整个系统的性能是很有帮助的。本专题主要讲的是如何更好地使用浏览器缓存,同时包括了一些今后浏览器缓存的发展趋势,如:globalStorage等。

影响浏览器本地缓存的因素及解决方案
因素:子域名
具体描述:berg.sharej.com/img/123.gif 这个图片,如果按照 sharej.com/berg/img/123.gif这样的方式访问,需要重新加载一次。类似的,大小写不同也会造成重复下载
解决办法:统一使用一个地址可避免重复下载。

因素:Meta头
具体描述:<META HTTP-EQUIV="Pragma" CONTENT="no-cache">或者使用脚本输出了要求浏览器不缓存网页的header
解决方案:合理的按照需求使用。

因素:Firefox的cache机制
具体描述:即使是应用了no-cache 头,firefox还是要先cache ,再根据过期设定决定是否使用。via
解决方案:一般无需解决。因为firefox缓存这些文件只是用作前进/后退。

因素:随机文件名
具体描述:可使用abc.js? 2007120来使浏览器重新加载js文件。一种更安全的方是abc_v071201.js来使浏览器重加载(可通过地址重写实现)。
解决方案:在js、css文件升级后,必要时可进行此处理,避免用户浏览器缓存的旧的文件。

因素:innerHTML
具体描述:IE6在window.onload中用innerHTML动态插入图片的时候会忽略Cache策略,一次加载多张相同图片时,会重复请求。
解决方案:避免在window.onload中使用innerHTML插入图片。

因素:IE6无法缓存背景图片的bug
具体描述:IE6的 ““temporay internet files”设置为“每次访问此页时检查”时, 背景图片将无法被缓存,在鼠标滑过链接背景图片更换时,会产生闪烁。
解决方案:document.execCommand("BackgroundImageCache", false, true);在ie6下执行这条语句即可,Firefox执行时会报错(可用try-cache解决)。用expression也可以达到这个效果最好是用CSS Sprites解决问题。

在浏览器端预先缓存图片的实现
使用Image()对象缓存
使用JavaScript新建一个新的Image()对象,然后将希望预装载的图片URL传递给此对象。通过onLoad()事件句柄同步装载到页面上。demo

通过数组(arrays)缓存多个图片
定义了变量i以及名为imageObj的Image()对象。然后定义了新数组images[],每一个数组元素将存储需要预装载图片的地址来源。最后,使用一个for()循环来遍历整个数组,并对每个元素指定Image()对象,以此将图片都预装载到缓存中。
demo

上面这两种方法都需要浏览器支持javascript才能正常缓存。

使用CSS隐藏需要缓存的图片
采用css的display:none;属性来隐藏图片。
demo

使用css中的背景图片
可以为一个元素定义背景样式,然后将背景图片移到不可见的位置。IE6在““temporay internet files”设置为“每次访问此页时检查”时无效。
demo
上面这两种方法都需要浏览器正常解释css才能正常使用

相册中图片的预加载
上面提到了四种预先缓存图片的方法,个人感觉第二种方法最好。因为使用第二种方法可以方便的控制加载的时间,不会影响之前页面的打开速度,而且只要支持js的浏览器都能正常使用。
demo
这个例子比较简单,但是已经能实现预加载了,在打开缩略图页面时,只要开启了缓存的浏览器,大图就会在页面结束后逐一被载入。但是一些具体的加载策略还没有做考虑。

鼠标滑过背景图的切换
如前所述,IE6的 “temporay internet files”设置为“每次访问此页时检查”时, 背景图片将无法被缓存,在鼠标滑过链接时(不管是否有背景图切换),会产生闪烁。其他浏览器都能很好的通过超链接的hover来设置背景图片实现鼠标滑过,背景图切换。

IE6闪烁的原因
首先总结ie6中发生闪烁的原因,最后给出一个解决方案。

定义一个这样的样式:

.Example a{
background-image:url(some image);
}
下面是所有会引发闪烁的原因:

Background
当此元素background被设置成以下的值时,会发生闪烁:
background-color: transparent
background-repeat: repeat
background-position: 只要设置了都会闪烁

元素的面积
需要这个元素不闪烁,这个元素的面积必须要大于2500px^2。 =。=

.example a {
  width: 50px;
  height: 50px;
background-image:url(some image);
}
.example a {
  width: 50px;
  height: 40px;
background-image:url(some image);
}
上面一个样式不会闪烁而下面一个样式会闪烁……

图片是否透明gif
当背景图片是一个带透明效果gif时,会闪烁。

跨浏览器的解决办法
<script>
try {
  document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>
<style>
a{ background:transparent url(logo.gif) no-repeat scroll left bottom;line-height:300px;padding:30px;}
a:hover{ background-position:-2000px 100%;}
</style>
<a href="/">&nbsp;</a>
其中logo为一个包含原图和翻转图片的大图片。在IE6,IE7,firefox2.0,opear9下测试通过

IE中的userdata的使用
Cookies也能达到在客户端缓存数据的作用,但是cookies的大小限制很严格(4K),所以不能用来缓存过多的用户数据, userdata的出现解决了这个问题。每个网页的UserData存储区数据大小可以达到64 Kb,每个域名可以达到640 Kb。
IE 5以上的IE浏览器才支持userdata这个行为。在用户机器上,userdata默认是存储在这个位置:C:Documents and Settingsyour login nameApplication DataMicrosoftInternet ExplorerUserData
userData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存 (cache)中。一旦UserData存储区保存以后,即使IE浏览器关闭或者刷新了,下一次进入该页面,数据也能够重新载入而不会丢失。
在HTML、HEAD、TITLE和STYLE标记上应用了userData行为后使用save和load方法将会出错。

使用前,必须先声明样式:

或者使用脚本绑定:
object.style.behavior = "url('#default#userData')"
object.addBehavior ("#default#userData")

csdn中列有userdata成员和方法表。

demo

Userdata 的作用域问题
当我在/forum/a这个页面中执行一次u.Save("sss", "just a forum", 365, "forum");后,userdata的目录下出现了一个sss[1].xml文件,内容是:

同时,在/forum/b这个页面中执行alert(u.Load("sss", "forum"));时,能够取到userdata中的内容。 而在“/”这个页面中是取不到刚才存放进去的内容的,同样的,在“/topic/1234”也是取不到内容的。
类似的,执行u.Save("forum", "just a forum", 365, "value");后再alert的结果和上面的结果相同。
个人觉得userdata和cookies一样,是和path相关的。同一目录下的所有页面能共享同一个文件中的同一属性(Attribute)。因此在使用的时候要注意目录结构的问题。

Userdata的超时设置
Expires这个属性是用来设置userdata的超时时间的。Userdata的超时设置是针对一个文件的,一旦过期,整个文件都过期了,不能单独设置每个属性的过期时间。

其他问题
如果 userdata被人为删除,此时执行o.getAttribute()、o. setAttribute()会报错:“Error:数据无效。”在使用这两个方法之前, try-catch o.load()可以屏蔽这个错误,但是userdata就无法正常使用了,除非修改存储的文件名。

删除userdata的时候不能像删除cookie一样,用new Date(0)来制造过期时间。315532799000 是格林威治时间1979年12月31日23时59分59秒。这是删除UserData的最靠前的一个有效expires时间了。

如果在一个浏览器进程中重复删除、写入userdata数据,userdata空间将很快被撑满,因为每次删除都是逻辑删除,等到浏览器进程结束后才会真正执行删除操作。

非IE浏览器“userdata”的解决方案
sessionStorage
从firefox 2.0开始,开始支持HTML5,同时也就支持了sessionStorage,这是一个只能在session生命周期内使用的对象,最大的用途在于用于保存一些临时的数据防止用户意外刷新页面,同时,在浏览器意外关闭并恢复页面时,sessionStrorage中存储的信息也会被同时恢复。Firefox默认允许一个域名存储5120KB的数据。
demo(必须要上传到服务器上才能正常运行)

下面是HTML5定义的接口:
interface Storage {
readonly attribute unsigned long length;
DOMString key(in unsigned long index);
DOMString getItem(in DOMString key);
void setItem(in DOMString key, in DOMString data);
void removeItem(in DOMString key);
};

作用域问题
Firefox中的sessionStorage在域名下任意页面存储后,整个域名下都可以使用存储的项目。

其他问题
在浏览器crash后,restore页面的session也不见了,(firefox2.0) 。

globalStorage
这个也是html5中提出来,在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,并且存储容量比IE的userdata大得多,一个域下面是5120k。和sessionStorage一样,域中任何一个页面存储的信息都能被所有的页面共享。

作用域
globalStorage['z.baidu.com'] 所有z.baidu.com下面的页面都可以使用这块空间
globalStorage['baidu.com'] 所有baidu.com下面的页面都可以使用这块空间
globalStorage['com']:所有com域名都可以 共享的使用这一块空间
globalStorage[''] :所有页面都可以使用的空间

现在Firefox只支持当前域下的globalStorage存储, 如果使用公用域会导致一个这样一个类似的错误“Security error" code: "1000”。

过期时间
按照HTML5的描述,globalStorage只在安全问题或者当用户要求时才会过期,浏览器应该避免删除那些正在被脚本访问的数据,并且userdata应该是用户可写的。

因此我们的脚本要能够控制过期时间,可以在globalStorage的某个区域存储过期时间,在load的时候判断是否过期,可以在一定程度上解决过期时间的问题。

存储时,同时存储过期时间
Save = function(content, expires, attribute, fileName){
var date = new Date();
date.setSeconds(date.getSeconds() + expires);
globalStorage[domain][fileName + "__expires"] = date.getTime();
}
Load时判断是否过期,过期则删除:
Load = function(attribute, fileName){
var date = new Date();
if(parseInt(globalStorage[domain][fileName + "__expires"]) < parseInt(date.getTime()) ){
d.Remove(attribute, fileName);
d.Remove(attribute, fileName + "__expires");
}
return globalStorage[domain][fileName + attribute];
}

 

阅读更多
个人分类: 技术文章
想对作者说点什么? 我来说一句

js浏览器缓存.doc

2011年11月22日 182KB 下载

google cleaner

2011年11月01日 675KB 下载

HTTP+JS+浏览器缓存技术

2016年12月02日 122KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭