Detached objects in heap snapshot
Detached objects in heap snapshot
Link to test case:
https://editor.datatables.net/examples/simple/simple.html
Description of problem:
I'm trying to chase down memory leaks in our application and followed the instructions on Chrome's site:
https://developer.chrome.com/docs/devtools/memory-problems/
In following their instructions for finding detached objects in heap snapshots I noticed there were a number of references to DataTables objects in our application. I ran the Chrome snapshot tool against the basic DataTables editor example page and saw similar results (only our tables have a lot more data so there are a lot more detached objects). From what I understand from the doc, those indicate memory leaks. Is that accurate? If so, can they be fixed?
I have a screenshot I'd be happy to post but none of the buttons on the toolbar for the form seem to be working and this is in the console when the page loads:
Uncaught ReferenceError: ButtonBar is not defined
editorInit https://datatables.net/forums/plugins/editor/js/editor.js?v=1.8.1:1791
B https://datatables.net/media/js/site.js:109
fireWith https://datatables.net/media/js/site.js:110
u https://datatables.net/media/js/site.js:113
B https://datatables.net/media/js/site.js:109
fireWith https://datatables.net/media/js/site.js:110
u[0] https://datatables.net/media/js/site.js:112
onreadystatechange https://datatables.net/forums/plugins/editor/js/editor.js?v=1.8.1:623
loadScript https://datatables.net/forums/plugins/editor/js/editor.js?v=1.8.1:618
editorInit https://datatables.net/forums/plugins/editor/js/editor.js?v=1.8.1:1787
setAsEditor https://datatables.net/forums/plugins/editor/js/editor.js?v=1.8.1:1815
<anonymous> https://datatables.net/forums/plugins/editor/js/editor.js?v=1.8.1:1822
dispatch https://datatables.net/media/js/site.js:134
handle https://datatables.net/media/js/site.js:127
trigger https://datatables.net/media/js/site.js:132
trigger https://datatables.net/media/js/site.js:146
each https://datatables.net/media/js/site.js:59
each https://datatables.net/media/js/site.js:55
trigger https://datatables.net/media/js/site.js:146
<anonymous> https://datatables.net/forums/js/global.js?v=2.6.4:2159
B https://datatables.net/media/js/site.js:109
fireWith https://datatables.net/media/js/site.js:110
ready https://datatables.net/media/js/site.js:114
Pa https://datatables.net/media/js/site.js:33
promise https://datatables.net/media/js/site.js:114
<anonymous> https://datatables.net/media/js/site.js:115
<anonymous> https://datatables.net/media/js/site.js:31
<anonymous> https://datatables.net/media/js/site.js:31
Thanks.
Ben
Answers
Hi Ben,
We reuse DOM elements where possible. So for example if you have an Editor form not displayed, it will still hang on to a reference to the DOM items for the form, so they can be displayed when next required.
The way I track down memory leaks is to diff two profiles. Perform the action a few times (editing a row for example) to let the memory usage settle a bit. Then record a heap shot. Then perform it again and take another. Diff the two and see if there is anything added (like new DOM nodes).
Allan
Allan,
That makes sense. Does that mean those elements you're reusing are likely to show up as detached in the heap snapshot?
I've tried to drag the heap snapshot screenshot into this form to upload it but that's not working either I'm afraid. Is there another way to share images since the buttons on the toolbar aren't working?
Thanks.
Ben
Yes, elements that we reuse will show up in the heap, regardless of if they are in the document at the time or not.
It might be the file size limit that is stopping the upload. Perhaps a picture sharing site would work.
Allan
Allan,
I don't think it's the file size that's the problem. None of the buttons on the form toolbar work at all. I assume it's because of the error in the browser console:
Uncaught ReferenceError: ButtonBar is not defined
editorInit https://datatables.net/forums/plugins/editor/js/editor.js?v=1.8.1:1791
I included the full stack in the original post.
Thanks.
Ben
That's interesting - what browser are you using? I'm on Firefox 101 here and it appears to be working okay.
Thanks,
Allan
Allan,
I tried four different browsers here and none of them worked so I started checking plugins. It turns out it's uBlock Origin.
https://github.com/gorhill/uBlock#ublock-origin
I haven't added any custom rules for the site and I'm not sure what default rules might be causing this. It's a pretty popular plugin so I may not be the only one who runs into this. Anyway, I disabled it for the site and now the buttons work.
I've attached the screenshot for the heap snapshot detached elements. It took a few tries to get it to actually upload (assuming it works). I tried as a png and a jpeg. The png repeatedly said it worked but didn't actually show up. The jpg spit back a 500 error with no message other than it failed to upload. Finally a third or fourth try with the png seems like it might have gone through. Fingers crossed.
Anyway, if it what's in the screenshot looks about like you figured I'll happily cross it off my list of things to worry about.
Thanks.
Ben