將JS加載到底部而不是文檔頂部的好處

Question

將JS加載到文檔底部，而不是頂部，真正的好處是什麼（如果有）。看起來頁面加載和JS依賴功能有一個短暫的延遲。

我使用html5boilerplate開始我的所有模板，但我不確定在底部加載JS的好處是多少。

它是否真的使所有的差異，如果是這樣，爲什麼？

Answer 1

1. 如果您包括您的頁面底部的外部JS文件，你給你的HTTP請求到視覺顯示將要呈現給客戶，而不是給優先級互動或動態的邏輯。我相信，如果您不使用內容交付網絡將圖像傳送到客戶端，那麼您一次最多隻能處理2個HTTP請求。你不想浪費這些請求的邏輯，因爲我們都知道最終用戶是多麼不耐煩。

2. 通過在文件結尾處加載js，您可以訪問DOM（大部分時間）而無需調用document.ready（）函數。你知道，如果頁面渲染最終使你的JavaScript代碼，必要的頁面元素通常已經加載。

還有一些更多的原因，但是這些是我嘗試記住的時候感覺如此尷尬以便將所有j放在底部的重要原因。

Answer 2

取決於js中的內容。如果只是希望它在頁面加載時「去」，或者通過jquery的代碼圍繞您的代碼：$(function(){})或將其放置在頁面的底部

Answer 3

Google搜索將返回大量結果，以說明您爲什麼要執行此操作所以你會看到什麼改進。檢查出一些以下鏈接：

• High Performance Web Sites: Rule 6 - Move Scripts to the Bottom
• Rails Best Practices: Scripts at Bottom

基本上，這樣做的主要原因是，你會縮短渲染網頁的時間。從第一篇文章：

[我]更好地將腳本從 頂部移動到儘可能低的頁面。 其中一個原因是啓用漸進式 渲染，但另一個是實現 更大的下載並行化。

Answer 4

當下載所引用的腳本時，瀏覽器通常不會並行下載其他文件，從而減慢了頁面加載速度。

參考：Best Practices for Speeding Up Your Web Site