頁面底部的JavaScript？

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

而且似乎被廣泛使用。

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

2012-08-02 Wolfe

大多數腳本都需要加載DOM，如果您將它們放在頁面的頂部，則無法保證。雖然有一些例外，由於某些原因，modenizer.js需要添加到頁面的頂部，因爲它需要在DOM完全加載之前執行。例如，當使用jQuery文檔時，它會在DOM完全加載但在圖像之前觸發。但是，使用窗口準備就緒後，圖像加載後也會觸發。 – Nope 2012-08-02 22:59:15

有關JavaScript位置的基本原理，網址爲http://robertnyman.com/2008/04/23/where-to-include-javascript-files-in-a-document/。 – 2015-09-14 18:56:04

這對於最佳實踐原因非常重要。

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

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

另請注意，如果您不將JavaScript文件移動到頁面底部，您將在加載過程中獲得flash of unstyled content (FOUT)。這是因爲在腳本完成加載之前，您的CSS不會下載。

下面是來自雅虎性能規則6.

引起腳本阻止並行下載的第二個問題的摘錄。 HTTP/1.1規範建議瀏覽器每個主機名並行下載至少兩個組件。如果您從多個主機名提供圖像，則可以同時發生兩個以上的下載。（我已經讓Internet Explorer並行下載了超過100張圖片。）然而，當腳本正在下載時，即使在不同的主機名下，瀏覽器也不會啓動任何其他下載。

參考

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

特別要注意rule 6。

來源

2012-08-02 22:53:11 Undefined

另請參閱http://en.wikipedia.org/wiki/Flash_of_unstyled_content – underbar 2012-08-02 22:56:09

@underbar感謝您的領導，包括在我的回答 – Undefined 2012-08-02 22:56:24

注意有例外。某些腳本需要先執行，並且需要位於頁面頂部。 Modernizr.js就是其中之一。不知道爲什麼。 – Nope 2012-08-02 23:03:12

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

來源

2012-08-02 22:53:50 ahren

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

來源

2012-08-02 22:54:10 wanovak

我們最近在辦公室進行了這場辯論。我寫了a lengthy post，我在這個主題上闡述了我的看法。簡短的回答是，它真的取決於你在做什麼。對於面向內容的網頁，底部放置看起來效果最好。然而，當一個人創建以功能性爲主要優先級的Web應用程序時，放置在頂部具有優勢。

來源

2013-08-24 17:45:07 VangelisB

+1我在這個主題上看到的所有回覆和博客以及意見幾乎重複了相同的3個事實，過度。你是第一個給現實世界的人「取決於你在做什麼」有點聲明。做得好。 – monsto 2013-09-05 17:02:54

頁面底部的JavaScript？

回答

相關問題