Using null IDs or ensuring that they repeat across iterations seems to stop the IE leak.
Created
September 2, 2013 14:19
-
-
Save explunit/6413371 to your computer and use it in GitHub Desktop.
Memory leak test with repeating node IDs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <html> | |
| <body> | |
| <script type="text/javascript"> | |
| var count = 1000; | |
| var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); | |
| svg.setAttribute('width', '800'); | |
| svg.setAttribute('height', '800'); | |
| document.body.appendChild(svg); | |
| function update() { | |
| // remove existing circles | |
| var circles = svg.querySelectorAll("circle") | |
| for (var i = circles.length - 1; i >= 0; i--) { | |
| var parent = circles[i].parentNode; | |
| if (parent) parent.removeChild(circles[i]); | |
| }; | |
| // add new ones. Yes, would make more sense to update the x,y on the existing | |
| // circles but this is to show what happens in IE with lots of nodes being added/removed | |
| for (var j = count - 1; j >= 0; j--) { | |
| var node = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); | |
| // ensure that the IDs repeat across iterations. Null would also work here | |
| node.id = 'id' + j; | |
| node.setAttributeNS(null, "cx", Math.random()*800); | |
| node.setAttributeNS(null, "cy", Math.random()*800); | |
| node.setAttributeNS(null, "r", 5); | |
| node.setAttributeNS(null, "fill", "blue"); | |
| svg.appendChild(node); | |
| }; | |
| } | |
| setInterval(update, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment