jQuery和腳本速度？

Question

快速的問題，我有一些腳本只需要在某些頁面上運行，有些只在某個頁面上運行，最好是將腳本包含在腳本標籤的實際頁面的底部，或者在我的js inlcude;

var pageURL = window.location.href; 

if (pageURL == 'http://example.com') { 
    // run code 
} 

哪個更好更快？

Answer 1

最好的方法是隻在需要它的頁面上包含腳本。同樣在維護方面，您的腳本更加獨立於正在使用它的頁面。將這些ifs放在腳本中會使它與您網站的結構緊密結合，如果您決定重命名某個頁面，它將不再起作用。

Answer 2

將腳本包含在僅需要它的頁面底部。

Answer 3

該YSlow附加是知道你的網站爲什麼很慢的最佳解決方案。

有許多問題這可能是緩慢的原因。

結合許多jQuery的一個可以幫助你增加您性能。

此外，您可以將腳本放在頁面底部和CSS頂部。

Answer 4

它基本上取決於你，取決於代碼是什麼。

通常情況下，我會把它放到頁面的底部。 （我正在談論的只是與該頁面有關的次要ui事物）。

如果你正在進行多個頁面的位置ref測試，這可能意味着你做錯了什麼。

你可能想看一看其中的一個：

• http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
• http://2tbsp.com/node/91

至於這是更快它的瘋狂可以忽略不計，選擇什麼是對你更方便保持。

Answer 5

儘可能只包含頁面上的腳本需求。也就是說，如果您通過AJAX提供內容很難做到，因爲腳本可能已經被加載，重新加載可能會導致問題。當然，您可以通過AJAX提供的代碼在腳本塊中提供代碼（而不是引用外部js文件）。

如果您需要爲所有頁面加載腳本（通過母版頁），但只適用於某些頁面，請利用jQuery理解並處理與不匹配的選擇器元素。您還可以使用live處理程序以及非常特定的選擇器，以允許在加載頁面時加載的腳本處理稍後動態添加的元素。

注意：如果您使用通過內容分發網絡加載的腳本，您會發現它們通常在瀏覽器本地緩存，並且不會影響您的頁面加載時間。如果您的網站上已經加載過一次，那麼腳本也是如此。

Answer 6

我可以推薦您使用異步資源加載器，例如LAB.js。然後，你可以建立一個依賴關係列表，例如：

var MYAPP = MYAPP || {}; 

/* 
* Bunches of scripts 
* to load together 
*/ 
MYAPP.bunches = { 
    defaults:  ["libs/jquery-1.6.2.min.js"], 

    cart:   ["plugins/jquery.tmpl.min.js", 
        "libs/knockout-1.2.1.min.js", 
        "scripts/shopping-cart.js"], 

    signup:   ["libs/knockout-1.2.1.min.js", 
        "scripts/validator.js"] 
    /* 
    ... etc 
    */ 
}; 

/* 
* Loading default libraries 
*/ 
$LAB.script(MYAPP.defaults); 

if (typeof MYAPP.require !== 'undefined') { 
    $LAB.script(MYAPP.dependencies[MYAPP.require]); 
} 

，並在頁面的最後，你可以寫：

<script type="text/javascript"> 

    var MYAPP = MYAPP || {}; 
    MYAPP.require = "cart"; 

</script> 

<script type="text/javascript" src='js/libs/LAB.min.js'></script> 
<script type="text/javascript" src='js/dependencies.js'></script> 

順便說一句，一個問題給大家，它是一個好主意這樣做？

Answer 7

您有兩件競爭的事情需要優化，網頁加載時間和網頁初始化時間。

通過充分利用瀏覽器緩存，可以最大限度地減少網絡上的網頁加載時間，從而不必通過網絡加載JS文件。要做到這一點，您需要爲您的網站提供儘可能多的JavaScript代碼或兩個更大且完全最小化的JS文件。要做到這一點，你應該把JS的多個不同的頁面放在一個普通的JS文件中。每個站點的JS是否應該是一個或兩個較大的JS文件，或者是否將它分組成少量的常用JS文件，每個JS文件都針對您的站點的一部分。但是，總的想法是，你想要把來自不同頁面的JS代碼組合成一個可以最有效地緩存的公共JS文件。

您可以通過只調用實際需要在顯示的特定頁面上執行的初始化代碼來最小化頁面初始化時間。有幾種不同的方法來解決這個問題。我同意其他調用者您不希望查看URL來決定執行哪些代碼，因爲這會將您的代碼綁定到更好避免的URL結構。如果您的代碼具有可管理數量的不同類型的頁面，那麼我建議在body標籤上標識具有唯一類名稱的每種頁面類型。然後，您可以讓您的初始化代碼在正文標籤上查找適當的類，並根據該分類轉到相應的初始化代碼。我甚至在你找到一個帶有特定公共前綴的類名的地方看過它，解析出名稱的非公用部分並用該名稱調用一個初始化函數。這允許您通過僅向body標籤添加類名來爲頁面提供一組特定的行爲。該代碼與實際頁面保持非常分離。

這樣做的一般目的方式是將所有代碼保存在一個或兩個常用的JS文件中，但要爲每個特定頁面的HTML添加適當的初始化調用。因此，執行初始化代碼的JS代碼駐留在常用的JS文件中，因此被最大限度地緩存，但是爲該頁面調用相應的初始化代碼嵌入在每個特定頁面中。這最大限度地減少了初始化的執行時間，但仍允許使用最大緩存。它與前面提到的類名稱技術相比稍遜一籌，但有些人可能更喜歡更直接的調用技術。