Fetch 与 ajax 与 XMLHttpRequest 为什么 Fetch 快得多？

Question

好吧，最近几天我一直在优化客户表。

有很多 10k+ 的客户端，显然该表需要很长时间才能加载。前端团队完成了分页+过滤器+重新排序，我希望保持这种方式。

所以我开始尝试通过 AJAX 注入渲染的 HTML，这显然很糟糕。速度可以接受，但是内存消耗巨大，之后表速度非常慢。

之后，我尝试通过 AJAX 以 JSON 格式加载数据，并使用 javascript 附加到表中。

我尝试了多种方法来执行此操作，最好的方法是一次处理 500-1000 个客户端，但完成该表需要 30 多秒，并且在此期间页面速度很慢。

我坚持不懈，并设法在后端节省了几秒钟的时间，但是，如果我只是在浏览器上加载 API，结果会立即出现，并且每次调用不会花费 10 秒以上的时间。

这是当我尝试 XMLHttpRequest 时，它产生了或多或少相同的结果。然后我发现了 fetch，这太神奇了。使用 fetch 现在只需不到 3 秒即可完全加载表。

所以我的问题是，为什么？是的，如果我深入研究文档，我可能会找出原因，但我只是非常忙碌并且非常好奇，肯定有人已经知道这一点。

PS如果有人对我正在使用的代码感到好奇：

最佳解决方案（获取）

for (var jj of {{ ret|safe }}) {
          fetch("/clients/table/build1/?start="+String(jj)).then(function (response) {
              response.json().then(function (request) {
                  for (let i = 0; i < request['results'].length; i++) {
                  $("#myAllClient_1").DataTable().row.add(<<CLIENT DATA>>)
                  }
            $("#myAllClient_1").DataTable().draw(false);
            <<bit more code>>

慢ajax代码：

$.ajax({
          method: "GET",
          dataType: "JSON",
          url: "/clients/table/build1/?start=" + snum,
          success: function (data) {
              for (let i = 0; i < data['results'].length; i++) {
                  $("#myAllClient_1").DataTable().row.add(<<CLIENT DATA>>);
              }
              $("#myAllClient_1").DataTable().draw(false);
              <<bit more code>>
      })

PS2：优化的下一步是放弃“row.add”循环，只获取已经组织好的数据并准备好在没有循环的情况下在该 add 函数上输入

Answer 1

答案可以在Alex Russel（Google Chrome 团队）的这条推文中找到：

fetch()在网络层面与 XHR 相同，但对于解码 JSON 之类的事情，它可以在线程外完成这项工作，因为 API 合约是基于承诺的预先。

因此，归结为浏览器端对 fetch + json 更好的多线程支持，而 ajax 实现将执行请求，然后在 JavaScript 线程中进行（同步）json 解析。

这也可能意味着在非常奇怪的情况下，fetch 可能比 ajax “更糟糕”，在这种情况下，您会调用 json API，但从未真正解析 json（将其视为纯文本而不是 fi）。尽管这甚至可能不会显示在计时上，而只是增加了 CPU 使用率（json 解析发生在另一个线程中，但从未使用过）。