Memory leak test with add/remove of svg circles. Appears to leak on IE9 and IE10.
Created
September 2, 2013 14:07
-
-
Save explunit/6413259 to your computer and use it in GitHub Desktop.
Memory leak test with add/remove of svg circles
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'); | |
| node.id = 'id' + Math.random(); | |
| 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