Question

我有一个网络应用程序，显示有关各种项目的信息。最初只显示一小部分项目。（顶级的）。当页面最初加载（并显示第一个项目）时，我通过AJAX从服务器请求完整项目列表。

请求一返回，我就会在隐藏的div中插入项目，因此用户可以搜索任何项目。（如果他在加载完整列表之前启动搜索，他会在模态对话框中获得一个合适的“loading ... spinner”）

现在我遇到的唯一问题是，在插入ajax提取的数据后，（~10,000项，~40MB生成的HTML）浏览器冻结最多40秒。

我的代码是：

$.ajax({url: uri, data: { .... }})
        .done(function(data, status, jqXHR) {
                data = $.trim(data); // takes about 35 ms
                setupFullTree(data);
        })

function setupFullTree (data,s){
    $tree.append('<div id="i-full-tree" data-status="loading" style="display:none"></div>'); // takes no measurable time
    $('#i-full-tree').append(data); // takes between 10000 and 40000 ms, depending on the browser, ...
    indexFts(); // takes about 50ms
}

我可以使用哪种“模式”来使我的网络应用程序负责？我是否必须将其拆分成小块（它是树状结构，所以这并不容易）。我是否需要在插入时使用setTimeout？有没有办法在WebWorker中移动一些必要的计算？

Answer 1

您应该在js变量中存储要在树结构中显示的ajax响应数据，然后加载前100项，然后在用户滚动到数据末尾时加载。

如何在添加大型HTML-Chunk（通过AJAX加载）时避免冻结浏览器

1 个答案: