浏览器本地缓存

浏览器缓存是很重要的，一次交互，有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时，会闪烁。

跨浏览器的解决办法

try {
document.execCommand(’BackgroundImageCache’, false, true);
} catch(e) {}

a{ background:transparent url(logo.gif) no-repeat scroll left bottom;line-height:300px;padding:30px;}
a:hover{ background-position:-2000px 100%;}

 

其中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方法将会出错。

使用前，必须先声明样式：

.userData {behavior:url(#default#userdata);}

或者使用脚本绑定：
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];
}

一个客户端缓存的实例

sharej最近会推出一项功能，里面将用到大量的客户端缓存，等待一阵吧！工作比较忙，晚上回家已经没多少时间可以做了

参考资料

DOM Storage Answers： http://ejohn.org/blog/dom-storage-answers/
DOM Storage：http://ejohn.org/blog/dom-storage/
Mozilla developer center：http://developer.mozilla.org/en/docs/DOM:Storage
Minimize Flickering CSS Background Images in IE6：http://fivesevensix.com/studies/ie6flicker/