以正確的方式加載js腳本/庫

我負責構建樂隊的網站和tumblr。我正在草稿階段。目前正在思考如何處理腳本以優化性能。以正確的方式加載js腳本/庫

基本上，我需要：

的jQuery：操縱DOM處理完成後，以及一些互動。
帶有jPlayer播放列表插件的jPlayer，用於具有Flash後備的HTML5音樂播放器。
從Songkick API（巡迴日期）加載數據的自定義腳本。它會添加巡迴展覽到頁面。應該在DOM準備就緒後發生（Ajax請求）。
一個自定義腳本，使用它們的API從SoundCloud加載歌曲。當用戶點擊音樂播放器的播放按鈕（這些是長音軌，在加載頁面時加載它們是一種不好的做法）時，應該會發生這種情況。

因此，我正在考慮如何構建所有這些腳本，以便在正確的時間順利進行。我已經離開了開發場景多年，但在發佈之前閱讀了一下。現在看到JS的設計模式傾向於使用模塊化方法。我在RequireJS網站上看了一下，可能會試試看。

嗯，我的主要問題是，我應該如何構建我的腳本，以便在正確的時間裝載最佳性能？ RequireJS是否可以解決這些設計模式問題？

對不起，這不是一個語法問題，但更多的是一個思維預編碼問題。我只是想在把我的手弄髒之前好好考慮一下。

問候， O.

2012-10-10 anchnk

屬於上：http://programmers.stackexchange.com/ –

我會走相反的方向;讓自己的手變得骯髒，然後根據可測量的性能問題找出自己的缺點並做出關於如何投入時間的決定。我希望提前做研究，並儘可能以最好的方式做事，但花時間在遊戲的這個階段優化沒有明顯問題的位會浪費你的時間，運輸軟件。 –

我認爲你是在premature optimization風險。我只是通常加載腳本，如果你看到性能問題，那麼你可以引入像Require.js這樣的工具。只有4個腳本，我懷疑你會遇到任何問題。

這就是說，用於加載腳本幾個要點：

加載腳本在<body>（只是</body>結束標記之前），而不是在<head>的底部 - 這種方式的裝載您頁面內容不會被腳本佔用。
裹在document.ready您的自定義腳本：
```
$(document).ready(function() { 
    // your code 
}); 
```
這意味着你的腳本將不運行，直到一切都被加載，避免與加載順序的任何問題。
使用Google的CDN加載jQuery。它速度快，而且（更重要的），很多網站都在使用它，所以它很可能被用戶已緩存：
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> 
```
https://developers.google.com/speed/libraries/devguide

如果你還是擔心不同方法來加載腳本，這是我所知道的最好的資源，每種方法的詳盡的Pro /缺點：

2012-10-10 18:08:03

你好亞歷克斯和加布里爾，昨天看了更多關於這件事，是的你們倆都是對的。我會潛入你提供給Alex的鏈接，非常感謝這些指針。有我需要的所有信息。對於CDN是的，我習慣於使用本地（或另一個CDN）後備。如上所述，對於這樣的數據量和少量代碼，我認爲我不必擔心所有這些。非常感謝，回答。 – anchnk

回答