具有asyc屬性的腳本仍然會阻止其他腳本執行

注意：我沒有開發此網站 - 我只需處理它。具有asyc屬性的腳本仍然會阻止其他腳本執行

我有一個LAB.js文件，用於在頭部異步加載一系列腳本。再往下，我還有兩個外部腳本，一個在頭部，另一個在身體頂部。

這兩個腳本通常無法訪問。它們都被標記爲「異步」，並且不會阻止文檔加載。但是 - 他們顯然會阻止其他腳本執行。

要清楚的是，第一系列腳本會立即下載，但直到下載其他兩個異步腳本纔會執行。

該網站不公開，並且此類問題無法在jsfiddle中創建。粗插圖：

<!doctype html> 
<head> 
    <!-- This script asynchronously loads many others --> 
    <script src="/js/LAB.js"></script> 

    <script src="slow-server/js/slowscript1.js" async></script> 
</head> 
<body> 
    <script src="show-server/js/slowscript2.js" async></script> 
</body>

信息上Lab.js：http://labjs.com/

實驗室將在前面加上其他幾個腳本標記的頭部被異步加載。它們全部都是立即下載的，但是直到「慢速服務器」腳本響應纔會執行。有時需要一段時間。這在我看來對於具有async屬性的腳本來說是不正確的行爲（並且我正在Chrome中測試）。有什麼我失蹤？

來源

2013-10-25 Dygerati

從this MDN page：

有可以使用這些屬性來選擇了三個可能的模式。如果存在異步屬性，那麼腳本將在可用時立即執行。如果async 屬性不存在，但存在defer屬性，則在頁面完成解析後執行腳本。如果屬性都不存在，則在用戶代理繼續解析頁面之前立即提取並執行腳本。

所以，當一個腳本有異步時，它將立即從服務器獲取，但DOM解析將繼續並行。這部分簡單明瞭。

然後，一旦異步腳本被提取，它就會被執行。這個執行可能在DOM完成加載之前或之後，完全取決於事件加載/解析的時間，它可能在頁面中的其他非異步腳本運行之前或之後。

。注意，因爲JavaScript在瀏覽器是單線程的，一旦這種異步腳本開始執行，沒有其他的腳本將運行，直到該腳本完成，即使它是「異步」。腳本上的異步允許DOM的解析繼續（而不是阻止），但是它不會保持腳本一旦可用就執行，一旦腳本執行，其他處理必須等待腳本完成執行。

如果您希望腳本在DOM和DOM中的任何常規腳本都已加載並運行之後才執行，那麼您應該使用「延遲」而不是「異步」。

僅供參考，如果您想通過實際規格查看所有這些，請登錄here。

如果你想的這一切是如何適用於您的具體情況更詳細的解釋，你必須至少給我們你問什麼腳本的僞代碼表示作爲你的話不是活得不夠清晰。

來源

2013-10-25 19:42:34 jfriend00

感謝您的詳細描述。我唯一不完全理解的部分是其他腳本在獲取兩個異步腳本時被阻塞，而不是在執行時。在我最近的測試中，緩慢的服務器腳本花了3分鐘的時間來響應和下載。其他腳本在整個時間內都未能執行。不過，我會試着推遲，看看它的行爲是否有所不同。 – Dygerati

@Dygerati - 這裏還有其他的東西在玩。瀏覽器會一次打開最大數量的連接，因此它會立即下載的最大數量的連接。所以，如果你有幾個大的東西被下載（即使是異步），由於連接限制，一些非異步的東西可能會卡在它們後面。 – jfriend00

@Dygerati - 另外，請記住，一旦腳本被提取，它將在瀏覽器緩存中，並從那時起，可能幾乎立即從瀏覽器緩存中加載。這可能會使其表現得幾乎不像異步。異步適用於加載腳本的時間，因此如果它立即從瀏覽器緩存中加載，那麼異步並沒有太大的作用。也許你想「延遲」，而不是確保這些腳本不會被執行，直到DOM被解析並且任何非延遲的非異步腳本被運行。 – jfriend00

具有asyc屬性的腳本仍然會阻止其他腳本執行

回答

相關問題