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

【问题标题】：How to avoid freezing the browser when adding a big HTML-Chunk (which was loaded via AJAX)添加大 HTML-Chunk（通过 AJAX 加载）时如何避免冻结浏览器
【发布时间】：2017-06-21 03:22:12
【问题描述】：

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

请求返回后，我将项目插入隐藏的 div 中，以便用户可以搜索任何项目。（如果他在完整列表加载之前启动搜索，他会在模态对话框中获得适当的“正在加载...微调器”）

现在我唯一的问题是，在插入由 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 中移动一些必要的计算？

【问题讨论】：

...“冻结”可能是由于您尝试附加的信息量太大。您是否考虑过添加更少？
理想情况下，您希望一次在 DOM 中拥有更少的东西。想想类似分页系统的东西：您只显示绝对关键的内容并根据需要加载更多数据。
在没有 Ajax 的情况下加载具有这么多数据量的页面也需要很长时间。分页、渐进式加载等

标签： javascript jquery ajax performance dom

【解决方案1】：

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

【讨论】：

用户通常不会滚动浏览这 10000 个元素。他通常会通过输入一些信息来搜索该项目。如果我已经在 DOM 中插入了数据，我只需让匹配的部分可见。我想我可以搜索 js-data，只追加匹配项。
对。您搜索 js 对象/数组，然后仅附加那些。为了提高效率，您可以要求用户输入最少 2-3 个字符以避免匹配过多。另一种方法是搜索对象中字符串的开头，而不是匹配字符串的任何部分。
好的，我试试看。