[轉]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...

 

 

經過自身的實驗發現至關不錯的，有需求的同窗不妨一試。