Question

我希望看到不同意见/意见。

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

ajax脚本从同一服务器加载JSON数据，然后使用JS解析它并将其附加到html中。
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的能力获得最大程度的重用（从根本上说，这是浏览器的功能，以及它们的优化内容）。 / p>

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

Answer 2

说这两个解决方案中哪一个更快是不可能的：这一切都取决于你在做什么，无论是在PHP方面，还是在JS方面。

您应该考虑的主要是开发这些解决方案的难度 - 如果这意味着重复一些努力：

PHP在您的服务器上运行;你控制环境;并且不必为每种类型的浏览器调整代码
如果你使用Ajax显示一些东西，你可能也想显示那些使用非Ajax的东西 - 这意味着你可能已经有了一些PHP代码来呈现它;如果是这种情况，在JS中复制它可能需要更多的工作才能重复使用它。

在服务器上执行操作意味着：

可能更多的网络使用：发送HTML而不是数据可能意味着更大的负载 - 但使用压缩，这不应该产生如此大的差异。
服务器上的负载会更多（尽管你可以缓存一些东西） - 但渲染通常比从数据库中获取数据要少资源消耗

最后，如果我能指出你对这个问题给出的答案：Why is it a bad practice to return generated HTML instead of JSON? Or is it?

Answer 3

该问题的答案取决于许多因素，包括：

客户端计算机速度（旧机器通常会对复杂的JS解析和计算产生影响）
网络速度和生成内容的大小（这主要适用于转化为更大的html的大数据集）
该功能正在进行的数据操作的性质

Answer 4

我前段时间的经验发现，使用innerHTML表示大块HTML比使用document.createElement()构建它要快得多。它的速度要快得多，我甚至不再费心去编写速度测试了。对于小而浅的结构，速度差异可以忽略不计，对于它们，我仍然会使用createElement()进行速度差异，但任何更复杂的结构都会被转换为字符串。

以前我对innerHTML持怀疑态度，所以当我坐下来写测试时，我感到很惊讶。

我建议你自己尝试并编写自己的速度测试。

Answer 5

基准测试将告诉你什么是最快的。

Answer 6

您应该使用document.createDocumentFragment将获得更好的性能。附加到此片段只会占用内存，并且在您准备好之前不会修改DOM本身。我相信document.createElement仍然优于innerHTML，因为它绕过了字符串解析。您可以随时运行一系列基准测试来查看结果。

基准：http://jsperf.com/innertext-vs-fragment 资料来源：https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment

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

6 个答案: