Как добавить (массово) несколько элементов в DOM, используя jQuery

Question

У меня есть таблица, которая должна динамически заполняться асинхронным ответом от API. API отсылает обратно JSON, который позже интерпретируется в строку для таблицы, и у меня он отлично работает.

Дело в том, что чем больше ответ JSON, тем больше времени требуется для обработки ответа (очевидно), поэтому, когда я поднимаюсь выше, чем 2k-3k элементов в массиве, JS, добавляющий строки в таблицу, запускается обработка ответа JSON занимает более 20 минут.

Есть ли способ оптимизировать это?

Вот пример моего процесса разбора:

function fillTable() {
    let tbody = $('tbody');
    for(let i = 0; i < 100; i++) {
        let tr = $('<tr><td>' + (i + 1) + '</td><td>Table row ' + (i + 1) + '</td><td>' + (Math.random() * 1000) + '</td></tr>');
        tr.appendTo(tbody);
    }
}
fillTable();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Description</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Очевидно, что фрагмент не отражает количество времени, необходимое для обработки JSON, но вы поняли идею.

Answer 1

Вы можете создать бесконечную загрузку и пошаговую загрузку, используя нумерацию страниц.

function fillTable(page) {
    let tbody = $('tbody');
    for(let i = page; i < page + 50; i++) {
        let tr = $('<tr><td>' + (i + 1) + '</td><td>Table row ' + (i + 1) + '</td><td>' + (Math.random() * 1000) + '</td></tr>');
        tr.appendTo(tbody);
    }
}
fillTable(5);

но вам нужно иметь контроль над страницей прокрутки

Answer 2

Что я сделал, чтобы исправить это, вместо того, чтобы добавлять каждую строку по отдельности к таблице, помещать каждый элемент строки в массив, а после завершения массива, используя функцию-прототип apply, расширить append jQuery. функция для применения всего массива сразу.

Как это:

function fillTable() {
    let tr = [];
    let tbody = $('tbody');
    for(let i = 0; i < 100; i++) {
        let e = $('<tr><td>' + (i + 1) + '</td><td>Table row ' + (i + 1) + '</td><td>' + (Math.random() * 1000) + '</td></tr>');
        // Removed for better performance
        //tr.appendTo(tbody);
        tr.push(e);
    }
    $.fn.append.apply(tbody, tr).html();
}

Таким образом, сокращая 20-40-минутный процесс для 11k записей, примерно до 7 с.