Recalculate Style: why so stuttering?

Question

Let\'s say we have a code that injects series of similar elements into the DOM. Something like this:

var COUNT = 10000,
    elements = Object.keys(Array(COUNT).j         


        

Answer 1

Looks like the trouble is with the li elements that have display:list-item

If instead of ul/li you use div elements it works pretty fast in chrome..

Also creating a css rule of li{display:block;} fixes the delay.

And manually adding the list-item shows the delay even if the elements are already rendered in the DOM (they have to be re-rendered ofcourse)

See demo at http://jsfiddle.net/6D7sM/1/

(so it seems that chrome is slow in rendering display:list-item elements)

---

There is also a relevant bug submission to chrome http://code.google.com/p/chromium/issues/detail?id=71305 which has been merged into http://code.google.com/p/chromium/issues/detail?id=%2094248 (looks like in earlier versions it was crashing chrome, but it has been fixed. the crashing, not the speed)