在HTML頁面中何處加載JavaScript腳本

Question

我正在開發一個jquery頁面，我認為它在加載時會有點慢，因為一開始我會加載所有js文件。

如果我一開始只加載需要的內容，並且在每個部分中都加載需要的內容，會更快嗎？

現在，我的網頁上以及之后的所有部分（首頁，第2頁，第3頁）都調用了所有腳本...

我將網頁結構化為一個html文件，然后導航至每個部分。 每個部分都是這樣的：

<div data-role="page" id="secion2" data-theme="e">
<!--<script type='text/javascript' src='javascript/createFbAlbums.js'></script> -->
**LOAD SCRIPTS HERE**
<div data-theme = "f" data-role="header" data-id="fixedNav" data-position="fixed">
    <h1>Page 2</h1>
    <a href="#home" data-icon="home" data-iconpos="notext"></a>

</div> <!-- /header -->
<div data-role="content">
     <ul data-role="listview" data-inset="true" class="managementEvents">   
        <li data-theme = "f"><a href="#expositivo">Page2</a></li>
        <li data-theme = "f"><a href="#page3">Modify Exposiciones</a></li>
    </ul>        
</div> <!-- /content -->

將它們加載到本代碼段中注釋的部分中。 這是否等於開始時的負載？

或在javascript中執行以下操作：

$(document).on("pageinit", '#section2', function(){
**LOAD HERE SCRIPTS**
Javascript code here doing everything in that page
});

我有點迷路，因為我不知道這是否可以，是否會破壞頁面或無法加快加載速度。

Answer 1

通常的建議（例如，在YUI的“加快網站速度的最佳做法”中 ）是，除非您有充分的理由要做其他事情，否則請將腳本放在頁面的最后，緊挨着</body>標簽：

<p>Content</p>
<div>More content</div>
<script src="/some/script.js"></script>
</body>
</html>

旁注：這也使得從根本上不需要使用jQuery的ready功能。 如果腳本位於頁面的最底部，則該腳本上方標記所定義的所有元素都可用於腳本編寫。

上面鏈接的頁面中還有很多有用的建議。 例如：盡可能將所有腳本組合到一個文件中。 （並使文件可緩存等）。

缺點 ：如果頁面上有需要 JavaScript正常工作的內容，則上述內容意味着不會立即關聯與此事件相關的事件。 在內容可供用戶使用和事件處理程序被注冊之間可能存在短暫的時間間隔。 為了解決這個問題，“漸進增強”的概念發揮作用：讓事情沒有 JavaScript正常工作，然后讓他們用 JavaScript更好的作品。 如果沒有JavaScript，就無法正常工作的事物應由JavaScript添加，或先隱藏后再由JavaScript顯示。

Answer 2

盡可能將JS文件加載到頁面底部。 在關閉身體標簽之前。

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

原因是JS文件加載會阻止其他頁面資產的並行下載。 因此它們可能導致瓶頸。

除了該建議外，由於您使用的是jQuery，請從CDN（例如Google）中加載jQuery。 這樣做有很多好處：

• 諸如Google之類的流行CDN增加了最終用戶已經緩存JS庫的幾率
• 它進一步減少了並行下載瓶頸，因為它是另一個域（瓶頸是每個域）

Answer 3

建議將JavaScript放在頁面底部。 但是，這沒有考慮動態加載腳本的情況，因為在使用標記和通過JavaScript DOM操作動態加載之間，瀏覽器實際處理下載外部資源（例如JS文件）的方式有所不同。

進一步說明

瀏覽器在解析HTML時同步加載HTML和任何嵌入式資源。 這意味着在頁面加載時，當您前面有腳本時，頁面的加載將停止，瀏覽器將發出下載請求，然后解析和評估/執行JavaScript文件，然后繼續加載其余HTML 。 它對每個腳本執行此操作。

因此，除非在頁面加載期間需要使用某些JS函數或變量的關鍵元素（在某些情況下需要這樣做），否則最好將JS加載到頁面底部，因為您的頁面會更快地呈現。 在那些緊急情況下，僅加載足夠的JS即可盡快完成頁面加載。

有趣的是，使用JavaScript本身動態加載JS文件（即在頁面加載后通過javascript動態注入腳本對象），這些腳本將異步加載並進一步縮短了頁面加載時間。

因此，為了回答您的問題 ，

如果使用加載JS的jQuery.ready()方法，則它符合最佳實踐，因為腳本將在瀏覽器已加載頁面之后加載。 實際上，這比在頁面底部放置標簽更好。

$(document).ready(function () {
    $.getScript( "yourScript.js" )
});

（有關jQuery getScript的完整示例，請參見此處，以獲取更深入的示例： http ://api.jquery.com/jquery.getscript/

Answer 4

關閉</body>標記之前，應始終將腳本放在頁面底部

請參閱此處以獲取更多信息，為什么要這樣做。

Answer 5

是的，正如每個人都提到的那樣，將腳本放在</body>標記之前的頁面底部不會有任何問題，而將腳本放在head標記中的某個時間可能會造成問題。

Answer 6

如果您使用$(document).ready(function(){然后添加您的代碼，並使用})關閉它，則實際上不必將腳本放在HTML末尾，盡管這兩種方法都具有相同的效果被認為是良好的編程習慣。