The hardest obstacle to overcome with JavaScript is deciding the best way to make the page change dynamically. There has always been a debate hovering around innerHTML and document.createElement. Jonathan Snook just questioned it again, and it reminded me of some ideas I’ve been meaning to talk about.
So, I have been doing some heavy JavaScript work lately with the intent of making a web page behave as desktop like as possible. This involved frequent, large changes to the DOM. Originally, the entire app was built using document.createElement. Everything worked, but it was slow. Out of curiosity, I rewrote one section with innerHTML, and that section began operating at warp speed.
Multiple tests later, and the entire application was rewritten to use innerHTML. The change resulted in a more responsive application. That was the only major benefit. On the downside, the code was arguably harder to read, while document.createElement allowed the code to still feel structured. But our users come first, and the speed increase was too much to pass up.
We brainstormed different ways of cleaning up the code, and came up with a few ideas. The first two, XSLT and JSONT, were shot down because of the amount of rework they would require, so we went with a third option. Basically, just create all of the markup in the page, and slap on a class name of ‘hide’ to anything you don’t want to show. Then, with JavaScript add and remove hide as needed, and just change the values of nodes. This resulted in a more significant speed increase over innerHTML, and it is what we will be going with until we find something better.
Good reading
(Via Particletree RSS Digest.)