с помощью 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, это заставляет браузер переформатировать документ.См. # 9 из 10 советов по повышению производительности Javascript .

Решение:

• Создайте переменную innerHTML, которая будет содержать сгенерированный HTML.
• Добавьте HTML к нему внутри .each().
• Добавьте 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() внутри цикла создайте набор элементов, а затем добавьте их. Также быстрее избежать циклических функций и просто использовать цикл 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.Более длинный ответ можно найти здесь .

Заменить

$.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);
});