[转]css,javascript的预加载

为了提升网站的加载速度，有一个很重要的手段就是在用户浏览过程当中的上游网站作一个文件的预加载。预加载文件通常有两种经常使用的方式：xhr和动态插 入节点的方式。动态插入节点是最为简单也最为普遍的一种异步加载方式(例如yui的Get模块)，而后使用动态插入节点方法加载的文件都会在加载后当即执 行，javascript的执行一方面会占用浏览器js执行进程，另外一方面也可能改变页面结构，而css的执行更有可能让整个页面变化。xhr方式虽然不 会执行脚本，可是因为同域的限制，且现在网站的静态文件都是部署在cdn服务器上，如何预加载css js文件也变有点玄妙了。

 

Stoyan Stefanov 撰文简明的阐述了一种加载文件而不会让之执行的方法。原文可见  http://www.phpied.com/preload-cssjavascript-without-execution/

 

具体的方法是，ie中使用  new Image().src 去预加载文件，而其余浏览器使用动态插入的 <object> 标签来完成加载。

 

部分代码以下

 

 1 window.onload = function () {
 2 
 3     var i = 0,
 4         max = 0,
 5         o = null,
 6 
 7         // list of stuff to preload
 8         preload = [
 9             'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
10             'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
11             'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
12         ],
13         isIE = navigator.appName.indexOf('Microsoft') === 0;
14 
15     for (i = 0, max = preload.length; i < max; i += 1) {
16 
17         if (isIE) {
18             new Image().src = preload[i];
19             continue;
20         }
21         o = document.createElement('object');
22         o.data = preload[i];
23 
24         // IE stuff, otherwise 0x0 is OK
25         //o.width = 1;
26         //o.height = 1;
27         //o.style.visibility = "hidden";
28         //o.type = "text/plain"; // IE 
29         o.width  = 0;
30         o.height = 0;
31 
32         // only FF appends to the head
33         // all others require body
34         document.body.appendChild(o);
35     }
36 
37 };
38 

 

 

demo 可见 http://phpied.com/files/object-prefetch/page1.php?id=1

 

几点说明：

 

1. new Image().src 之因此不能在ff中使用是由于ff对图片实现了一套单独的缓存。 同时safari和chrome看起来也没有被缓存。

 

2. 动态插入的 object 标签须要插入到非 head部分，以触发加载。

 

3. ie7 ie8 也能够经过一些代码使用动态object加载文件（代码注释中有提到）。可是做者发现object 一般会消耗很大， so...

 

 

经过自身的实验发现至关不错的，有需求的同窗不妨一试。