Как эффективно оптимизировать большой объем данных во фронтенде
Оптимизация производительности является ключевым аспектом разработки веб-приложений, особенно когда речь идет о работе с большими объемами данных. Именно такая задача была поставлена перед фронтенд-разработчиками IT Test. Рассказываем, как оптимизировать код и найти баланс между производительностью и читаемостью.
862 открытий11К показов
Фронтенд-разработчик IT Test Марина Дударь оптимизировала код и нашла баланс между производительностью и читаемостью.
По ТЗ мы имели следующие вводные: использовать компонент tree-table от PrimeNG, количество получаемых папок – не ограничено, уровень вложенности папок – не ограничен, количество элементов в папке – не ограничено, элемент навигации по страницам – удалить.
Когда приступать к оптимизации кода
Оптимизация кода – это важный этап в процессе разработки программного обеспечения, но его не следует проводить слишком рано. Преждевременная оптимизация может быть неэффективной и даже вредной.
«Преждевременная оптимизация – корень всех зол»
Оптимизировать код следует в следующих случаях:
- После написания и тестирования основной функциональности. Убедитесь, что приложение работает корректно и выполняет все необходимые функции. Оптимизация должна быть второстепенной по сравнению с функциональностью и надежностью.
- Если ваше приложение работает медленно или использует слишком много ресурсов, это может быть признаком того, что пора приступить к оптимизации.
- Если вы планируется значительно увеличить объем данных или количество пользователей, которые будет обрабатывать ваше приложение, оптимизация может помочь обеспечить гладкое масштабирование.
- Перед тем как выпустить приложение в продакшн, важно провести оптимизацию, чтобы убедиться, что оно работает максимально эффективно.
В нашем случаем актуален третий пункт, поэтому оптимизация оправдана. Теперь будем искать решение.
Инструменты для выявления точек оптимизации и проведения оптимизации
Для выявления точек оптимизации и проведения оптимизации кода в Angular можно использовать следующие инструменты:
- Инструменты разработчика Chrome (Chrome DevTools). Вкладка Performance позволяет профилировать производительность вашего приложения и выявить узкие места. Вкладка Memory помогает отслеживать утечки памяти и оптимизировать использование памяти.
- Angular Augury. Это расширение для Chrome и Firefox, разработанное специально для отладки и профилирования Angular-приложений. Оно позволяет визуализировать структуру зависимостей, исследовать свойства и состояние компонентов, а также анализировать производительность.
- Lighthouse. Этот инструмент от Google можно использовать для анализа производительности веб-приложений. Он запускается прямо из Chrome DevTools и предоставляет подробный отчет о производительности приложения, включая советы по оптимизации.
- TSLint и ESLint. Это инструменты для статического анализа кода, которые могут помочь выявить проблемы в вашем коде, замедляющие его выполнение или приводящие к ошибкам. Они могут быть интегрированы в вашу IDE и предоставляют подсказки и предупреждения прямо во время написания кода.
Способы оптимизации кода
Для оптимизации загрузки большого количества данных возможно использование следующих подходов:
- Lazy Loading. Lazy Loading позволяет загружать данные по мере необходимости, а не все сразу. Это может значительно улучшить производительность при работе с большими объемами данных. В PrimeNG вы можете включить lazy loading, установив свойство `lazy` в `true` и обрабатывая событие `onLazyLoad`.
- Pagination. Пагинация – это еще один способ управления большими объемами данных. Вместо загрузки всех данных сразу, можно загружать и отображать только небольшое подмножество данных за один раз.
- 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`. При этом нужно обработать это событие и загрузить необходимые данные.
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 – надеемся, вам пригодится наш опыт.
862 открытий11К показов