關閉和內存泄漏

Question

我有一個只有兩件事情的腳本頁：改變顏色或背景，並保持一個時間計數器。有某處存在內存泄漏。

的的jsfiddle是here

這是腳本：

var TheDateToday = new Date(); 

var TheColorEffect = (function() { 

    var TheColorArray = ['red', 'blue', 'purple']; 

    return function() { 

     var TheColor = Math.floor(Math.random() * 3); 
     var TheOpacity = (Math.floor(Math.random() * 20) + 80)/100; 

     document.getElementById('TheText').style.color = TheColorArray[TheColor]; 
     document.getElementById('TheText').style.opacity = TheOpacity; 

     document.getElementById('ThePanel').style.backgroundColor = TheColorArray[TheColor]; 
     document.getElementById('ThePanel').innerText = TheDateToday.toTimeString(); 
     }; 
    }()); 

var TheDateIncrement = (function() { 

    return function() { 
     TheDateToday.setSeconds(TheDateToday.getSeconds() + 10); }; 
}()); 

setInterval(TheDateIncrement, 10000); 
setInterval(TheColorEffect, 2000); 

，這是CSS/HTML：

#TheText{ 
    font-size:20px; 
    font-family:Verdana; 
    margin:20px 20px; 
    -webkit-transition:color 2s ease; 
    -moz-transition:color 2s ease; 
    -o-transition:color 2s ease; 
    transition:color 2s ease;} 

    #ThePanel{ 
    height:100px; 
    width:200px; 
    clear:both; 
    color:white; 
    padding:20px 20px; 
    background:red; 
    -webkit-transition:background 2s ease; 
    -moz-transition:background 2s ease; 
    -o-transition:background 2s ease; 
    transition:background 2s ease;}​ 


<div id="TheText">This is a test text</div> 
<div id="ThePanel"></div>​ 

當你在Chrome到時間線，並期待在內存使用情況，它只是上升。如果您在單獨的選項卡中打開這些頁面中的幾個，則CPU可以達到90％的使用率。

哪裏泄漏？ 感謝您提出解決此問題的建議。

Answer 1

我改變了你的代碼，發現cpu和內存減少了。測試負載時功能定時調用減少。

var TheColorEffect = new function() { 

    var TheDateToday = new Date(); 
    var TheColorArray = ['red', 'blue', 'purple']; 
    var TheColor = 0; 
    var TheOpacity = 0; 

    this.change = function() { 
     TheColor = Math.floor(Math.random() * 3); 
     TheOpacity = (Math.floor(Math.random() * 20) + 80)/100; 

     document.getElementById('TheText').style.color = TheColorArray[TheColor]; 
     document.getElementById('TheText').style.opacity = TheOpacity; 
     document.getElementById('ThePanel').style.backgroundColor = TheColorArray[TheColor]; 
     document.getElementById('ThePanel').innerText = TheDateToday.toTimeString(); 

    } 

    this.TheDateIncrement = function() { 
     TheDateToday.setSeconds(TheDateToday.getSeconds() + 10); 
    } 

}; 


setInterval(TheColorEffect.TheDateIncrement, 200); 
setInterval(TheColorEffect.change, 100); 

Answer 2

我有同樣的概念。我用Javascript創建了一個顯示股票市場價格的實時頁面，它已經差不多一年了，而且我找不到內存泄漏。

我試着用google chrome工具檢查堆快照，以檢查堆中的差異並確定哪些對象正在被控制，並注意到我從服務器收到的JSON數據作爲字符串未被垃圾收集一些原因。這會導致頁面性能下降，就像您將頁面打開一天左右，瀏覽器崩潰或整個PC都會掛起。

我讀了很多關於使用閉包和更好的內存管理的最佳實踐，特別是與IE，但我發現作爲這個問題的殺手最後的東西是一個JavaScript編譯器，你輸入一個JavaScript與閉包，它會轉換關閉正常的函數調用。 https://developers.google.com/closure/compiler/

Answer 3

我認爲這是衰落的影響。因爲每次更改opacitiy時，瀏覽器都必須重新渲染顏色。如果你刪除改變不透明度的代碼，CPU使用率似乎對我來說要低得多。

雖然我沒有解決方案。我唯一能想到的就是一個動畫GIF作爲背景（我認爲這不是一個好的解決方案）。