Găsirea JavaScript pierderi de memorie cu Chrome
Am'am creat un test foarte simplu caz care creează o coloană Vertebrală vedere, acordă un handler pentru un eveniment, și instanțiază un definite de utilizator clasa. Eu cred că, făcând clic pe "Eliminați" buton în această probă, totul va fi curățat și nu ar trebui să existe pierderi de memorie.
Un jsfiddle pentru codul este aici: http://jsfiddle.net/4QhR2/
// scope everything to a function
function main() {
function MyWrapper() {
this.element = null;
}
MyWrapper.prototype.set = function(elem) {
this.element = elem;
}
MyWrapper.prototype.get = function() {
return this.element;
}
var MyView = Backbone.View.extend({
tagName : "div",
id : "view",
events : {
"click #button" : "onButton",
},
initialize : function(options) {
// done for demo purposes only, should be using templates
this.html_text = "<input type='text' id='textbox' /><button id='button'>Remove</button>";
this.listenTo(this,"all",function(){console.log("Event: "+arguments[0]);});
},
render : function() {
this.$el.html(this.html_text);
this.wrapper = new MyWrapper();
this.wrapper.set(this.$("#textbox"));
this.wrapper.get().val("placeholder");
return this;
},
onButton : function() {
// assume this gets .remove() called on subviews (if they existed)
this.trigger("cleanup");
this.remove();
}
});
var view = new MyView();
$("#content").append(view.render().el);
}
main();Cu toate acestea, sunt clar cum să utilizați Google Chrome's profiler pentru a verifica dacă acest lucru este, în fapt, cazul. Sunt foarte multe lucruri care apar pe heap profiler instantaneu, și nu am nici o idee cum de a decoda ceea ce's bine/rău. Tutoriale am'am văzut pe acesta, până în prezent, doar spune-mi de "utilizarea instantaneu profiler" sau da-mi un extrem de detaliate manifest despre cum întreaga profilerul lucrează. Este posibil de a utiliza doar profiler ca un instrument, sau chiar trebuie să înțeleagă modul în care totul a fost creat?
EDIT: Tutoriale ca acestea:
Gmail scurgere de memorie fixing
Sunt reprezentant de unele dintre cele mai puternice materiale de acolo, de la ceea ce am'am vazut. Cu toate acestea, dincolo de introducerea conceptului de 3 Snapshot Tehnica, mi se pare că oferă foarte puțin în termeni de cunoștințe practice (pentru un incepator ca mine). Ca 'Folosind DevTools' tutorial nu't de lucru printr-un exemplu real, atât de vagi și generale descriere conceptuală a lucrurile't prea mare ajutor. Ca și pentru 'Gmail' exemplu:
Deci, ai găsit-o scurgere. Acum ce facem?
Examinează de fixare calea de scurgeri de obiecte în jumătatea inferioară a Profilelor pe panou
în Cazul în care site-ul de alocare nu poate fi intuită cu ușurință (de exemplu, ascultătorii eveniment):
Instrument de constructorul de fixare a obiectului prin intermediul JS consola pentru a salva stivei pentru alocări
Utilizarea de Închidere? Permite corespunzătoare existente steag (de exemplu, goog.evenimente.Ascultător.ENABLE_MONITORING) pentru a seta creationStack de proprietate în timpul construcției
Mă aflu mai confuz după ce a citit că, nu mai puțin. Și, din nou, l's spunându-mi să nu lucrurile, nu cum să le facă. Din punctul meu de vedere, toate informațiile de acolo este fie prea vagi sau doar ar face sens pentru cineva care a înțeles deja acest proces.
Unele dintre aceste probleme mai specifice au fost ridicate în @Jonathan Naguin's a răspunde de mai jos.
Un bun flux de lucru pentru a găsi scurgeri de memorie este trei snapshot tehnică, folosit pentru prima dată de Loreena Lee și echipa Gmail pentru a rezolva unele probleme de memorie. Pașii sunt, în general:
Pentru exemplu, am adaptat codul pentru a arăta acest proces (puteti gasi [aici][1]) întârzierea crearea Vertebrală a Vizualiza până la eveniment click de butonul de Pornire. Acum:
Acum sunteți gata pentru a găsi scurgeri de memorie!
Veți observa noduri de diferite culori. Noduri roșii nu au referiri directe la Javascript pentru ei, dar sunt în viață, deoarece acestea sunt parte dintr-o detașat arborele DOM. Poate exista un nod în arborele referire la Javascript (poate ca o închidere sau variabilă), dar este întâmplător prevenirea întregul copac DOM de gunoi colectate.
Galben noduri cu toate acestea nu au referiri directe la Javascript. Uita-te pentru galben noduri în același detașat DOM copac pentru a localiza referințe din Javascript. Acolo ar trebui să fie un lanț de proprietăți care duce de la DOM fereastră pentru a elementului.
În special, puteți vedea un HTML Div element marcate cu roșu. Dacă vă extindeți elementul veți vedea că este referit de un "cache" funcție.
Selectați pe rând și în consola de tip $0, veți vedea efectiv funcția și locul de amplasare:
Acest lucru este în cazul în care elementul este în curs de referință. Unfortunally nu există de mult vă puteți face, este un mecanism intern de la jQuery. Dar, doar în scop de testare, merge funcția și de a schimba metoda de a:
Acum dacă repetați procesul, nu veți vedea nici roșu nod :)
Documentație:
Aici's un sfat pe memory profile de un jsfiddle: Utilizați următorul URL pentru a izola jsfiddle urmare, se elimină toate jsfiddle cadru și încarcă doar rezultatul.
http://jsfiddle.net/4QhR2/show/
Nu am fost niciodată în măsură să dau seama cum să utilizați Cronologie și Profiler pentru a urmări în jos pierderi de memorie, până când am citit următoarea documentație. După ce citiți secțiunea intitulată 'Obiect alocarea tracker' am fost capabil de a utiliza 'Record Heap Alocările' instrument, și urmări unele unele Desprinse noduri DOM.
Am rezolvat problema prin trecerea de la jQuery eveniment obligatoriu, la utilizarea Vertebrală delegație eveniment. L's înțelegerea mea că versiunile mai noi de coloana Vertebrală automat va dezlega evenimente pentru tine, dacă te sun Vedere.elimina()`. Executa unele demo-uri te, acestea sunt stabilite cu pierderi de memorie pentru a vă identifica. Nu ezitați să puneți întrebări aici dacă încă nu't obține după ce a studiat această documentație.
https://developers.google.com/chrome-developer-tools/docs/javascript-memory-profiling
Practic ai nevoie să se uite la numărul de obiecte în interiorul heap instantaneu. Dacă numărul de obiecte crește între două instantanee și te'am scăpat de obiecte atunci ai o scurgere de memorie. Sfatul meu este să se uite pentru stivuitoare eveniment în cod care nu se desprinse.
Nu este o introducere video la Google, care va fi foarte util pentru a găsi JavaScript pierderi de memorie.
https://www.youtube.com/watch?v=L3ugr9BJqIs
Ai putea, de asemenea, uita-te la fila Cronologie, în instrumente de dezvoltare. Record de utilizare a aplicației și să păstreze un ochi pe Nod DOM și ascultător Eveniment conta.
Dacă în graficul de memorie într-adevăr, ar indica o scurgere de memorie, atunci puteți folosi profiler să-mi dau seama ce se scurge.
Ai, de asemenea, s-ar putea să doriți să citiți :
http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/
Explică utilizarea chrome developer tools și se dă un pas-cu-pas sfaturi cu privire la modul de a confirma si localiza o scurgere de memorie folosind heap instantaneu comparație și diferite hep instantaneu vizualizările disponibile.
Am doua sfaturi pentru a lua o grămadă instantaneu, au're excelentă pentru detectare pierderi de memorie, chrome face o treaba excelenta de snapshotting.
În proiectul meu de cercetare pentru gradul meu am fost construirea unei interactiv aplicație web care au avut de a genera o mulțime de date construit în 'straturi', multe dintre aceste straturi ar fi 'șterse' în UI, dar pentru unii motiv de memorie a fost't fiind dezafectat, folosind instrumentul instantaneu am fost capabil de a determina care JQuery, au ținut o referință la obiect (sursa a fost atunci când am fost încercarea de a declanșa o `.load () evenimentul care a tinut de referință în ciuda de a merge în afara domeniului de aplicare). Având aceste informații la mâna a salvat de unul singur proiectul meu, l's un instrument extrem de util atunci când ai de're folosind alte persoane's biblioteci și aveți această problemă de persistent referințe oprirea GC de la a face treaba.
EDIT: L's, de asemenea, util pentru a planifica ceea ce acțiunile pe care le're de gând pentru a efectua pentru a minimiza timpul petrecut snapshotting, ipoteza ce ar putea fi cauza problemei și să testeze fiecare scenariu, făcând instantanee înainte și după.