Individuazione della perdita di memoria dell’albero DOM staccato

Ho problemi a diagnosticare una perdita di memoria dell’albero DOM staccato in un’app web a pagina singola molto grande, creata principalmente con Knockout.

Ho modificato l’app per colbind un object FooBar fittizio a un particolare elemento del pulsante HTML che dovrebbe essere sottoposto a garbage FooBar mentre l’utente si sposta su una “pagina” diversa dell’app. Usando la funzione di istantanea dell’heap di Chrome, posso vedere che una vecchia istanza FooBar (che avrebbe dovuto essere GC) è ancora raggiungibile dal suo HTMLButtonElement in un albero DOM distaccato (grande).

Tracciando i riferimenti tramite il pannello dell’albero di mantenimento , seguo la catena prendendo la distanza decrescente dalla radice GC. Tuttavia, ad un certo punto la mia ricerca raggiunge un punto morto a una distanza di nodo 4 dalla radice (in questo caso)! L’albero di conservazione non riporta alcun riferimento a questo nodo, ma in qualche modo sa che si tratta di quattro passaggi dalla radice GC.

Ecco la parte dell’albero di conservazione che mi ha lasciato perplesso (i numeri sulla destra sono le distanze dalla radice):

 v foobar in HTMLButtonElement 10 v [4928] in Detached DOM tree / 5643 entries 9 v native in HTMLOptionElement 8 v [0] in Array 7 v mappedNodes 6 v [870] in Array 5 v itemsToProcess in system / Context 4 context in function itemMovedOrRetained() context in function callCallback() 

L’albero di conservazione non mostra i riferimenti qui alla distanza 3 o sopra.

    Qualcuno può spiegarmi questo? Speravo di essere in grado di seguire la catena di riferimenti fino alla parte offensiva del codice dell’app JavaScript, ma questo ha il mio ostacolo!

    Prima di tutto, non utilizzare delete come uno dei commenti suggeriti. Impostare un riferimento a null è il modo giusto per smaltire le cose. delete rompe la “class nascosta”. Per vederlo da solo, esegui i miei esempi da https://github.com/naugtur/js-memory-demo

    Rafe, il contenuto che vedi nel profiler è spesso difficile da capire. Il bit che hai postato qui sembra strano e potrebbe essere un bug o una perdita di memoria al di fuori dell’applicazione (anche i browser perdono), ma senza eseguire l’app è difficile dirlo. Il tuo albero di conservazione termina in un contesto di una funzione e può essere mantenuto da un riferimento a tale funzione o da un’altra funzione che condivide il contesto. Potrebbe essere troppo complicato per il profiler visualizzarlo correttamente.

    Posso aiutarti a individuare il problema.

    Innanzitutto, vai alla scheda Timeline in devtools e usalo per osservare il momento in cui si verifica la perdita. Seleziona solo l’allocazione della memoria e avvia la registrazione. Passa attraverso uno scenario che ti aspetti di perdere. Le barre che rimangono blu sono le perdite. Puoi selezionare i loro dintorni nella timeline e concentrarti sul loro albero di conservazione. Gli elementi più interessanti negli alberi distaccati sono quelli rossi: vengono indicati dall’esterno. Il resto viene mantenuto perché qualsiasi elemento in un albero viene referenziato, ha riferimenti a tutto il resto ( x.parentNode )

    Se hai bisogno di maggiori dettagli, puoi prendere più istantanee nel profiler, in modo da avere uno snapshot prima e dopo la causa della perdita (che hai trovato con la timeline – ora conosci l’azione esatta che lo causa). È quindi ansible confrontare quelli nel profiler – c’è una vista “confronta”. che è più comprensibile di altri.

    Puoi anche salvare le istantanee del tuo heap dal profiler e pubblicarle online, in modo da poter dare un’occhiata. C’è un collegamento di salvataggio su ognuno di essi nell’elenco a sinistra.


    La profilazione della memoria è difficile e richiede effettivamente pratica e comprensione degli strumenti. Puoi esercitarti su alcuni esempi del mio discorso:

    http://naugtur.pl/pres/mem.html#/5/2

    ma la vera guida completa all’utilizzo di memory profiler è questo doc:

    https://developer.chrome.com/devtools/docs/javascript-memory-profiling#looking_up_color_coding

    Link aggiornato: https://developers.google.com/web/tools/profile-performance/memory-problems/memory-diagnosis