使用 jquery，我如何加快将列表附加到选择器上

Question

我的以下代码看起来很慢，我想看看是否有任何其他方法可以更快地转储这些数组。

$.get("/MyController/GetDates?month=1&year=2011", function (data) {

        $.each(data.VacationEvents, function (index, value) {
            $("#vacationDates").append('<p>' + value.Date + '</p>');
        });
        $.each(data.CalendarEvents, function (index, value) {
            $("#calendarDates").append('<p>' + value.Date + '</p>');
        });
        $.each(data.ReleaseEvents, function (index, value) {
            $("#releasenDates").append('<p>' + value.Date + '</p>');
        });
    });

Answer 1

每次修改连接的 DOM 节点时，都会强制浏览器重排文档。请参阅来自10 Javascript Performance Boosting Tips 的#9。

解决方案：

• 创建将包含生成的 HTML 的 innerHTML 变量。
• 在 .each() 中附加 HTML。
• 将innerHTML 附加到#vacationDates。

• 对#calendarDates 和#releasenDates 执行相同操作。

  // ...
  var innerHTML = "";
  $.each(data.VacationEvents, function (index, value) {
     innerHTML += '<p>' + value.Date + '</p>';
  });
  $("#vacationDates").append(innerHTML);
  // ...
  

Answer 2

我会创建一个数组，然后将它一次附加到元素上。我怀疑它太慢了，因为每次追加都必须更新 DOM，所以这样你只需要更新 DOM 3 次。

var dates = [];
$.each(data.VacationEvents, function (index, value) {
     dates.push('<p>' + value.Date + '</p>');
});
$("#vacationDates").append(dates.join(''));

此外，如果您创建一个二维数组，您可以存储实际日期以及文本，然后如果您还持有对日期数组的引用，您可以轻松地允许用户在客户端按日期排序一边。

Answer 3

最好尽量减少 DOM 操作，因此不要在循环中使用.append()ing，而是构建元素集然后附加它们。避免循环函数也更快，只需使用for 循环。像这样的：

$.get("/MyController/GetDates?month=1&year=2011", function (data) {

    var vacationEvents = data.VacationEvents;
        $newVacations = $();

    for (var i=0; i<vacationEvents.length; i++) {
        $newVacations.add($('<p></p>', {text: vacationEvents[i].Date}));
    }

    $newVacations.appendTo("#vacationDates");

    // etc
});

Answer 4

“更快”是什么意思？只是更精简或更少的代码行？也许是这样的？

$.get("/MyController/GetDates?month=1&year=2011", function (data) {

    var myData = ['Vacation','Calendar','Release'];
    for(var i=0; i<myData.length; i++) {
        $.each(data[myData[i]], function(index, value) {
            $("#" + myData[i] + "Dates").append('<p>' + value.Date + '</p>');
        });
    }
});

Answer 5

创建元素而不是附加文本 html。简短的回答是，这可以防止您的浏览器将文本解析为 HTML。更长的answer can be found here。

替换

$.each(data.VacationEvents, function (index, value) {
    $("#vacationDates").append('<p>' + value.Date + '</p>');
});

与

$.each(data.VacationEvents, function (index, value) {
    vacation_date = document.createElement('p');
    vacation_date.innerHTML = value.Date; /* it pains me to do this */
    $("#vacationDates".append(vacation_date);
});