Какие хитрости есть при работе с большим количеством данных в js?

Question

[Максим Тимофеев]

Есть js, который генерит таблицу на базе json, циклы и

var tr  = $("<tr />");
tr.addClass('someClass');
sometable.append(tr);

Типа того. Если строк более 10k начинает хрюкать, а при 1M наверное хрюкнет окончательно. Есть какие-то готовые решения или хитрости. Js знаю поверхностно, так что если накидаете полезной инфы по теме, буду рад.

ПС. Интересуют решения кроме пагинации, тут как бы очевидно. Задача вывести как можно больше строк на 1 страницу.

Comments

[Максим Тимофеев]

SmInc, Надо вычисления делать, так что удалять данные не получится.

[Aves]

Одновременно видно в любом случае только несколько десятков строк, поэтому используют virtual scrolling типа https://github.com/tbranyen/hyperlist
Пример с 2M строк
Поиск по Ctrl-F работать не будет, естественно.

[Максим Тимофеев]

SmInc, Надо вычисления делать, так что удалять данные не получится. Надо виртуализировать DOM, ищу решения в этом направлении.

[sim3x]

Максим Тимофеев, Кто сказал, что такое вообще стоит делать на фронте?

[Максим Тимофеев]

sim3x, А почему нет? Меньше нагрузка на сервер. К тому же дает возможность пользователю управлять этими расчетами.
Вот пример удачного front решения: https://www.ag-grid.com/example.php Но дорого и слишком многофункционально. Но по сути реализовать такое на back - это постоянные ajax и выборки из базы, а если там 2m записей. Как по мне именно на front это надо перекладывать.

[sim3x]

Максим Тимофеев,
в примере макс 100к
данные в примере справочные, те специфичный кейс
вкладка отожрала 1Гб рам

Если вам нужно реализовать показ справочника размером до 10к - решение приемлемо

Виртуализировать дом не надо
Используйте встроенные в браузеры базы для решения похожих кейсов

[Максим Тимофеев]

Используйте встроенные в браузеры базы для решения похожих кейсов

Вы имеете в виду web storage?

Answer 1

[Алексей Николаев]

Вставляйте все строки одним пакетом, либо разбивайте на пакеты по 500-1000 строк. Таким образом, кратно сократите количество циклов перерисовки страницы. Также старайтесь не вызывать повторяющиеся операции вроде .addClass по тысячам раз, можно в вашем случае обойтись строками.

let rows_layout = '';
for(let i = 0; i < 9999; i++) {
    const row_class = 'someClass';
    const value = 'someData';
    const row = `<tr class="${row_class}">${value}</tr>`;

    rows_layout += row;
}
sometable.append(rows_layout);

jsfiddle

Comments

[Mikhail Osher]

Не знаю, как себя ведет строковый вариант. При варианте с циклом можно использовать fragments.

[Максим Тимофеев]

Mikhail Osher, Огонь, не знал. Все нет времени толком углубиться в js, спасибо.

Answer 2

[Mikhail Osher]

Нет смысла рендерить больше данных, чем влезает в видимую область.
Это называется virtual scroll.

- посчитать высоту контейнера
- посчитать высоту элемента => получаем количество видимых
- рендерить это количество элементов
- при скролле обновлять нужные индексы и менять их содержимое, не трогая сами DOM ноды

Примеры для angular/ionic/react. Почитайте, сделайте/загуглите решение, которое Вам подойдет

https://github.com/rintoj/angular2-virtual-scroll
https://ionicframework.com/docs/api/components/vir...
https://github.com/bvaughn/react-virtualized

Comments

[Максим Тимофеев]

angular/ionic/react не годится, нужно чистый js или jquery

[Mikhail Osher]

Максим Тимофеев, я лишь показал примеры. думаю, для vanillajs/jquery должны быть аналоги

[Максим Тимофеев]

Mikhail Osher, тоже так думал, но пока из того что нашел только это: https://github.com/tbranyen/hyperlist
а хотелось бы всех посмотреть)))

[Mikhail Osher]

Максим Тимофеев, посмотрел библиотеку. Очень похоже на правду. Будь у меня такая задача, я бы попробовал на ней прототип набросать.

[Mikhail Osher]

Максим Тимофеев, только учитывайте, что расстояния между элементами списка лучше регулируйте через padding при box-sizing: border-box. Если будет использоваться margin или другой box-sizing - список может отрендериться некорректно.

[Максим Тимофеев]

Mikhail Osher, спс

Answer 3

[Glorious Cat]

https://datatables.net/

Answer 4

[Виталий]

Ленивая подгрузка, виртуальный скрол. По сути, та же пагинация, но немного по-другому.

Answer 5

[rPman]

Если подгрузка на лету не подходит, используйте шаблоны, работайте с DOM элементами как с текстом везде где это возможно, так как быстрее чем со строками работать в принципе не возможно.

В вашем случае можно вставлять сразу целой строчкой (тег и содержимое tr) или даже подготовить всю таблицу в виде строки а потом вставить ее просто поместив ее в innerHTML нужного div.

Answer 6

[Роман]

Если вы на каждую строку вешаете someClass - то имеет смысл повесить его только на родительский элемент, а для
tr написать селектор, который будет их стилизовать
.someClass tr { .... }