memoria dell'applicazione nvd3 perdite

Question

Ho un Linechart vivente che aggiorna di frequente, vedere http://jsfiddle.net/cddw17fg/5/

function redraw() { 
    if (!redraw.isGraphShown) { 
    redraw.isGraphShown = true; 
    ... 
    } else { 
    d3.select('#chart svg') 
     .datum(data) 
     .transition().duration(1500) 
     .call(chart); 

    d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text') 
     .attr('transform', function(d, i, j) { 
     return 'translate (-40, 40) rotate(315)' 
    }); 
    nv.tooltip.cleanup(); 
    chart.update(); 
    } 
} 

L'esecuzione di questo JS IE11 con i "strumenti di sviluppo" gli aumenti "Memoria totale" un po 'prima, ma dopo alcuni minuti si inizia a crescere velocemente.

Dopo l'avvio del jsfiddle il consumo di memoria sguardi 'buono' ... ma dopo qualche minuto qualcuno ha fame e mangia i miei byte ...

Chiunque alcun indizio su quello che sto facendo sbagliato?

Answer 1

Ti ho tenuto in giro per 30 minuti su una delle schede cromate mentre ho lavorato su qualcos'altro e si è bloccato.

Tuttavia se tengo la scheda aperta in modo tale che la scheda non perda mai la messa a fuoco non si blocca mai e continua a funzionare senza problemi.

Quindi presumo che nvd3 non aggiorni il grafico ma mantenga tutti gli aggiornamenti in una raccolta quando la scheda è nello stato sfocato, motivo per cui la memoria continua ad aumentare. Ora, quando l'attenzione è tornata sulla scheda, tenta di eseguire il rendering di tutti gli aggiornamenti e lo schermo si blocca e alla fine si blocca.

Ora, come una correzione:

Sto usando jQuery per rilevare la finestra sul fuoco:

$(window).focus(function() { 
    window_focus = true;//set this flag on 
}).blur(function() { 
    window_focus = false;//set this flag off as window is not in display 
}); 

Ora all'interno del vostro redraw function fare aggiornamento grafico solo quando la finestra è a fuoco:

if(window_focus){ 
      chart.update(); 
      d3.select('#chart svg') 
       .datum(data) 
       //.transition().duration(1500) 
       .call(chart); 

      d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text') 
       .attr('transform', function(d, i, j) { 
        return 'translate (-40, 40) rotate(315)' 
       }); 
      nv.tooltip.cleanup(); 

     } 

Codice di lavoro here

Spero che questo aiuti!

Answer 2

Sembra un errore in NVD3 o D3 stesso. Per ora la mia soluzione è di ricaricare la pagina con il diagramma ogni 10 minuti.

var startDateNVD3Reload = Date.now(); 
... 
var elapsed_time_minutes = (Date.now() - startDateNVD3Reload)/1000/60; 
if (elapsed_time_minutes > 10) 
{ 
    location.reload(true); 
}