Задать вопрос
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
javascript

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

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

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

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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Ещё заказы