Хороший UI должно быстро адаптироваться к количеству данных. Даже если сейчас мы грузим в грид (DataTable) всего сотню записей, нет гарантии, что эти 100 записей не превратятся в 10 000 через месяц, либо же в 100 000 через год. Чем более успешным является ваше приложение, тем больше вероятность того, что количество данных в нем будет расти. Это значит, что вам будет необходимо переделать ваше приложение, чтобы поддерживать эти большие объемы данных.
При разработке Webix DataTable мы справились с этой трудностью. Сейчас, используя Webix DataTable, нет необходимости обновлять код приложения в случае роста его данных от сотни до тысячи, а может быть, и до миллиона записей. Если вы не верите в существование такого компонента — изучите демо, расположенное ниже:
Как это работает
Webix DataTable использует принцип «ленивой стратегии отрисовки», т.е. отрисовывает только видимые элементы. В результате, даже когда мы работаем с миллионом строк, в DOM находится всего пару сотен элементов. При такой стратегии, общее количество строк не имеет значения, поскольку 100 или 100 000 строк будут отображаться с одной и той же скоростью. Попутно появляются расходы на хранение больших объемов данных, но они на порядок меньше времени отрисовки, и ими можно пренебречь.
Идея отложенной отрисовки не нова, но все существующие на данный момент решения упираются в физические ограничения веб-браузеров. Скроллы (scrolls) всех браузеров имеют свой максимальный размер. Например, IE ограничивает его до 10 миллионов пикселей, что равно 500 000 строкам. IE будет игнорировать любой набор данных, который превысит этот размер. DataTable же отрисовывает данные и скроллы по отдельности — это позволяет преодолеть ограничение браузеров.
Нет необходимости обращаться к API компонента или настраивать ваш код каким-то особым образом. В DataTable данная функциональность встроена по умолчанию.
Поддержка Тач Устройств
Еще более высокие требования предъявляются к скорости отрисовки для планшетов и смартфонов, так как железо у них послабее.
При работе с обычным HTML, проблемы со скоростью загрузки возникают даже, когда в таблице всего 1000 рядов. Когда мы используем Webix Datable, мы не ограничены размером набора данных.Стратегия отложенной отрисовки позволяет нам не волноваться по этому поводу. Правда, за это приходится платить визуальной плавностью отрисовки (мобильные браузеры не позволяют полноценно обрабатывать события прокрутки).
Если вы захотите восстановить плавность прокрутки, вы можете переключить DataTable в классический режим отрисовки. К сожалению, в этом режиме Webix grid теряет способность загружать большие объемы данных.
Скорость Отрисовки
Поскольку реальные цифры на вашем устройстве зависят от производительности ПК, они могут отличаться от вышеуказанных. Однако относительные величины будут такими же. Как вы могли заметить современные смартфоны и планшеты работают с той же скоростью, что и десктопные браузеры.
Динамическая Загрузка
Пример в начале этой статьи генерирует данные на лету. В реальном приложении необходимо загружать данные с сервера. Нужно отметить, что загрузка миллиона рядов данных — это довольно большая нагрузка даже для скоростного соединения (1 миллион строк с пятью полями, каждое из которых весит 10 битов – получается 50 Мб данных!).
DataTable предлагает использовать динамическую загрузку. Браузер на стороне клиента загружает только те ряды, которые необходимо показать на данный момент. Во время прокрутки грида новые запросы отправляются на сервер, и после этого дополнительные данные загружаются и отображаются. На самом деле, DataTable использует еще более продвинутую стратегию. DataTable учитывает направление,в котором просматривается грид, и может подгружать дополнительные данные, чтобы обеспечить плавный просмотр. Такой функционал позволяет вам не волноваться о технических деталях.
Пример динамической загрузки.
Альтернативные Пути Загрузки Больших Объемов Данных
То, что DataTable способен отображать миллионы строк, вовсе не значит, что это единственный способ работы с большими объемами данных в реальных приложениях. Возможно, есть смысл пожалеть пользователя и предоставить ему только те данные, которые нужны для решения текущих задач. Еще один вариант – это использовать переключение страниц, которое более удобно для навигации по большим объемам данных.
Но в любом случае, если вы работаете с Webix DataTable, вы можете быть уверенным, что ваше приложение не будет тормозить при любых объемах данных.
