Javascript性能 - 使用$ .getScript添加腳本（）

我目前正在製作一種web應用程序，並且它的一部分通過動態加載和向頁面添加js腳本起作用。爲此，我使用JQuery的$.getScript()方法加載它。

我將它設置爲緩存。

用我的程序，如果一個腳本已經存在，無論如何它會被加載，看起來像是緩存。我想知道的是，這會對網站和性能產生多大影響。新加載的腳本與現有腳本具有相同的src是否覆蓋前一個腳本，或者是與舊腳本一起添加的新腳本？

此外，由於我的網站是一個AJAX網站，它可能會從不同頁面的幾個腳本，最終隨着時間的推移加載。是否有任何瀏覽器限制可以加載多少個腳本？

2012-03-11 Petty_Crim

如果您不小心，預優化可能是浪費精力。請閱讀雅虎的[加速您的網站的最佳實踐]（http://developer.yahoo.com/performance/rules.html），以獲取關於如何看待這一整體的幾點建議，但請務必記住每個網站的不同之處，所以一些技巧並不總是必要的，有用的，或者可以（我想）證明適得其反。 – 2012-03-11 22:30:46

如果它被緩存，除非緩存副本已過期，否則您的瀏覽器不會要求另一個副本，否則您會強制它執行完整請求。此外，您本身對包含的JavaScript文件沒有任何限制（據我所知），但如果您添加了數百或數千個「腳本」，則還有其他問題。如果您真正擔心的是您可能會進行多次外部調用來加載相同的腳本，則應通過其他方式解決該問題（例如在請求之前檢查文件是否已包含在內）。 – 2012-03-11 22:33:39

只要通過我的控制檯，它會列出那裏的同一個文件，但說它緩存。另外，我實際上需要它每次都會觸發/加載，因爲它具有我需要它調用的document.ready位。 – 2012-03-11 22:42:09

我認爲伊利亞提供了一些值得考慮的要點，我認爲這會回答你的具體問題。如果你想實現什麼，但是，重新運行$(document).ready()處理程序，你可以這樣做：

(function(){ 
    var myreadyfunction = function(){ 
     $('#affected').toggleClass('blue'); 
    }; 

    $(document).ready(myreadyfunction); 

    $(document).ready(function(){ 
     $('button').click(myreadyfunction); 
    }); 
})();

http://jsfiddle.net/Z97cm/

我作用域它變成一個匿名(function(){})();，保持了全球範圍內的，因此如果您需要從該範圍之外訪問該功能，您可能需要考慮這一點。但是，這給了你我所談論的一般概念。

來源

2012-03-11 23:08:11

Thx對於這個新的伎倆，我會給它一個去。 Thx也向伊利亞尋求建議。 – 2012-03-12 11:20:36

它會影響網站的性能。即使您的腳本被緩存到客戶端並設置了過期時間，瀏覽器仍然需要解析並執行新包含的腳本。更重要的是，您很有可能會遇到JavaScript錯誤，因爲您的腳本將會覆蓋已由以前版本設置的變量。 JavaScript解析和執行仍然是所有瀏覽器中的阻止操作，所以在處理文件時，UI會鎖定。

要回答問題的第二部分，據我所知，給定頁面上的JavaScript文件數量沒有限制。我看過超過200個javascript的頁面，沒有拋出任何異常。

來源

2012-03-11 22:43:49

我的代碼不使用任何函數或全局變量，因此包含的一部分不是問題。我使用內聯編碼來做這種事情。 – 2012-03-11 22:49:50

好吧，那麼很可能沒有JS錯誤。但是，解析仍然會阻止執行線程。最好先檢查腳本是否已經包含，然後僅在頁面中尚未包含該腳本時才添加它。 – 2012-03-11 22:51:35

+1對於一些非常突出的點。還有一種更好的方法來做到這一點特別的事情（重新運行一個腳本），採用可變功能，可以調用。 – 2012-03-11 22:58:03

Javascript性能 - 使用$ .getScript添加腳本（）

回答

相關問題