javascript - 我们能否将大型 ajax 调用拆分为多个较小的调用以更快地加载数据？

Question

我使用下面的ajax调用从数据库检索数据并将其显示在我的页面中。

$.ajax({
    type: "POST", url: "MyPage.aspx/LoadGrid",
    data: "{idyear:'2020'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        $(".gridBody").html(response.d);
    },
    failure: function (response) {
        alert(response.d);
    }
});

目前此操作返回 1026 条记录，大约需要 12 秒。

由于这个过程非常耗时，而且将来记录会更多，我必须找到一种替代方法来更快地加载数据。

所以，我尝试了另一种方法。我决定首先获取记录总数。例如，现在我有 1026 条记录，如果我想在 100 条记录边界中加载数据，我需要同时进行 11 个 ajax 调用，并在所有 ajax 调用结束时合并结果。我认为通过应用这种方法，我可以一起启动所有调用，而不必等待结束调用才能开始新的调用。

var pagesize = 100; 
getQty(function () {
    var pagesqty = Math.floor(qty / pagesize);
    if (qty % pagesize > 0) {
        pagesqty += 1;
    }
    var control = 0;
    for (var i = 0; i < pagesqty; i++) {
        $.ajax({
            type: "POST", url: "MyPage.aspx/LoadGridMtoN",
            data: "{idyear:'2020' , page:'" + i + "' , pagesize:'" + pagesize + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                //alert(control+" succeed");
                eval("var str" + i + "='" + response.d + "'");
                control += 1;
                if (control == pagesqty) {
                    var str = "";
                    for (var i = 0; i < pagesqty; i++) {
                        eval("str += str" + i);
                    }
                    $(".gridBody").html(str);
                }
            },
            failure: function (response) {
                alert(response.d);
            }
        });
    }
});

但现在我在执行 ajax 调用时遇到超时错误。有谁知道更好的方法吗？

P.S: 我想尝试一下 Web Workwer，但似乎无法在 Web Workwer 中使用 JQuery。

P.S:我不想使用分页。我应该将所有数据加载在一起。

Answer 1

请注意，从客户端同时调用端点(而不是单个调用)会产生更多开销，并且不是一个好的解决方案。例如，您的服务器应该处理来自客户端的更多连接，您的数据库应该处理来自后端 ORM 的更多连接，您的表以及相应的磁盘和 IO 具有挑战性等等...

顺便说一句，考虑到系统的所有部分都是完美设计的，从用户体验的 Angular 和技术的 Angular 来看，增量加载数据是一个很好的解决方案。我的意思是，加载前 100 条记录，同时用户使用它们加载后 100 条记录并将它们添加到列表末尾(或当用户向下滚动时)。

但是最后你必须考虑分页!您无法在网页上加载 1M 记录!并且没有人检查和使用网页中的所有记录。因此，您必须限制获取的记录数量并使用服务器端分页或向用户提供另一种方法来提交他们的请求，然后处理请求并创建报告并将其写入原始文本文件或 Excel将下载链接归档并通过电子邮件发送给他/她。