Php 什么'；快一点？Ajax加载JSON或Ajax加载完整输出

我想在这个问题上看到不同的观点

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

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

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

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

意见

---

谢谢

说这两个解决方案中哪一个更快是不可能的：这完全取决于您在做什么，无论是在PHP端还是在JS端

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

• PHP在您的服务器上运行；你控制环境；而且不必为每种浏览器调整代码
• 如果您使用Ajax显示某些内容，您可能也希望使用非Ajax显示这些内容——这意味着您可能已经有一些PHP代码来呈现这些内容；如果是这样的话，在JS中复制它可能需要更多的工作，而只是重复使用它

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

• 可能更多的网络使用：发送HTML而不是数据可能意味着更大的负载——但是使用压缩，这不会有太大的区别
• 服务器上的负载稍微多一点（不过，您可以缓存一些东西）——但是渲染通常比从数据库中获取数据消耗的资源更少

---

最后，如果我能指出我对这个问题的回答：

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

• 客户端计算机速度（旧机器通常会因复杂的JS解析和计算而阻塞）
• 网络速度和生成内容的大小（这主要适用于转换成更大的html的大型数据集）
• 函数正在执行的数据操作的性质

---

有很多变量#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(""));

/…初始化“tableBody”并清除旧内容的内容。。。
for（索引=0；索引

…那么，与浏览器通过等效标记的方式相比，这可能会相当缓慢
但是，如果您更喜欢这样做：

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

markup=[]；
for（索引=0；索引

…您的状态更好，因为您可以最大限度地重用浏览器快速解析HTML的能力（从根本上说，这就是浏览器的功能以及它们的优化目标）

---

乍一看，构建字符串并将其传递给浏览器可能比直接使用DOM方法或jQuery构建结构更快（甚至更快），这似乎有点违反直觉。但是你想得越多，它就越明显（是的，我已经测试过了）为什么会这样。DOM是浏览器必须映射到其内部结构的抽象，对DOM方法的每次调用都会跨越JavaScript和浏览器DOM引擎之间的边界层。相比之下，添加到数组很快，

join

很快（即使在现代浏览器上字符串concat也很快）。给浏览器一个完整的字符串可以使层之间的距离保持最小，并允许浏览器直接构建其内部结构，而不必担心它们的DOM等价物（直到/除非您稍后要求）。我上一次测试这个是在几年前，结果是戏剧性的。我应该在当前浏览器上再试一次；不过，今天没有时间……
我自己不久前的经验发现，对大块HTML使用

innerHTML

比使用

document.createElement（）

构建要快得多。它的速度快得多，我甚至不再费心写速度测试了。对于小而浅的结构，速度差异可以忽略不计，对于它们，我仍然会使用

createElement（）

来实现，但任何更复杂的内容都会作为字符串转储
以前我对

innerHTML

非常怀疑，所以当我坐下来编写测试时，我感到很惊讶

---

我建议您自己尝试并编写自己的速度测试。
基准测试将告诉您什么是最快的。
您应该使用document.createDocumentFragment将获得更好的性能。附加到此片段只会消耗内存，并且在准备好之前不会修改DOM本身。我相信document.createElement仍然优于innerHTML，因为它绕过了字符串解析。您总是可以运行一系列基准测试来查看结果
基准：

---

来源：
通常，对于基本数据集输出，您是否建议只使用常规php呈现？我现在的输出是非常基本的；不，m