Question

I wanted to see different views / opinions on this.

I’ve got Jquery invoking a function through ajax. It loads data two ways:

1. The ajax script loads JSON data from the same server, then uses JS to parse it and append it into html.

2. The ajax script loads complete html / script set up directly via that php script that’s called and then JS appends it to html div.

I’d assume #1 is faster since it’s loading a basic JSON array then uses JS to parse it and append to html.

Opinions?

Thanks!

Answer 1

There are a lot of variables. #1 may be faster, provided that your JavaScript isn’t assembling the result piecemeal and assuming that the data is markedly smaller than the equivalent markup. If you’re assembling the result piecemeal, or if the data isn’t much smaller than the markup, it may well be slower. It also depends on the speed of the user’s network connection vs. the speed of their CPU and browser (Chrome is fairly fast, IE7 is fairly slow), etc.

On the piecemeal thing: For instance, if you’re loading a 200-row table, and you’re building up the rows like this:

// ...stuff that initializes `tableBody` and clears out old stuff...
for (index = 0; index < stuff.length; ++index) {
    tr = $("tr");
    tr.append("td").html(stuff[i].a);
    tr.append("td").html(stuff[i].b);
    tr.append("td").html(stuff[i].c);
    tableBody.append(tr);
}

…then that’s probably going to be fairly slow compared with how the browser would blaze through the equivalent markup.

If, however, you’re doing it more like this:

markup = [];
for (index = 0; index < stuff.length; ++index) {
    markup.push("<tr>");
    markup.push("<td>" + stuff[i].a + "</td>");
    markup.push("<td>" + stuff[i].b + "</td>");
    markup.push("<td>" + stuff[i].c + "</td>");
    markup.push("</tr>");
}
tableBody.append(markup.join(""));

…you’re in better shape, because there you’re getting maximum reuse out of the browser’s ability to parse HTML quickly (which is, fundamentally, what browsers do, and what they’re optimized for).

It can seem, on first glance, a bit counter-intuitive that building up a string and then handing it to the browser can be faster (even markedly faster) than building up the structure directly with DOM methods or jQuery. But the more you think about it, the more obvious it is (and yes, I have tested it) why that’s the case. The DOM is an abstraction that the browser has to map to its internal structures, and each call you make to a DOM method crosses a boundary layer between JavaScript and the browser’s DOM engine. In contrast, adding to an array is fast, join is fast (even string concat is fast on modern browsers). Handing the browser a complete string keeps trips between layers at a minimum and lets the browser build up its internal structures directly without worrying about their DOM equivalents (until/unless you ask for them later). The last time I tested this was a couple of years ago, and the results were dramatic. I should try it again with current browsers; no time today, though…