Недавно я столкнулся с задачей, известной как one billion row challenge. Два аспекта этого вызова меня заинтриговали:
Каковы будут последствия, если я попробую решить этот вызов на фронтенде?
Удастся ли мне это?
Хотя я не уверен в возможности визуализировать миллиард строк в таблице, цифра в миллион кажется вполне достижимой. Узнав о таком интересном вызове, я решил заняться маленьким проектом, целью которого было отображение миллиона строк в React.
Давайте я вас подробно ознакомлю с тем, что именно произошло, как это было сделано и по каким причинам.
Рекомендация
Для более глубокого понимания статьи, я рекомендую вам изучить следующие темы:
Элемент Canvas и его API
Контекст рендера
Основы рисования на холсте
Что мы делаем?
Мы предпримем попытку разработать компонент, способный эффективно визуализировать миллион строк в ReactJS. Для этой цели мы воспользуемся рядом методов, схожих с теми, что используются в таких продуктах, как Google Sheets и Glide Data Grid.
Почему мы это делаем?
Как я уже упоминал в начале, есть веские причины для рассмотрения этой темы.
Возможно, многие из вас сталкивались с необходимостью виртуализации данных, чтобы отображались только текущие видимые строки. Это общепринятый подход при управлении большими объемами данных.
Тем не менее, эффективность такого метода может снижаться при больших размерах области просмотра, например, когда требуется одновременно просматривать от 150 до 250 строк. В результате алгоритм виртуализации должен:
Удалять все DOM-элементы в области видимости.
Добавлять новый набор из 150+ DOM-элементов.
Этот процесс может существенно снизить скорость и плавность прокрутки, ухудшая тем самым пользовательский опыт.
Кроме того, я изучил другие инструменты и библиотеки, такие как:
Google Sheets
Glide Data Grid
Они эффективно справляются с задачей отображения миллиона строк.
Теперь, когда мы понимаем причины, давайте рассмотрим нестандартный подход к решению этой распространенной проблемы.
Интересные статьи
Интересные статьи
