頁面底部的JavaScript？

Question

我已經讀過，最好將所有JavaScript文件保存在網頁的底部。 HTML5 Boilerplate模板似乎同意： http ：//html5boilerplate.com/

並且似乎被廣泛使用。

我的問題是：首先，這是否有任何實際依據？ 我已經在Firebug中進行了測試，它似乎有一些小的影響，但它是否微不足道？ 在CSS文件和腳本文件加載之前，圖像和其他來源似乎沒有開始加載，但是將它們粘在底部似乎沒有太大的區別。

Answer 1

出於最佳實踐原因，這一點非常重要。

當您在標題中加載腳本時，它們會阻止其他下載的發生！ 這包括您的樣式，並且還會阻止您的圖像下載，直到腳本完成。

這是因為JavaScript文件同步加載。

另請注意，如果您不將JavaScript文件移動到頁面底部，則會在加載過程中獲得無格式內容（FOUT） 。 這是因為在腳本加載完成之前，您的CSS不會下載。

---

以下是雅虎表現規則6的摘錄。

腳本引起的第二個問題是阻止並行下載。 HTTP / 1.1規范建議瀏覽器每個主機名並行下載不超過兩個組件。 如果您從多個主機名提供圖像，則可以並行執行兩次以上的下載。 （我已經讓Internet Explorer並行下載超過100個圖像。）然而，在下載腳本時，瀏覽器不會啟動任何其他下載，即使在不同的主機名上也是如此。

---

參考

http://developer.yahoo.com/performance/rules.html/

特別注意規則6 。

Answer 2

我們最近在辦公室進行了這次辯論。 我寫了一篇很長的文章 ，我對這個主題發表了看法。 簡短的回答是，它真的取決於你正在做什么。 對於面向內容的網頁，底部放置似乎效果最好。 但是，當創建以功能為主要優先級的Web應用程序時，頂部的位置具有優勢。

Answer 3

JavaScripts同步加載。 將其與通常較大的文件大小配對，並且由於同步JavaScript加載，您的內容在加載時會延遲。 如果將JavaScripts放在頁面底部，則首先加載其他所有內容，並且JavaScript加載不能阻止任何內容。

Answer 4

基本上，當瀏覽器訪問<script>標記時，它會停止加載文檔的其余部分，直到加載並執行<script> 。