Javascript 实现前端资源预缓存

当JavaScript代码需要操作文档时，涉及到一些资源的调度。如果可以在用户闲置未操作页面的时候能将可能用到的资源事先加载进来，那么需要调用时会得到很好的访问速度。

下面代码实现了Javascript前端缓存资源。主要利用了Image类设置src属性时会触发一个请求url，从而缓存了资源。而且这一操作是异步的。

资源文件（如图片）的缓存记载不会阻塞JS代码的继续运行。而是并行的。这一做法是参考了Google的一些JS代码实现的。

//内容缓存管理器
function XCache(){}
//立刻缓存特定资源
XCache.cache = function(p){
    if(p instanceof Array){
        for(var i=0,len=p.length;i<len;i++)
            (new Image()).src = p[i];
    } else new Image().src = p;
};

//DEMO:

XCache.cache("http://www.test.com/a.jpg");//缓存单张图片，缓存过程不会阻塞线程
XCache.cache("http://www.test.com/test.js");//缓存JS文件，貌似有些浏览器无效，不过不会产生错误
XCache.cache("http://www.test.com/main.css");//缓存css文件，同上，貌似有些浏览器无效，不过不会产生错误
//如果浏览器不对文件类型做严格校验，那么理论上任何合法的文件都会被缓存，在缓存之后调用已缓存的URL资源会直接从缓存读取

XCache.cache([
    "http://www.test.com/a.jpg",
    "http://www.test.com/b.jpg",
    "http://www.test.com/c.jpg"
]);//批量缓存文件资源



//在页面加载成功后缓存a.jpg图片，
//在之后任何对该图片url的引用都将从缓存直接获取（如果浏览器支持）
$(function(){
    XCache.cache("http://www.test.com/a.jpg");
});

另外，在实际测试用，发现非图片文件在Image类src属性会无效，具体表现为请求直接中断，文件并未下载。（Chrome下可以缓存非图片文件）。

这些缓存的代码有个特点，它的运行并不会干扰正常逻辑，甚至这些缓冲代码去除也对源代码毫无影响。

假设缓冲尚未完成，那么直接对URL的请求就会直接从原始链接获取，从而退化成为无缓存代码。

加这些缓存代码的意义就在于在可能的情况下提前下载资源，从而在需要资源的时候直接拿出来。

至于部分浏览器的代码缓存无效，暂时可以忽略，你可以认为这是对使用高级浏览器人的一种奖励。嘿嘿。

那些死守老旧浏览器的用户就无法体验预缓存带来的性能提升了。

当然，如果有时间和精力，我会考虑一下如何让尽可能多的浏览器支持预缓存。