JavaScript在Firefox 3中異步加載（根據Firebug）？

Question

我正在嘗試描述一個網站的性能，我相當有信心通過加載頁面上的JavaScript文件來降低速度。

頁面上多次包含相同的JavaScript文件， <script />標簽分散在整個頁面中，而不是包含在底部 。

正如我所懷疑的那樣，在查看FireBug的“網絡”選項卡時，大多數時候（不是全部）加載JavaScript時，都不會請求其他文件。 瀏覽器等待JavaScript完成加載。

但是有一些例外。 有些情況下會加載JavaScript，但與此同時，其他資源似乎也會被加載，例如其他JavaScript文件和圖像。

我一直認為JavaScript阻止了頁面上其他資源的加載。 我是否認為這是錯誤的，或者這種行為是否因瀏覽器或瀏覽器版本而異？

更新：
對於那些解釋了如何加載腳本阻止加載其他資源的人，我已經意識到了這一點。 我的問題是為什么腳本不會阻止加載其他資源。 Firebug顯示某些JavaScript文件不會阻止加載其他資源。 我想知道為什么會這樣。

Answer 1

Javascript資源請求確實是阻塞的，但是有很多方法可以解決這個問題（例如：頭腦中注入DOM的腳本標記，以及AJAX請求），而我自己看不到頁面可能就是這里發生的事情。

包括相同JS資源的多個副本是非常糟糕的，但不一定是致命的，並且是典型的較大的站點，可能已經從單獨的團隊的工作中累積，或者只是簡單的舊的不良編碼，規划或維護。

至於雅虎的建議，在機身底部放置腳本，這提高percieved響應時間，並能提高實際加載時間在一定程度上（因為前面所有的資源都允許異步第一），但它永遠不會是有效作為非阻塞請求（盡管它們具有很高的技術能力）。

這里有非阻塞JS的相當不錯的討論。

Answer 2

我並不完全確定Firebug真實地反映了瀏覽器中發生的事情。 資源加載的時機似乎很好，但我不確定它是否真正反映了究竟發生了什么。 我有幸使用HTTP嗅探器/代理應用程序來監控來自瀏覽器的實際HTTP請求。 我使用Fiddler，但我知道還有其他工具。

簡而言之，這很多都是工具的問題，而不是實際上如何加載資源......至少值得排除。

Answer 3

我想你使用的是Firefox 3.0.10和Firebug 1.3.3，因為這些是最新版本。

Firebug 1.4 beta在網絡選項卡上做了很多改進，但它需要Firefox 3.5。 如果要在Firefox 3.0中進行測試，請使用之前的1.4 alpha版本之一 。 但即使有了改進，我仍然很難理解結果。 我希望Firebug開發人員能夠更准確地記錄下載的每個部分的含義。 對我來說，連接后為什么排隊是沒有意義的。

我的結論是不相信Firebug中的結果，最終使用了WebPageTest 。 來自AOL的出人意料的好;-)

此外，與javascript同時加載什么樣的資源？ 嘗試追蹤同時加載的資源，看看它是否在css / iframe / html-ajax中引用。 我猜測沒有其他任何東西被加載的原因，是因為瀏覽器在看到腳本標記（沒有延遲）時停止解析當前的HTML。 由於無法繼續解析HTML，因此無需再請求。

如果您可以提供指向您正在談論的頁面的鏈接。 這將有助於每個人給出更准確的答案。

Answer 4

我相信內容是下載的，但在JavaScript加載完成之前不會呈現 。

從服務器的POV來看，這並不是什么大不了的事，但對於用戶而言，它可以在速度上產生巨大的差異。

Answer 5

如果您考慮一下，標記必須先完成處理才能繼續呈現內容。 如果標簽使用了document.write或其他一些非常愚蠢的東西怎么辦？ 在腳本標記內的任何內容完成運行之前，頁面無法確定它將顯示的內容。

Answer 6

瀏覽器通常具有打開到單個域的一定數量的連接。
因此，如果您從同一個域加載所有腳本，通常會一個接一個地加載它們。
但是，如果這些腳本是從多個域加載的，則它們將並行加載。

Answer 7

瀏覽器在JavaScript下載期間阻塞的原因是瀏覽器懷疑在腳本內部將創建DOM節點。

例如，腳本中可能存在“dcoument.write（）”調用。

一種向瀏覽器提示腳本不包含任何DOM生成的方法是使用“defer”屬性。 所以，

<script src="script.js" type="text/javascript" defer="defer"></script>

應該允許瀏覽器繼續並行化請求。

參考文獻：

http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer

http://www.websiteoptimization.com/speed/tweak/defer/

Answer 8

正如其他人所說，腳本可能正在通過DOM注入加載其他資源。

Script.aculo.us實際上通過這樣做加載其子組件/腳本 - 將其他<script>標記注入DOM中。

如果您想查看是否是這種情況，請使用Firebug的分析器並查看腳本正在執行的操作。

Answer 9

像其他人說的那樣，一種非阻塞方式是在頁head注入<script>標簽。

但是firefox也可以並行執行加載的<script> ：復制下面的兩行：

http://streetpc.free.fr/tmp/test.js
http://streetpc.free.fr/tmp/test2.js

然后轉到此頁面 ，粘貼輸入文本區域，單擊“JavaScript”，然后“加載腳本”（構建並向head添加<script>子元素）。

在FF中試試：你會看到“test2 ok”，移動對話框看“test ok”。 在其他瀏覽器中，您應該看到“test ok”（后面沒有其他對話框）然后“test2 ok”，（Safari 4除外，在測試前顯示tes2）。

Answer 10

Firefox 3引入了連接並行功能，以便在加載網頁時提高性能，我敢打賭這是你問題的根源;）

當您打開其上有許多不同對象的網頁時，如圖像，Javascript文件，框架，數據源等，瀏覽器會嘗試一次下載其中幾個以獲得更好的性能。

這是關於它的ZDNET博客文章。