Javascript 通过JQuery处理大量数据

我有一个数据过滤器，其中包含年、月、国家和城市的组合框。组合框中的所有项目都有“全选”（所有年份、所有月份、所有国家和所有城市）

当我选择一个过滤器时，我将数据发送到服务器，并获得JSON对象和数据，这些数据由JQuery处理

如果选择所有数据，问题就来了——服务器将返回一个JSON对象，其中包含三万条记录（甚至更多）和浏览器，包括动画gig（加载器），冻结，所有操作都会花费很长时间

这是一个数据过滤器的HTML（一些选择由AJAX填充）

这是一个JQuery脚本：

$(document).ready(function () {
    $('#btnFilterData').click(function () {
        GetFilteredData();
    });
});

function GetFilteredData() {
    $.ajax({
        url: 'some-file.php',
        data: {
            year: $('#cmbYear').val(),
            month: $('#cmbMonth').val(),
            countryid: $('#cmbCountry').val(),
            cityid: $('#cmbCity').val()
        },
        type: 'post',
        async: true,
        success: function (data) {
            if (data.IsError) {
                ShowErrorDialog(data.Error);
            }
            else {
                $('#tableRawData').find('tr:gt(0)').remove();
                if (data.Data != null) {


           for (var i = 0; i < Object.keys(data.Data).length; i++) {
                    var obj = data.Data[i];

                    var newRow = '<tr><td>' + obj.Date+ '</td><td>' + obj.Country + '</td><td>' + obj.City + '</td><td>' + obj.Loan+ '</td><td>' + obj.Paid+ '</td><td>' + obj.Remains+ '</td><td data-label="' + obj.Note + '"></td></tr>';
                    $('#tableRawData').append(newRow);
                }
            }
        }
    },
    complete: function () {
        HideWaitDialog();
    }
});

$（文档）.ready（函数（）{
$（'#btnFilterData'）。单击（函数（）{
getFilteredata（）；
});
});
函数getFilteredata（）{
$.ajax({
url:'some file.php'，
数据：{
年份：$（“#cmbYear”）.val（），
月份：$（'#cmbMonth'）.val（），
countryid:$（“#cmbCountry”）.val（），
cityid:$（'#cmbCity'）.val（）
},
键入：“post”，
async:true，
成功：功能（数据）{
if（data.IsError）{
错误对话框（data.Error）；
}
否则{
$（'#tableRawData'）。查找（'tr:gt（0）'）。删除（）；
if（data.data！=null）{
for（var i=0；i

---

有什么方法可以使处理更快或更有效吗？理想的方法是不冻结浏览器和动画加载程序…

我阅读了你的代码，我同意关于分页的评论，但是，如果你真的想保持现状，我发现了一些优化

• 您在每次迭代中调用

  $（“#tableRawData”）

  ，但每次迭代都是一样的。您在这里浪费了计算能力。您应该在循环开始时将其放入变量中。通过这样做，您可以将代码的性能提高15%
• append是一个涉及DOM操作的复杂函数，您不应该尽可能少地使用它。一个技巧是将HTML累积在字符串中，并在循环结束时调用append。这样做将比我以前的解决方案快12倍
• jQuery append解析字符串并将其分解为DOM元素并将它们附加到DOM树中。此操作成本较高。您可以做的是作为浏览器解析字符串并附加它。这会更快，因为它是本机的、高度优化的代码，并且jQuery、javascript和DOM树之间没有交互e、 如果您这样做，它将比我以前的解决方案快1.7倍

我将代码片段放在jsperf中，以便您可以在操作系统和浏览器上进行测试：

所有测试都针对10000行

在我的浏览器上应用所有优化可以使代码比你的代码快26倍

作为一个有趣的结论：你的问题的答案是：

通过JQuery处理大量数据

是:

不要使用jQuery；）

---

可能会在结果中添加分页，以便一次只显示少数记录？我怀疑任何用户都不需要同时查看30000条记录。设置某种限制非常简单，如果存在比限制更多的结果，则返回消息会告诉用户缩小筛选范围，因为页面中的元素太多……使用分页或滚动加载不一次添加所有元素如果客户想要所有数据，让他们下载或以谷歌表单的形式提供。我认为当有30000个结果时分页是不实际的。。正如@Mottie所建议的，如果结果超过某个限制，最好提供不同的数据访问。。。

$(document).ready(function () {
    $('#btnFilterData').click(function () {
        GetFilteredData();
    });
});

function GetFilteredData() {
    $.ajax({
        url: 'some-file.php',
        data: {
            year: $('#cmbYear').val(),
            month: $('#cmbMonth').val(),
            countryid: $('#cmbCountry').val(),
            cityid: $('#cmbCity').val()
        },
        type: 'post',
        async: true,
        success: function (data) {
            if (data.IsError) {
                ShowErrorDialog(data.Error);
            }
            else {
                $('#tableRawData').find('tr:gt(0)').remove();
                if (data.Data != null) {


           for (var i = 0; i < Object.keys(data.Data).length; i++) {
                    var obj = data.Data[i];

                    var newRow = '<tr><td>' + obj.Date+ '</td><td>' + obj.Country + '</td><td>' + obj.City + '</td><td>' + obj.Loan+ '</td><td>' + obj.Paid+ '</td><td>' + obj.Remains+ '</td><td data-label="' + obj.Note + '"></td></tr>';
                    $('#tableRawData').append(newRow);
                }
            }
        }
    },
    complete: function () {
        HideWaitDialog();
    }
});