What's faster? Ajax loading JSON or Ajax loading complete output
I wanted to see different views / opinions on this.
I've got Jquery invoking a function through ajax. It loads data two ways:
The ajax script loads JSON data from the same server, then uses JS to parse it and append it into html.
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!
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...
Saying which one of those two solutions is faster is not possible : it all depends on what you are doing, be it on the PHP side, or on the JS side.
What you should consider, mainly, is how difficult developing those solutions can be -- and if it means duplicating some efforts :
Doing things on your server means :
In the end, if I can point you to the answer I gave on this question : Why is it a bad practice to return generated HTML instead of JSON? Or is it?
The answer to that question depends on many factors, including:
上一篇: JSON或HTML？