I'm doing various animations in JavaScript, and was searching the net for different ways to speed it up/make it smoother/makes it easier on the computer. I stumbled upon this:

Web browsers weren't really developed with DOM-based animation (that is, using native HTML elements) in mind; repositioning and re-rendering an image or <div> element within any document means that a certain amount of "reflow" has to happen, where the browser must not only re-draw but also do some calculations to determine if and how the repositioned element has affected the flow of nearby elements and the overall document. This logic is also seen in action when fluid sites dynamically rearrange themselves to fit one's browser window when being resized.

Now, being curious about this, I started making some benchmarking tests, to see if I could avoid these reflows. Some websites talked about having several DOM changes after each other might avoid additional reflows, because the browsers waits to see if several DOM changes happens at once, allowing the browser to apply them all in a single reflow.

So, I created a big animation thingy, with 200 objects flying around, and I take the time before and after the code has looped though each object, animating it for that "frame" or "loop" or whatever you want to call it. This was going to be my base, onto which I would try different optimizing tricks. It displays the amount of milliseconds between each grapical loop.

However, I was a bit amazed, because despite those 200 objects flying around, my benchmarking shows that looping though all these objects takes...10 milliseconds.

Now I was kinda confused. I'm running on Linux, so I don't have IE6 to test with, I did this test in FF3, which might explain it, but still. I'm kinda confused. This performance is so good that I don't really need any optimizing at all!

Here is my test thus far without any modifications

So, I started thinking, could it be that the reflow is asynchronous? That would explain why it escapes my benchmarking tests.

So, here I am. I thought I'd ask you, to see if you know. Is the reflow asynchronous? Has any of you done any tests as to how one can limit the total amount of reflows?