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

我試圖描述一個網站的性能，我相當有信心正在通過在頁面上加載JavaScript文件而放慢速度。JavaScript在Firefox 3中異步加載（根據Firebug）？

頁面上多次包含相同的JavaScript文件，並且<script />標籤分散在整個頁面中，而不是included at the bottom。

正如我懷疑的那樣，當查看FireBug的「Net」選項卡時，大部分時間（不是全部）在加載JavaScript時，不會請求其他文件。瀏覽器等待JavaScript完成加載。

但是有一些例外。有幾次JavaScript被加載，但同時其他資源似乎被加載，例如其他JavaScript文件和圖像。

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

UPDATE：
那些誰解釋瞭如何加載腳本阻止其他資源的加載，我已經意識到了這一點。我的問題是爲什麼一個腳本不會阻止加載其他資源。 Firebug顯示一些JavaScript文件不會阻止加載其他資源。我想知道爲什麼會發生這種情況。

來源

2009-06-04 Dan Herbert

RE：更新 - 我認爲，如果你讀的答案，你就會明白爲什麼。也就是說，這些腳本元素可能正在注入DOM。如果您認爲它比我想看DOM樹和實際源代碼HTML的比較更具異國情調。 – annakata 2009-06-09 16:23:30

Javascript資源請求確實是阻塞的，但是有一些解決方法可以解決這個問題（比如：DOM注入腳本標記和AJAX請求），這些方法很可能就是這裏發生的事情。

包含相同JS資源的多個副本是極其糟糕但不一定是致命的，是典型的大型網站，可能來自單獨團隊的工作，或者只是普通的舊的錯誤編碼，計劃或保養。

就雅虎建議將腳本放在主體底部而言，這改進了響應時間，並且可以將實際加載時間提高到一定程度（因爲所有先前的資源都被允許異步優先），但它永遠不會像無阻塞的請求那樣有效（儘管它們具有很高的技術能力）。

非常體面的討論非阻塞JS here。

來源

2009-06-04 14:23:22 annakata

如果我可能會問，哪裏在頁面的底部？頭標籤應該在身體之前。 – 2009-06-15 20:41:41

@the_drow - 我不確定我明白你在問什麼，但是如果你在「底部」引用腳本，那就意味着將它們直接放在身體定義的最後一個標記中，而不是在頭部之內。請注意，這不是我首先推薦的，但它是合理的次優。 – annakata 2009-06-16 07:55:51

我相信內容是向下的，但不是呈現，直到JavaScript完成加載。

這是從服務器的POV，沒有太大的交易，但對用戶來說，它可以在速度上有很大的不同。

來源

2009-06-04 12:40:24 MiffTheFox

根據雅虎最佳實踐頁面（我在我的問題中鏈接到的），瀏覽器在JavaScript完成加載之前不會下載內容。 – 2009-06-04 12:43:41

JavaScript請求被阻止，儘管有解決方法。 – annakata 2009-06-04 14:15:06

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

來源

2009-06-04 14:12:21 Scimon

我並不確定Firebug提供了瀏覽器內正在發生的事情的真實反映。資源加載的時機似乎很好，但我不確定它是否真正反映了正在發生的事情。使用HTTP嗅探器/代理應用程序監視來自瀏覽器的實際HTTP請求，我的運氣更好。我使用Fiddler，但我知道還有其他工具。

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

來源

2009-06-09 16:08:52

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

來源

2009-06-09 16:14:07

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/

來源

2009-06-09 21:25:19

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

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

我的結論並不是相信Firebug中的結果，而是最終使用了WebPageTest。這是來自美國在線驚人的好處;-)

此外，什麼樣的資源被加載在同一時間的JavaScript？嘗試追查同時加載的資源，並查看它是否在css/iframe/html-ajax中引用。我在猜測爲什麼沒有其他東西被加載的原因，是因爲瀏覽器在看到腳本標記（不帶延遲）時停止解析當前的HTML。由於它無法繼續解析HTML，因此它沒有其他要求。

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

來源

2009-06-09 22:48:11 gregers

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

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

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

來源

2009-06-10 01:51:18 cwash

與其他人一樣，一種非阻塞方式是在頁head中注入<script>標籤。

但Firefox也可以執行載入<script> S IN並行：複製下面的兩行：

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

然後去this page，粘貼在輸入文本區域，單擊「JavaScript的」，然後選擇「加載腳本」（其構建<script>子元素並將其添加到head）。

嘗試在FF中：您會看到「test2 ok」，移動對話框以查看「test ok」。在其他瀏覽器中，您應該看到「test ok」（沒有其他對話框），然後是「test2 ok」（Safari 4除外，測試前會顯示tes2）。

來源

2009-06-10 15:59:11

火狐3推出了連接並行功能，可以提高性能的同時，加載網頁，我敢打賭，這是你的問題的根源;）

當您打開一個網頁，上面有許多不同對象，像圖片， Javascript文件，框架，數據提要，等等，瀏覽器試圖通過一次下載它們幾個到獲得更好的性能。

Here's the ZDNET blogpost about it.

來源

2009-06-16 04:48:54

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

回答

相關問題