jQuery：將JavaScript移到頁面底部？

Question

我們正在開發大型ASP.NET應用程序，其中包含許多包含ASCX控件的動態創建頁面。 我們到處都使用了很多jQuery。

我一直在閱讀將內聯JavaScript代碼移到頁面底部是有意義的，因為當它包含在“太早”時它可能會延遲加載頁面。

我現在的問題是： 使用jQuery時這仍然有意義嗎？

大多數代碼都是在ready處理程序中執行的，所以我希望這不會減慢頁面的加載速度。 在我的情況下，多個Usercontrols ASCX擁有所有自己的jQuery位和碎片，並且在渲染頁面中將它們全部移動並不容易。

Answer 1

建議在HTML后面放置腳本，因為順序加載和執行腳本（一次一個腳本）並完全阻止同時加載和解析圖像和CSS文件。

頁面頂部附近的大/滯后/慢速運行腳本可能會導致頁面內容/布局的加載和呈現不必要的延遲。

因為腳本的大小（下載時間）和復雜性（執行時間（dom遍歷等））因素 - 但更重要的是，單個<script> HTTP請求的數量要多得多（請求越少越好）。

使用“document.ready”處理程序可以減少由於執行速度慢導致的延遲 - 但仍然會留下順序HTTP開銷的問題。

推薦閱讀：Nate Koeckley的高性能網站 。

Answer 2

您可以模擬在Cuzillion中對JavaScript進行排序的不同方式，以了解它如何影響頁面加載。

有關頁面元素排序如何影響速度的示例 ，請參閱示例和此博客文章 。

Answer 3

當您包含JS時，從那一點開始加載頁面將推遲，因為JS文件可能包含“document.write”語句。

這意味着整個頁面將從您包含JS文件的位置停止呈現並使瀏覽器變為“白色”或某些東西（至少不顯示頁面的其余部分）所以簡短的回答肯定是肯定的 ... ！

（更長的答案是“可能”，概率為99％）

就像在移動中包含JS（以及內聯JS - 你不應該使用BTW）到底...

如果你在ASP.NET上說你不應該使用jQuery而是使用Ra-Ajax ，BTW會自動包含所有這些“最佳實踐”......

Answer 4

大多數情況下，將JavaScript移動到頁面底部的原因是為了確保在運行JavaScript之前已經創建了JavaScript可能引用的任何DOM元素。 這還可以確保在運行任何JavaScript之前頁面有時間呈現。

在這種情況下，我不擔心在頁面上向下移動JavaScript。