Cornerstone Blog

The DOM is too slow for client-side page rendering

September 12, 2008 · Leave a Comment

CSS Selector Speedups

Davey is right. In his post to the PURE group, he says that browser vendors are implementing the getElementsBySelector. This means exponential increases in speed and is a big boon for client-side developers who use CSS selectors extensively in their scripts and for client-side developers who lean on templating and data-mapping engines, which use CSS selectors extensively. It seems like all the major browsers will have this in the next few months.

No Such Luck for the DOM

However, the DOM isn’t guaranteed to see similar speedups quite yet (I don’t think the DOM speedups will make it into FF3.1). So if you’re digging deep into an HTML element tree via a CSS selector in order to change a couple properties, you’ll be set. But if you’re generating a significant amount of HTML via repeating or nesting an HTML template, you’ll be looking for some help.

The DOM will be too slow for a couple more years

Most of us don’t have the luck of dropping support for old browsers immediately. Basecamp is just now dropping support for IE6. One of our most important clients (an intranet project) has just now upgraded away from IE6. So it’ll probably be a couple years at a minimum before we can drop support for slow DOMs.

“Huge” Number of Elements or “Significant”?

Jimmy Vu says that PURE (and LightningDOM, by extension) have an advantage when you have a “huge number of DOM elements to be created/changed” and he implies that this is uncommon. I think the more appropriate wording is a “significant” number of DOM elements. For a web app that uses client-side templating exclusively, this isn’t uncommon — it’s standard. Take a well-designed app like Basecamp. The average page has 50+ complex items displayed, each requiring a minimum of 3 HTML elements to represent them.

Rendering a page like this using the DOM is sluggish at best. Using .innerHTML/PURE/LightningDOM is blazing-fast. And it is precisely this speed which makes the web a suitable replacement for the desktop. When you’re used to a desktop app, trying to use a web-app that lacks this speed is downright maddening.

Categories: HTML · Javascript
Tagged: , , ,

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

Leave a Comment