Javascript 使用大量数据更新DOM时jQuery页面冻结

我有一个jQuery post方法，如下所示：

$.post("/SearchCompetitor/Index", { username: _username }, StartLoading())
                           .done(function (data) {
                               if (data !== "UsernameError") {
                                   StopLoading();
                                   var brands = $('<table />').append(data).find('#tableProducts').html();
                                   $('#tableProducts').html(brands);
                                   $("#tableProducts").simplePagination({

                                       // the number of rows to show per page
                                       perPage: 10,

                                       // CSS classes to custom the pagination
                                       containerClass: '',
                                       previousButtonClass: '',
                                       nextButtonClass: '',

                                       // text for next and prev buttons
                                       previousButtonText: 'Previous',
                                       nextButtonText: 'Next',

                                       // initial page
                                       currentPage: 1

                                   });
                                   var header = $('<div />').append(data).find('.bs-glyphicons').html();
                                   $('.bs-glyphicons').html(header);
                                   $('#tableProducts thead, #header').fadeIn("slow");
                                   $('#emptyText').hide();

                               }
                               else {
                                   StopLoading();
                                   ShowMessage("No eBay user was found under: " + $('.txtSearch').val());
                               }
                           })
                           .fail(function (data) {
                               StopLoading();
                               ShowMessage("Something went wrong, please try again!");
                           });

$.post（“/SearchCompetitor/Index”，{username:_username}，惊人的加载（））
.完成（功能（数据）{
如果（数据！=“UsernameError”）{
停止加载（）；
var brands=$（''）.append（data.find（'#tableProducts'）.html（）；
$（#tableProducts'）.html（品牌）；
$（“#tableProducts”）。简单化({
//每页要显示的行数
每页：10，
//用于自定义分页的CSS类
集装箱类：''，
PreviousButton类：“”，
下一个按钮类：“”，
//下一个和上一个按钮的文本
previousButtonText:“上一个”，
nextButtonText:“下一步”，
//首页
当前页：1
});
var header=$（''）.append（data.find（'.bs glyphicons'）.html（）；
$（'.bs glyphicons'）.html（标题）；
$（'tableProducts thead，'header'）.fadeIn（“慢”）；
$（'#emptyText'）.hide（）；
}
否则{
停止加载（）；
ShowMessage（“在“+$（'.txtSearch'）.val（）下未找到易趣用户”；
}
})
.失败（功能（数据）{
停止加载（）；
ShowMessage（“出现问题，请重试！”）；
});

当post数据对象内部不包含很多项时，它就相当正常，并且加载时没有问题

但是当我用2000多个项目更新表时，它会带来一个巨大的问题，我在firefox浏览器上测试它，每次我处理2000多个返回的项目时，它都会崩溃

---

我的问题是，有没有办法避免浏览器冻结，也许像C#这样的“客户端异步方法”在使用异步方法来防止用户界面在处理大块数据时冻结？？？

，正如我在评论中提到的，减少向DOM中注入的记录量可能是首先要解决的问题（谁真正想要一个显示2000多条记录的网页）。使用分页（正如您所说的）将大大有助于解决问题

第二，要非常小心DOM注入点——尽量减少修改DOM的频率，因为这是一个众所周知的瓶颈

减少DOM注入的一个非常有效的方法是处理字符串数据并操纵字符串，直到它准备好在DOM中使用为止。只有在这一点上，你才会注射它。另外，永远不要在循环中注入DOM

因此，我在您的代码中看到了以下内容：

StartLoading() // <-- you are invoking the function with this code

接下来，我们有：

var brands = $('<table />').append(data).find('#tableProducts').html();
$('#tableProducts').html(brands);

稍后在代码中，您会看到同样的场景：

var header = $('<div />').append(data).find('.bs-glyphicons').html();

var header=$（''）.append（data.find（'.bs glyphicons'）.html（）；

同样，在将数据注入DOM之前，搜索

数据

---

最后，考虑是否应该使用<代码> .HTML>（<）/>代码>或<代码>文本（）>代码>。前者导致HTML解析器解析内容，后者则不解析。如果内容包含标记，是的，您将需要

.html（）

，但是如果没有，

.text（）

可以更快。

正如我在评论中提到的，减少注入DOM的记录量可能是第一件要解决的事情（谁真的想要一个显示2000多条记录的网页）。使用分页（正如您所说的）将大大有助于解决问题

第二，要非常小心DOM注入点——尽量减少修改DOM的频率，因为这是一个众所周知的瓶颈

减少DOM注入的一个非常有效的方法是处理字符串数据并操纵字符串，直到它准备好在DOM中使用为止。只有在这一点上，你才会注射它。另外，永远不要在循环中注入DOM

因此，我在您的代码中看到了以下内容：

StartLoading() // <-- you are invoking the function with this code

接下来，我们有：

var brands = $('<table />').append(data).find('#tableProducts').html();
$('#tableProducts').html(brands);

稍后在代码中，您会看到同样的场景：

var header = $('<div />').append(data).find('.bs-glyphicons').html();

var header=$（''）.append（data.find（'.bs glyphicons'）.html（）；

同样，在将数据注入DOM之前，搜索

数据

---

最后，考虑是否应该使用<代码> .HTML>（<）/>代码>或<代码>文本（）>代码>。前者导致HTML解析器解析内容，后者则不解析。如果内容包含标记，是的，您将需要

.html（）

，但如果没有，则

.text（）

可以更快。

我在使用ajax调用更新包含1000多个DIV元素的元素时遇到了类似的问题：将其替换为仅300个DIV会冻结浏览器

有趣的是，问题似乎不在于获取元素的数量，而在于覆盖元素。我通过先清空元素解决了这个问题，就像你的情况一样

$('#tableProducts').html('');
$('#tableProducts').html(brands);

---

我在用ajax调用更新包含1000多个DIV元素的元素时遇到了类似的问题：用300个DIV替换它会冻结浏览器

有趣的是，问题似乎不在于获取元素的数量，而在于覆盖元素。我通过倒空电池解决了这个问题