{"id":757,"date":"2010-03-22T01:07:09","date_gmt":"2010-03-22T01:07:09","guid":{"rendered":"http:\/\/www.codedread.com\/blog\/?p=757"},"modified":"2011-11-07T17:16:58","modified_gmt":"2011-11-07T17:16:58","slug":"know-the-beast","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2010\/03\/22\/know-the-beast\/","title":{"rendered":"Know The Beast"},"content":{"rendered":"

[clipart]<\/object>Cameron Adams<\/a> decided to benchmark Flash, SVG, Canvas and HTML5 using a particle engine he created. Not surprising (to me anyway), the SVG scores were the worst of the bunch. This stands to reason: does each particle really need to be a DOM element? Nonetheless, I decided to see what I could do to make the SVG scores suck less. I thought I'd use it as an opportunity to also teach some techniques.<\/p>\n

Update: Added some browser scores for Nov 2011<\/strong><\/p>\n

<\/p>\n

Particle Creation<\/h3>\n

Cameron initializes the particles this way:<\/p>\n

\r\n\tvar domNode = document.createElementNS(SVG_NS, \"circle\");\r\n\tvar benchmark = document.getElementById(\"benchmark\");\r\n\tbenchmark.appendChild(domNode);\r\n\t\r\n\t\/\/ Set initial position to middle of screen\r\n\tdomNode.setAttribute(\"cx\", x + PARTICLE_RADIUS);\r\n\tdomNode.setAttribute(\"cy\", y + PARTICLE_RADIUS);\r\n\tdomNode.setAttribute(\"r\", PARTICLE_RADIUS);\r\n\t\r\n\t\/\/ Set colour of element\r\n\tdomNode.setAttribute(\"fill\", COLORS[Math.floor(Math.random() * COLORS.length)]);\r\n<\/pre>\n
That is, he creates a svg:circle element, then appends it to the DOM, then modifies its attributes.  Every time an attribute is changed in the DOM it has the potential to cause a layout\/render change.  Thus, it makes more sense (to me) to attach the circle to the DOM only after you're done initializing the element (i.e. after all the setAttribute calls).<\/p>\n
This doesn't affect the frame-rate, since creation only happens at the beginning, but it might affect the startup time of the animation so I thought I'd drop it in this post.<\/p>\n
DOM Animation - the Naive Approach<\/h3>\n
Next, he has a function that is called as fast as possible to animate the particles.  The animate function does a simple loop over all particles and calls a draw() function.  The particle's draw function does this:<\/p>\n
\r\n\t\t\/\/ lots of other JS code here\r\n\t\tdomNode.setAttribute(\"cx\", nextX + PARTICLE_RADIUS);\r\n\t\tdomNode.setAttribute(\"cy\", nextY + PARTICLE_RADIUS);\r\n<\/pre>\n
The problem with this again is that each DOM call can cause a re-render.  This means if you have 500 particles, there are 1000 DOM calls affecting the rendering with every call to animate().  Depending on how stupid the browser is, this could be expensive.<\/p>\n