13 July 2010
How many images will fit in my DOM?
On a project we’re working on now, we need to place “pins” on a map. There are some advantages for us not implementing the map with Flash. Namely, the project has a Facebook app component and Facebook requires users to click to activate Flash on profile tabs. I was curious to see how many pins I could instantiate in the DOM before there was noticeable chug. I made a test script that creates a bunch of img elements in the DOM. You can try it out here: DOM Capacity Test.
Through some not very scientific testing, I found that 100-300 DOM elements is my sweet spot (though IE really needs it towards the low end of that range). Any higher and the browser noticeably chugs during rendering. I was surprised that once rendered, the browser didn’t seem to perform any worse during scrolling or resizing. Another thing I noticed was that Firefox visually added each element to the page iteratively (taking much more time), whereas all other browsers immediately showed all of them after the initial CPU churn.
Comments
I quite like how Firefox draws it. Shame it’s a bit slower, but not having a delay at the beginning is beneficial too.
Taking a cue from Firefox, I think if you HAD to show a ton of elements, it would be best to use setInterval and create 20 elements every interval of 10ms or something like that. You could even set them all to display none and show a loading screen. Then only show them all once they’re all rendered.
Mr Irish talks about a great alternative to setInterval here:http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/ about 8 minutes in which would work even better to call say 10 images at a time.
Fun post. Thanks. be sure to post the project when you finish.