2012-01-30 58 views
0

我的目標是在瀏覽器支持延遲或異步時異步加載腳本。
如果瀏覽器不支持我不關心異步加載(不是我的壞)。
我想確保任何腳本只有在滿足它的先決條件時纔會執行,例如jQuery加載。 我想在加載其他腳本時加載腳本(僅當瀏覽器支持延遲或異步時)。加載腳本asynchronosly並有後備

我想要使用只有瀏覽器的API。我不希望瀏覽器加載任何可靠(或不)的腳本,無論它們有多小,都可以做到這一點。

這必須使用IE8 +,Gecko v.1.9.1 +(例如firefox 3.5。*或firefox 9.0+),webkit(例如chrome),presto(例如Opera)。對於那些我沒有提到的版本,我的意思是最新的穩定版本。

如果可能我不想要任何不簡單的腳本。我只是需要一些簡單的工作來完成這項工作。這意味着:
如果可能的話,我不希望像AJAX調用或花式對象這樣的東西用一些方法來做一些解決方法,如我在其他頁面中看到的。這些是強制異步加載腳本瀏覽器中不支持異步或推遲

我重複:我不需要任何花哨的東西,使腳本異步。如果瀏覽器不支持延遲或異步我不在乎。我只關心腳本被加載,以便每個部分在滿足其先決條件後執行並使用異步或推遲如果瀏覽器支持它

+2

好運重新發明輪子 – Andreas 2012-01-30 10:05:49

+0

對你說,那隻意味着你不知道我在這裏請求。我不想要這個。我只是想確保一切按正確的順序運行。 – brunoais 2012-01-30 11:58:39

+0

主要原因是因爲我不想掛起來下載當瀏覽器支持延遲或異步時會解決掛起的腳本 – brunoais 2012-01-30 12:04:51

回答

2

首先,使用諸如jQuery之類的庫,可以使整個過程在瀏覽器中變得更加簡單可靠。它可能會增加頁面的下載量(只有很小的一部分),但通過高效的腳本加載/執行獲得的速度幾乎總是會超過這個速度。

關於腳本異步和推遲的屬性:

  1. async="async":上一個腳本標記通過IE8/9時根本不支持,腳本立即執行(根據你的問題這是確定)。

  2. defer="defer":在DOM準備好之前,腳本標記將按照順序中的所有內容開始加載延遲腳本出現在HTML中。但是,在Firefox上,腳本通常會在dom準備好後執行。這種差異使得defer不可靠,以確保在dom準備好之後執行功能之前加載腳本。

    1. 如果腳本有下游依賴關係,你必須把它作爲一個標準的腳本標記在body標籤的結束和有:不使用jQuery

    一般準則您的內聯標籤全部在文檔準備好後執行。否則,不能保證腳本將在執行依賴關係之前執行。 Firefox是這裏的主要問題,即使DOM準備好後,「延遲」腳本也可能沒有完成。

  3. 如果腳本沒有下游dependnacies,則將其放在body標籤的末尾,並在腳本標籤上使用async =「async」屬性。 IE會立即渲染它,其他人會在收到它時渲染它。在<head>

    1. 廣場僅有的jQuery:使用jQuery

    一般準則。

  4. 執行所有其他腳本爲$.getScript()

  5. 如果腳本需要儘快執行(如分析),請在主體頂部使用$.getScript(這將是非阻塞請求,但會在客戶端收到文件後立即處理)。

  6. 如果腳本可以等到DOM準備,包裹$.getScript()呼叫$(function() {});

  7. 如果腳本有很多下游的依賴關係,有每一個註冊自己的回調函數爲特定的腳本。在

$(function() { 
    $.getScript("script.js", function() { 
     for(var i = 0; i < myCallbacks.length;i++) { 
     myCallbacks[i](); 
     } 
    }); 
    }); 
+0

令人驚訝的是,jQuery的getScript()變成了一個失敗。儘管它能夠獲取腳本,但在當前使用最多的瀏覽器(FF 3.6,FF11,IE8,IE9 ...)中速度比在頁面底部放置標籤要慢。此外,getScript()依賴於可能在瀏覽器中關閉的緩存(如果發生這種情況,發生兩次下載) – brunoais 2012-04-20 06:38:10

+0

我沒有看到任何腳本加載兩次的證據,查看此測試小提琴http://jsfiddle.net/nKsGP /,我根據請求將網絡服務器設置爲睡眠5秒(模擬慢速腳本)。如果它加載兩次,則需要10秒,但不是。另外,我不太清楚它是如何「更慢」的......加載腳本正在加載腳本。使用$ .getScript()與底層的普通標籤的主要原因是,準備好的事件仍然可以觸發,而不必等待所有腳本加載,並且如果超時,那就太糟糕了。 – Nucleon 2012-04-20 08:27:54

+0

您是否關閉了緩存?如果你沒有,那麼你的測試無法證明我寫的是什麼。 – brunoais 2012-04-20 20:59:49