Detached DOM nodes
// create an element to attach to document | |
var d = document.createElement('div'); | |
// take heap snapshot and filter on 'detached' will show the above node | |
// now attach element to document | |
document.body.appendChild(d); | |
// take heap snapshot and the detached node is no longer listed | |
// you can look at diff between two snapshots and see it has been added to HTMLBodyElement | |
// so we can see the div add some styles | |
d.style.border = '2px solid deeppink'; | |
d.style.background = 'hotpink'; | |
d.style.height = '100px'; | |
// now lets see if hiding element detaches the node | |
d.style.display = 'none'; | |
// inspect and you will see the node is not detached | |
// display element and lets try visibility | |
d.style.display = 'block'; | |
// same result if you use | |
d.style.visibility = 'hidden'; | |
// show element and now remove the element from the document | |
d.style.visibility = 'inherit'; | |
document.body.removeChild(d); | |
// the snapshot will now contain the removed element as a detached node | |
// to cleanup this node we must delete the reference being held in JavaScript | |
d = null; | |
// the detached node is now removed | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment