Как эффективно оптимизировать большой объем данных во фронтенде

Фронтенд-разработчик IT Test Марина Дударь оптимизировала код и нашла баланс между производительностью и читаемостью.

По ТЗ мы имели следующие вводные: использовать компонент tree-table от PrimeNG, количество получаемых папок – не ограничено, уровень вложенности папок – не ограничен, количество элементов в папке – не ограничено, элемент навигации по страницам – удалить.

Когда приступать к оптимизации кода

Оптимизация кода – это важный этап в процессе разработки программного обеспечения, но его не следует проводить слишком рано. Преждевременная оптимизация может быть неэффективной и даже вредной.

«Преждевременная оптимизация – корень всех зол»

Дональд КутАвтор книги «Искусство программирования» и концепции грамотного программирования

Оптимизировать код следует в следующих случаях:

1. После написания и тестирования основной функциональности. Убедитесь, что приложение работает корректно и выполняет все необходимые функции. Оптимизация должна быть второстепенной по сравнению с функциональностью и надежностью.
2. Если ваше приложение работает медленно или использует слишком много ресурсов, это может быть признаком того, что пора приступить к оптимизации. 
3. Если вы планируется значительно увеличить объем данных или количество пользователей, которые будет обрабатывать ваше приложение, оптимизация может помочь обеспечить гладкое масштабирование.
4. Перед тем как выпустить приложение в продакшн, важно провести оптимизацию, чтобы убедиться, что оно работает максимально эффективно.

В нашем случаем актуален третий пункт, поэтому оптимизация оправдана. Теперь будем искать решение.

Инструменты для выявления точек оптимизации и проведения оптимизации

Для выявления точек оптимизации и проведения оптимизации кода в Angular можно использовать следующие инструменты:

1. Инструменты разработчика Chrome (Chrome DevTools). Вкладка Performance позволяет профилировать производительность вашего приложения и выявить узкие места. Вкладка Memory помогает отслеживать утечки памяти и оптимизировать использование памяти.
2. Angular Augury. Это расширение для Chrome и Firefox, разработанное специально для отладки и профилирования Angular-приложений. Оно позволяет визуализировать структуру зависимостей, исследовать свойства и состояние компонентов, а также анализировать производительность.
3. Lighthouse. Этот инструмент от Google можно использовать для анализа производительности веб-приложений. Он запускается прямо из Chrome DevTools и предоставляет подробный отчет о производительности приложения, включая советы по оптимизации.
4. TSLint и ESLint. Это инструменты для статического анализа кода, которые могут помочь выявить проблемы в вашем коде, замедляющие его выполнение или приводящие к ошибкам. Они могут быть интегрированы в вашу IDE и предоставляют подсказки и предупреждения прямо во время написания кода.

Способы оптимизации кода

Для оптимизации загрузки большого количества данных возможно использование следующих подходов:

1. Lazy Loading. Lazy Loading позволяет загружать данные по мере необходимости, а не все сразу. Это может значительно улучшить производительность при работе с большими объемами данных. В PrimeNG вы можете включить lazy loading, установив свойство `lazy` в `true` и обрабатывая событие `onLazyLoad`.
2. Pagination. Пагинация – это еще один способ управления большими объемами данных. Вместо загрузки всех данных сразу, можно загружать и отображать только небольшое подмножество данных за один раз.
3. Virtual Scrolling. Виртуальная прокрутка – это техника, при которой отображаются только видимые строки. При прокрутке старые строки удаляются, а новые добавляются. Это может значительно улучшить производительность при работе с большими объемами данных.

Мы от пагинации отказались сразу – ТЗ нам запретило выбор страниц пользователем. Виртуальный скролл – очень близко к пагинации, но поиски скролла для деревьев успехом не увенчались. А вот Lazy Loading – идеальное решение. Он предусмотрен из коробки самой библиотеки primeNG для компонента tree-table.

Как применять Lazy Loading

Lazy Loading в PrimeNG позволяет загружать данные по мере их необходимости, а не все сразу. Это особенно полезно при работе с большими объемами данных, поскольку может значительно улучшить производительность приложения.

Вот как это работает:

1. Установка свойства `lazy`

Для включения lazy loading в компоненте tree-table PrimeNG необходимо установить свойство `lazy` в `true`.

2. Обработка события `onLazyLoad`

Когда пользователь выполняет действие, которое требует загрузки данных, например, раскрывает узел дерева или переходит на другую страницу, компонент tree-table генерирует событие `onLazyLoad`. При этом нужно обработать это событие и загрузить необходимые данные.

			loadNodes(event: any) {
  // Ваш код для загрузки данных
  // event.first - индекс первого элемента
  // event.rows - количество строк для загрузки
}
		

3. Загрузка данных

В обработчике события `onLazyLoad` следует загрузить данные, которые требуются для текущего действия пользователя. Обычно это включает отправку запроса на сервер с параметрами, такими как индекс первого элемента и количество строк для загрузки.

4. Обновление модели данных

После загрузки данных необходимо обновить модель данных в компоненте, чтобы отобразить новые данные.

Важно: Lazy Loading требует поддержки со стороны сервера. Сервер должен быть способен обрабатывать запросы на частичную загрузку данных, а не возвращать все данные сразу.

Метод `showMore(rowData)`

Для того чтобы сократить количество данных, передаваемых для выбранной папки, мы разбили их на части. Затем добавили кнопку `Show more`, связанную с методом `showMore(rowData)`, который вызывается при нажатии на кнопку.

Этот метод работает следующим образом:

1. Сначала метод получает `id` папки, из которой нужно загрузить больше элементов. Это `id` берется из `rowData`, который передается в метод `showMore(rowData)` при нажатии на кнопку.

2. Затем метод вызывает сервис `getMoreItems` из `CommonTreeTableService`, передавая в него ` идентификатор пространства, из которого загружаются элементы. `folderId` – это идентификатор папки, из которой загружаются элементы. `offset` – это номер элемента, с которого начинается загрузка. `conditions` – это условия, которые могут влиять на загрузку элементов (например, фильтры или сортировка).

3. Сервис `getMoreItems` делает HTTP GET запрос к серверу, используя указанные параметры, и возвращает ответ сервера. Этот ответ содержит дополнительные элементы, которые нужно добавить в таблицу.

4. Когда ответ от сервера получен, метод `showMore(rowData)` добавляет полученные элементы в таблицу. Это делается путем вызова метода `addChildrenToFolder`, который добавляет новые элементы в нужную папку в таблице.

5. В конце, после того как все новые элементы добавлены в таблицу, метод `showMore(rowData)` обновляет таблицу, вызывая `this.tableData$.next([…tableTree])`. Это заставляет таблицу перерисоваться с новыми элементами.

Что предпринять для оптимизации когда

Оптимизация кода – это процесс улучшения кода, когда он становится более эффективным без изменения вывода или функциональности. Вот что для этого можно предпринять.

• Профилирование кода

Прежде чем начинать оптимизацию, важно понять, какие части кода занимают больше всего времени или ресурсов. Это можно сделать с помощью инструментов профилирования кода.

• Устранение ненужного кода

Удаление неиспользуемого или ненужного кода может улучшить производительность и упростить чтение и поддержку кода.

• Оптимизация циклов

Циклы могут быть основным источником замедления в программе. Оптимизация циклов может включать в себя уменьшение количества итераций, замену рекурсии на итерацию или перемещение вычислений из цикла, если они не изменяются на каждой итерации.

• Использование эффективных структур данных и алгоритмов

Правильный выбор структур данных и алгоритмов может существенно улучшить производительность кода.

• Минимизация обращений к базе данных

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

• Параллелизация кода

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

Оптимизация кода помогает улучшить производительность программы, а это, в свою очередь, приводит к более быстрому времени выполнения, меньшему использованию ресурсов и лучшему пользовательскому опыту. При этом оптимизация может сделать код сложнее для понимания и поддержки, поэтому важно понимать, когда именно, как и для чего приступать к оптимизации кода. В этой статье мы рассказали, как справлялись с задачей при работе с одним из проектов IT Test – надеемся, вам пригодится наш опыт.