快捷導航

預加載css或javascript的js代碼

更新時間：2010年04月23日 20:03:30 作者：

為了提高網(wǎng)站的加載速度，有一個很重要的手段就是在用戶瀏覽過程中的上游網(wǎng)站做一個文件的預加載。

預加載文件一般有兩種常用的方式：xhr和動態(tài)插入節(jié)點的方式。動態(tài)插入節(jié)點是最為簡單也最為廣泛的一種異步加載方式(例如yui的Get模塊)，然后使用動態(tài)插入節(jié)點方法加載的文件都會在加載后立即執(zhí)行，javascript的執(zhí)行一方面會占用瀏覽器js執(zhí)行進程，另一方面也可能改變頁面結(jié)構(gòu)，而css的執(zhí)行更有可能讓整個頁面變化。xhr方式雖然不會執(zhí)行腳本，但是由于同域的限制，且如今網(wǎng)站的靜態(tài)文件都是部署在cdn服務(wù)器上，如何預加載css js文件也變有點玄妙了。

Stoyan Stefanov 撰文簡明的闡述了一種加載文件而不會讓之執(zhí)行的方法。原文可見 http://www.phpied.com/preload-cssjavascript-without-execution/

具體的方法是，ie中使用 new Image().src 去預加載文件，而其他瀏覽器使用動態(tài)插入的 <object> 標簽來完成加載。
部分代碼如下

復制代碼代碼如下:

 
window.onload = function () { 

var i = 0, 
max = 0, 
o = null, 

// list of stuff to preload 
preload = [ 
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png', 
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js', 
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css' 
], 
isIE = navigator.appName.indexOf('Microsoft') === 0; 

for (i = 0, max = preload.length; i < max; i += 1) { 

if (isIE) { 
new Image().src = preload[i]; 
continue; 
} 
o = document.createElement('object'); 
o.data = preload[i]; 

// IE stuff, otherwise 0x0 is OK 
//o.width = 1; 
//o.height = 1; 
//o.style.visibility = "hidden"; 
//o.type = "text/plain"; // IE 
o.width = 0; 
o.height = 0; 

// only FF appends to the head 
// all others require body 
document.body.appendChild(o); 
} 
}; 

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

幾點說明：
1. new Image().src 之所以不能在ff中使用是因為ff對圖片實現(xiàn)了一套單獨的緩存。同時safari和chrome看起來也沒有被緩存。

2. 動態(tài)插入的 object 標簽需要插入到非 head部分，以觸發(fā)加載。

3. ie7 ie8 也可以通過一些代碼使用動態(tài)object加載文件（代碼注釋中有提到）。但是作者發(fā)現(xiàn)object 通常會消耗很大， so...

通過自身的實驗發(fā)現(xiàn)相當不錯的，有需求的同學不妨一試。

您可能感興趣的文章: