什么更快？Ajax加载JSON或Ajax加载完整输出

Question

我希望看到不同的意见/看法.

我让Jquery通过ajax调用一个函数.它以两种方式加载数据:

1. ajax脚本从同一服务器加载JSON数据,然后使用JS解析它并将其附加到html中.

2. ajax脚本通过调用的php脚本直接加载完整的html /脚本设置,然后JS将其附加到html div.

我假设#1更快,因为它加载了一个基本的JSON数组,然后使用JS来解析它并附加到html.

意见？

谢谢!

Answer 1

有很多变数.#1 可能更快,只要您的JavaScript没有组装结果零碎并假设数据明显小于等效标记.如果您正在逐步组装结果,或者数据不比标记小得多,则可能会慢一些.它还取决于用户网络连接的速度与CPU和浏览器的速度(Chrome相当快,IE7相当慢)等.

零碎的事情:例如,如果您正在加载一个200行的表,并且您正在构建这样的行:

// ...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);
}

...那么与浏览器如何通过等效标记相比,这可能会相当慢.

但是,如果您更喜欢这样做:

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(""));

...你处于更好的状态,因为你可以通过浏览器快速解析HTML的能力获得最大程度的重用(从根本上说,这是浏览器的功能,以及它们的优化内容).

乍一看,有点反直觉的是,构建字符串然后将其交给浏览器可能比直接使用DOM方法或jQuery构建结构更快(甚至更快).但你想的越多,它就越明显(是的,我已经测试过了)为什么会这样.DOM是浏览器必须映射到其内部结构的抽象,并且您对DOM方法的每个调用都跨越JavaScript和浏览器的DOM引擎之间的边界层.相比之下,添加到数组的速度很快,join速度很快(即使在现代浏览器中字符串连接速度很快).将浏览器设置为完整的字符串可以使层之间的行程保持最小,并让浏览器直接构建其内部结构,而不必担心它们的DOM等价物(直到/除非您稍后要求它们).我最后一次测试这是几年前,结果是戏剧性的.我应该用当前的浏览器再试一次; 今天没时间,但......