Perdite di memoria Javascript: Albero DOM staccato

Question

Ho notato che la memoria del browser inizia ad aumentare mentre sono in una forma (questo è evidente dal task manager). In IE 9, questo va oltre i 500 MB dopo un certo utilizzo, mentre Chrome è più resiliente (passa a 200 MB con lo stesso test).

Sto utilizzando gli strumenti di sviluppo di Chrome per eseguire il debug di questo problema. Ho notato che c'è un gran numero di Staccata DOM albero:

Io parto dal presupposto che questo può confermare che v'è una perdita di memoria. Sarebbe corretto? In secondo luogo, avrei bisogno di scoprire come identificare la causa principale del problema. So che dovresti usare l'albero di conservazione per identificare cosa impedisce la ripresa di tali elementi. Ma non riesco a scoprire come usare l'albero di sostegno. Ad esempio, cosa significa l'albero di ritenzione nello screenshot qui sopra, per favore?

Qualsiasi assistenza sarebbe molto apprezzata.

Answer 1

Ci sono molte considerazioni da tenere a mente quando si scrive codice che fa riferimento a elementi DOM. Ma tutto si riduce fondamentalmente ad un paio di punti semplici -

a. All'interno delle funzioni locali, deselezionare sempre il riferimento

var menu = $('body #menu'); 
// do something with menu 
. 
. 
. 
menu = null; 

b. Mai conservare i riferimenti come parte dei dati degli elementi .data()

c. Cercate di non usare i riferimenti DOM all'interno gestori di chiusure/linea, invece passano identificatori

function attachClick(){ 
     var someDiv = $('#someDiv'); 

     someDiv.click(function(){ 
     var a = someDiv....; 
     //Wrong. Instead of doing this.. 
     }); 


     someDiv.click(function(){ 
     var a = $('#someDiv'); 
     //Pass the identifier/selector and then use it to find the element 
     });  


     var myFunc = function(){ 
     var a = someDiv; 
     //using a variable from outside scope here - big DON'T!    
     } 
    } 

Sì, si può sostenere che la ricerca gli elementi in grado di rallentare la pagina verso il basso, ma il ritardo è molto minima rispetto alla prestazione ha colpito un enorme il mucchio causa esp. in grandi applicazioni a pagina singola. Quindi, # 3 dovrebbe essere usato solo dopo aver valutato i pro ei contro. (Lo ha fatto aiutare in modo significativo nel mio caso)

UPDATE

d. Evita le funzioni anonime - Assegnare un nome ai gestori di eventi e alle funzioni locali ti sarà di grande aiuto durante la creazione di profili/visualizzazione di istantanee di heap.

Answer 2

Sembra che il codice crei molti sottostrutture DOM e mantenga riferimenti ad esso da javascript. Devi selezionare un elemento da un dom albero distaccato. Secondo l'istantanea dovresti selezionare l'elemento Testo. E guarda l'albero dei fermi.

Questo albero mostra tutti i percorsi che mantengono vivo l'oggetto. Almeno un percorso, solitamente il più breve, ti porterà all'oggetto della finestra. Se hai familiarità con il codice, puoi facilmente trovare l'oggetto in quel percorso che deve essere cancellato ma non lo fa. Ci possono essere molti di questi oggetti nel percorso. L'oggetto con la distanza più piccola è più interessante.