Posted on May 5, 2014 by Chris Harrington

Using document fragments to append html to the DOM with JavaScript

The Problem

I’d recently been asked to solve some performance problems with a page that had previously been built. The page is responsible for allowing the user to choose an airport. It has some other fancy stuff going on, like favouriting airports and such, but the bottom line was that it was simply a list of airports, one of which the user would select. We saw some unusually high rendering times for the page and when I dug into the code, I saw that the page was being generated dynamically by using JavaScript to iterate over a JSON list of airports and building the view from a template. That list of airports was retrieved asynchronously, which is why the page is built using JavaScript instead of being rendered on the server. There’s a couple of ways to build pages in JavaScript with jQuery.

Continue reading