jQuery的/ JavaScript的加載混亂

Question

我在我的網站上使用jQuery和一些普通的JavaScript，我被告知，我會更好地在我的網頁的結束身體標記以最小化的形式加載所有的JavaScript比現在的標題還要多。

我也被告知我應該把所有的JS拼接成一個文件，以保持請求的數量減少，儘管我也被告知有一些我的javascript不能包含在內在這個巨型文件中，因爲它需要FB（例如）。

所以現在我完全困惑。一開始， 1）我使用jquery和jquery.ui，可以將它們集中到一個大文件中並在最後加載？

2）我可以將當​​前出現在我的頁面源代碼中的所有腳本標記包圍的所有內容粘貼到此文件中嗎？

3）我必須留下什麼？

這一切都有點了空前當你是一個學習者

該網站是在http://www.traditionalirishgifts.com/你可以看到我加載：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

以及其他的JavaScript

一堆

Answer 1

正如評論指出的那樣，答案取決於很多變量。

您是否使用任何服務器端Web框架？任何值得花錢的web框架都會爲您提供javascript和css連接的選項。通常，這些選項允許您定義連接發生的準確程度。某些js文件很少會改變，例如jquery，jquery ui。鑑於其他某些文件會經常更改，請舉例說明您自己的應用程序腳本。所有這些都可以在決定連接什麼時考慮到。

如果您可以共享哪種服務器端技術和您使用的是哪種Web服務器，我可以幫助您找到具體的解決方案。

關於你的三個問題，關於管理你的依賴關係。如果您的應用程序腳本或「目前出現在我的頁面源代碼包圍的腳本標記」取決於jQuery或任何其他庫，那麼他們將需要包括AFTER jQuery或所說的庫。

依賴關係也可能存在於DOM中。如果您的腳本直接使用document.write輸出html，那麼您將無法輕鬆移動它們。

我經歷了您鏈接到的網站主頁的html。該文件中的js代碼可以移動到主體結束之前，但您需要確保它們以相同的順序出現。所有的插件，包括他們似乎初始化自己document.ready只發生在所有的html/js/css解析後。

您已經從CDN引用jquery/jqueryui，所以不要將它們添加到並置文件中。

我沒有注意到任何代碼，你將無法連接（由於使用FB）。也就是說，你可以詢問那位告訴你的人解釋原因。

最後，您可以瞭解更多有關優化前端加載時間上YSlow (http://developer.yahoo.com/performance/rules.html)和Google Page Speed (https://developers.google.com/speed/docs/best-practices/rules_intro)

就個人而言，我會建議你繼續前進，只是身體結束前移至一切。如果有事情中斷，那麼就SO問題提出具體針對您收到的錯誤的問題。