2010-11-01 40 views
0

於是我找了絕對的,最快的方式執行以下操作:加載jQuery的絕對最快的方式加上庫

  1. 負荷的jQuery
  2. 加載我-library.js
  3. 執行一些DOM操作

我發現很多矛盾的和過時的信息,但到目前爲止,我覺得我應該做以下幾點:

通過在頭部推遲一些花哨的腳本加載來阻止渲染阻止(請參閱Google Analytic的最新方法)。

從Google CDN加載jQuery以增加緩存命中的機會。

最小化和gzip my-library.js。

使用$(document).ready()來觸發DOM操作。

好吧,去...

+1

*絕對*最快的方式將不會加載jQuery ...哎呀! – galambalazs 2010-11-01 12:45:27

回答

0

我覺得你有2個選擇: 你需要和inline loader script

然後,您需要決定是否要 1)將每個頁面的所有JavaScript動態組合到一個文件中。加載器腳本然後調用相關的JavaScript文件以供所服務的頁面使用。該文件本身將使用類似於modconcatlocal combo handler

動態構建2)或採取並行加載選項管理依賴關係,如labjs

谷歌分析代碼和類似的可以加載頁面後加載。所有這些都應該在關閉的身體標記內,而不是像你剛纔提到的那樣。

爲了最好的機會使用並行方式快速加載Jquery,請確保使用CDN,如Google CDN for JQuery

3

您可能會發現它是通過組合和涅槃在一起快於一個請求加載兩個存儲庫。您必須測量不同之處:Google的CDN服務速度會更快,但您仍然在等待自己的服務器,因此您最好跳過CDN並從服務器獲取所有內容。

2

如果你想優化你的jQuery腳本,你應該使用jQuery Lint來檢查它們。 。 或使用螢火蟲,FireQuery的插件,已經jQuery的皮棉建於

0

我不知道,但你可以做這樣的事情在<頭>

(function(w,d) 
    var js = function(a,b){var c='script',s=d.createElement(c),t=d.getElementsByTagName(c)[0];s.async=true;if(b){if(s.readyState){s.onreadystatechange=function(){if(s.readyState==='loaded'||s.readyState==='complete'){s.onreadystatechange=null;b()}}}else{s.onload=function(){b()}}}s.src=a;t.parentNode.insertBefore(s,t)}; 
    js('//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js', function(){w.initPlugins&&w.initPlugins()}); 
    js('/js/plugins.js', function(){w.jQuery&&w.initPlugins()}); 
    js('//www.google-analytics.com/ga.js'); 
})(window, document); 

你有使用更新的jQuery,因爲它可以加載異步。 在你plugins.js(Closure compiled,gzip壓縮):

window.initPlugins = function(){ 
    // plugin1 
    // plugin2 
    // plugin3 
}; 

這將加載3個文件並行和以正確的順序執行。 我認爲絕對最快的方法是內聯頁面中的文件,但它們不會被緩存(可能是這種情況)。

P.S.如果您使用協議相關的網址進行谷歌分析,您可以在IE6中導致錯誤對話框。

0

使用DOM創建腳本節點是最糟糕的方式,不安全(因爲您不確定在所有瀏覽器中都有相同的行爲,有些可能會並行一些異步)。最好的方法是使用一系列的

document.write('<s'+'cript type="text/javascript" src="whatever you want"></s'+'cript>;'); 

腳本將被並行下載,然後按正確的順序執行。 (按你寫的順序)。

+2

「有些可以並行一些異步」,你的意思是「有些可以順序,有些異步」,不是嗎? JavaScript中沒有並行執行。 – kay 2012-07-15 14:50:48

相關問題