webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg

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

Есть js, который генерит таблицу на базе json, циклы и
var tr  = $("<tr />");
tr.addClass('someClass');
sometable.append(tr);

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

ПС. Интересуют решения кроме пагинации, тут как бы очевидно. Задача вывести как можно больше строк на 1 страницу.
  • Вопрос задан
  • 420 просмотров
Решения вопроса 2
Вставляйте все строки одним пакетом, либо разбивайте на пакеты по 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
Ответ написан
miraage
@miraage
Старый прогер
Нет смысла рендерить больше данных, чем влезает в видимую область.
Это называется 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
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@tansur
Ответ написан
Комментировать
@vitstr
Front-end developer
Ленивая подгрузка, виртуальный скрол. По сути, та же пагинация, но немного по-другому.
Ответ написан
Комментировать
@rPman
Если подгрузка на лету не подходит, используйте шаблоны, работайте с DOM элементами как с текстом везде где это возможно, так как быстрее чем со строками работать в принципе не возможно.

В вашем случае можно вставлять сразу целой строчкой (тег и содержимое tr) или даже подготовить всю таблицу в виде строки а потом вставить ее просто поместив ее в innerHTML нужного div.
Ответ написан
Комментировать
uaKorona
@uaKorona
Front-End разработчик
Если вы на каждую строку вешаете someClass - то имеет смысл повесить его только на родительский элемент, а для
tr написать селектор, который будет их стилизовать
.someClass tr { .... }
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы