Question

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

当我选择过滤器时，我将数据发送到服务器，然后获取带有数据的JSON对象，该对象由JQuery处理。

如果您选择所有数据，问题就出现了 - 服务器将返回一个包含三万条记录（以及更多）的JSON对象和浏览器，包括动画演出（加载程序），冻结并且所有内容都需要很长时间。

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

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title" data-label="Filter data"></h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3" data-label="Year"></div>
            <div class="col-md-3" data-label="Month"></div>
            <div class="col-md-3" data-label="Country"></div>
            <div class="col-md-3" data-label="City"></div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <select id="cmbYear">
                    <option value="0" data-label="All years"></option>
                </select>
            </div>
            <div class="col-md-3">
                <select id="cmbMonth">
                    <option value="0" data-label="All year"></option>
                    <option value="1" data-label="January"></option>
                    <option value="2" data-label="February"></option>
                    <option value="3" data-label="March"></option>
                    <option value="4" data-label="April"></option>
                    <option value="5" data-label="May"></option>
                    <option value="6" data-label="June"></option>
                    <option value="7" data-label="July"></option>
                    <option value="8" data-label="August"></option>
                    <option value="9" data-label="September"></option>
                    <option value="10" data-label="October"></option>
                    <option value="11" data-label="November"></option>
                    <option value="12" data-label="December"></option>
                </select>
            </div>
            <div class="col-md-3">
                <select id="cmbCountry">
   <option value="0" data-label="All countries"></option>
            </select>
        </div>
        <div class="col-md-3">
            <select id="cmbCity">
                <option value="0" data-label="All cities"></option>
            </select>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-12">
            <button id="btnFilterData" data-label="Filter data" class="btn btn-primary btn-lg pull-right"></button>
        </div>
    </div>
</div>

这是一个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();
    }
});

有什么方法可以让处理更快或更有效？理想的方式是不冻结浏览器和动画加载器......

Answer 1

我读了你的代码，我同意有关分页的评论，但是，如果你真的希望按照他们的方式保留事情，我发现了一些优化

您在每次迭代时都在调用$('#tableRawData')但这在每次迭代时都是相同的。你在这里浪费计算能力。你应该把它放在循环开头的变量中。通过这样做，您将通过 15％
append是一个涉及DOM操作的复杂函数，你应该尽可能少地使用它。一个技巧是在字符串中累积HTML并在循环结束时调用append。通过这样做，你比我以前的解决方案 快12倍

jQuery追加解析你的字符串并将其分解为DOM元素并将它们附加到DOM树。该操作成本高。你可以做的是作为浏览器解析字符串并追加它。它会更快，因为它是本机和高度优化的代码，jQuery，javascript和DOM树之间不会有交互。如果你这样做，比我以前的解决方案 <1.7>

我将代码段放在jsperf中，以便您可以在操作系统和浏览器上对其进行测试：http://jsperf.com/creating-a-large-table-with-jquery

所有测试都是10000行。

在我的浏览器上应用所有优化后，代码比您的

更快

作为一个有趣的结论：你的回答是：

通过JQuery处理大量数据

是：

不要使用jQuery;）

通过JQuery处理大量数据

1 个答案: