哪裏可以放置頁面特定的JavaScript代碼？

Question

假設我有兩頁：Page1.html和Page2.html。兩個頁面需要：

$(document).ready(function() { 
    Init(); 
}); 

只有Page1.html需要：

$(document).ready(function() { 
    InitPage1(); 
}); 

只有Page2.html需要：

$(document).ready(function() { 
    InitPage2(); 
}); 

什麼是結構化的JavaScript文件的最佳做法，考慮額外請求的開銷與執行不相關代碼的開銷？

選項1：

我可以做3個JavaScript文件，一個既是網頁上引用，一個真實引用只在Page1.html，而這僅引用在Page2.html之一。

其優點是每個頁面不在$(document).ready()中運行不相關的代碼。

缺點是Page1.html和Page2.html需要2個JavaScript文件請求，一個用於共享文件，另一個用於頁面特定文件，額外的請求會增加開銷。

選項2：

我可以讓1 JavaScript時兩個頁面上引用了包含兩個頁面中的所有代碼文件。

$(document).ready(function() { 
    Init(); 
    InitPage1(); 
    InitPage2(); 
}); 

優點是每個頁面只會產生1個JavaScript文件請求，從而減少開銷。

缺點是$(document).ready()中的不必要的代碼現在正在爲這兩個頁面運行。

選項3？：

有沒有我不考慮一個更好的選擇？

最後考慮：

這裏主要關注的是這將是理想的，當幾十頁需要，將無法在其他地方分享自己的JavaScript代碼？

單個文件的請求可能很昂貴。對於我的某個網站的每個JavaScript文件請求，我看到的都是100-450ms，幾乎所有的時間都是「等待」而不是「下載」，這意味着瓶頸在於請求本身，而不是文件大小，即如果5個單獨的JS文件每個需要200ms加載（總計1秒），如果它們全部合併成1個文件，則增加的文件大小實際上是不相關的，並且請求總共只需要200ms（可能稍高一些， 50ms或更少，以加載附加數據）。因此，我的假設是將所有內容合併到一個文件中將是理想的，但是在每個頁面上運行不相關的代碼似乎都非常草率，尤其是如果由於某種原因，不相關的代碼執行時間很長時，尤其如此。處理這個問題的最佳做法是什麼？

Answer 1

您的第二個代碼不會作爲InitPage2可能不是函數。但是，多數民衆贊成什麼如果elses：

$(document).ready(function() { 
Init(); 
if(InitPage1) InitPage1(); 
if(InitPage2) InitPage2(); 
}); 

但是，這段代碼是不是真的幹。所以，你可能像core.js創建做某事，你這樣做是無處不需要一些東西一般，那麼你就可以調用這些函數在您的擴展：

var onready=[]; 
$(document).ready(function() { 
onready.forEach(func=>func()); 
onready={push:func=>func()}; 
}); 

在您的擴展：

onready.push(_=>alert("Wohoo!"));