javascript setInvertal的使用增加了內存消耗CPU

我正在開發一個.NET Web應用程序，我必須使用javascript函數setInterval（）執行ajax請求以刷新某些頁面的信息。javascript setInvertal的使用增加了內存消耗CPU

隨着每個ajax請求我收到一個約68 KB的XML響應，我設法通過jQuery在html中進行可視化更改。我將間隔設置爲2000毫秒，但我希望，或者說，我需要將其減少到1000毫秒。

不幸的是，每次請求CPU的內存消耗都會增加，這會引發瀏覽器被阻塞，除非他重新加載頁面，否則用戶將無法使用它。我已經在Firefox，Internet Explorer和Chrome中測試過了，但結果總是一樣的。如果我不做setInvertal（），問題就會消失。

此外，我一直在測試我所有的javascript變量的範圍，但我沒有發現任何錯誤，我想這個Javascript有一個高效的垃圾回收器來清理它們。

我希望我已經解釋清楚了這個問題。有人有一些想法來解決它嗎？

修改時間：我正在使用jQuery框架。我的代碼是：

var tim; 
$(document).ready(function() { 
    tim = window.setInterval("refresh()", 2000); 
}); 

function refresh() { 
    $.post("procedures.aspx", $("#formID").serializeArray(), function (data) { 
    if (data != ""){ 
     var xml = $.parseXML(data); 

     ... (read and process xml to do changes in the html) 

    } 
    } 
}

來源

2012-07-14 jbernal

您可能正面臨一些內存泄漏。請嘗試將問題縮小到導致此行爲的最簡單代碼（歡迎使用jsFiddle）。 – 2012-07-14 18:18:55

瀏覽器模塊來自超時/間隔不像有時認爲的那樣在專用線程上運行的事實。雖然聽起來你顯然有一個潛在的問題，但可能會有一些里程碑的網絡工作人員，這可能會做你所描述的，並真正運行在一個單獨的線程。 – Utkanos 2012-07-14 18:22:32

請發表一個setInterval代碼 – 2012-07-14 18:23:01

您還沒有張貼任何檢查的代碼片段，所以我的答案是基於建立這種「投票」功能時，通常由一個錯誤。我還假設你正在手動做事，而不使用jQuery或MooTools之類的框架。

你的問題是最有可能通過在每個輪詢呼叫創建一個新的XMLHttpRequest對象，而不是setInterval的之外創建一個這樣的實例，以及開設和使用這個一次又一次引起的。

基本上，你可以寫你這樣的代碼：

var pollInterval = setInterval(function() { 
    var xhr = new XMLHttpRequest(); //ouch, this hurts! 
    xhr.open('GET', 'url', true); 
    xhr.send(); 
    //etc. 
}, 2000);

如果是這種情況，僅僅是移動XMLHttpRequestObject創造出來的輪詢循環，以確保您一次又一次地使用相同的對象，從而防止各種內存泄漏（如果我可以稱之爲）。

var xhr = new XMLHttpRequest(); //now we can re-use this! 
var pollInterval = setInterval(function() { 
    xhr.open('GET', 'url', true); 
    xhr.send(); 
    //etc. 
}, 2000);

同樣，你還沒有發佈任何代碼片段，或者你可以使用任何框架的細節。所以我建議的是基於我在檢查輪詢ajax代碼時經常遇到的錯誤。希望這可以幫助。如果沒有，請編輯問題併發布一些代碼。

免責聲明：我只使用XMLHttpRequest對象爲簡便起見，不恨供應商（或愛情）。你顯然會使用一個跨瀏覽器的請求對象實例化函數，或者更好的是一個抽象出這些血腥細節的庫。

更新

所以，你的代碼需要更新每兩秒鐘的DOM？只要頁面被加載？ Wihout永遠停止？我以爲我會在某處看到clearInterval，但無論如何。

這有點尷尬。最接近這種情況的是，當我需要根據股票API對脈衝線進行編碼時，以實時（好的，僞實時1秒）圖形爲基礎進行編碼。我的情況很好的部分是API非常快，超低延遲，我收到的數據僅僅是一個浮點數，我用它做的dom操作時空複雜性可以忽略不計。

我在這裏擔心的是，如果服務器在兩秒內沒有響應，或者如果它接近兩秒鐘，那麼你有一段複雜的代碼已經在這兩秒鐘間隔的顯着毫秒中吃光了。 dom 可能不會每兩秒更新一次！

衛生建議：擺脫 window.setInterval("refresh()", 2000)的報價。它應該只是 window.setInterval(refresh, 2000)原因在這裏：Memory leak for javascript setInterval
所以，$。員額必將創造新的XHR每兩秒鐘對象，按代碼。實際上，服務器響應時間是什麼樣的？ setInterval循環多少次？對於低計數，例如對於響應時間低於10秒，新的XHRs不應該是'THE' 問題。
500行XML解析？每個間隔？聽起來很痛苦。是否可以將XML標記爲服務器上的JSON字符串，並將此字符串返回給UI？它肯定會節省客戶端CPU週期。

帶有11000行的HTML。所以這是很多dom遍歷和操縱。這裏有一個小清單：

你使用的是最好的選擇器？（你的xpath表達式的特殊性）。 Shizzle已經在那裏覆蓋，但儘可能做到最好。像$（'p *'）這樣的東西可能會破壞浩劫。
您是否已最小化文檔重排？
循環：使用的，或映射函數在數組是最好的（最有效）
房產訪問：你是削減重複嵌套屬性訪問和使用效率的一次性引用？
附加/操作效率：例如：你是否附加單個列表項？理想情況下，您應該一次追加整個列表塊。相同的刪除等基本上，一次性矮胖操作，而不是重複操作。

如果不理解用例的低層次意圖和機制，很難指出這一點。

來源

2012-07-14 18:35:58

我已經發布了我的代碼。我完全理解你的答案，但我不知道jQuery在創建XMLHttpRequest對象時的行爲是否正確（我想它是這樣）。 – jbernal 2012-07-14 19:09:02

假設$ .post每次都會創建一個新的XHR對象是合理的，否則請考慮兩個$ .post語句一個接一個的情況。每個都是異步的，並可能在不同的時間返回。如果這兩個調用在引擎蓋下使用了相同的XHR對象，那將是災難性的。對於初學者來說這是一個新的XHR，每兩秒鐘一次。 – 2012-07-14 19:15:29

非常感謝您的快速和完整的答案，我真的很感激。我的應用程序必須監視大公司的重要系統，用戶必須實時瞭解大量組件和變量的狀態。由於這個原因，我的xml有很多行，因爲有很多變量需要監視。我不喜歡11000行html，但這是一個要求，所有的信息都必須在加載的頁面中。據我所知，頁面加載時，刷新不能停止，頁面可以加載數小時（甚至長達8小時）。 – jbernal 2012-07-15 10:15:56

最後，我已經解決了這個問題。總的來說，主要修復已將響應服務器更改爲JSON。我已經減少了我的迴應，直到4KB。

此外，我已經更加準確地操作和追加html元素到DOM。

現在，webapp可以運行幾個小時，一切正常。

來源

2012-07-26 08:29:52 jbernal

javascript setInvertal的使用增加了內存消耗CPU

回答

相關問題