Дело

Однажды на проекте у меня была интересная задача. Для создания анимированных точек на карте. Объекты точек поступали в массив JSON со смешанными типами свойств. Таким образом, обработка этих точек была довольно громоздкой и очень сложной в обслуживании из-за стадии MVP. Производительность имела решающее значение, потому что таких точек одновременно на экране могло быть до тысячи. Итак, сцена была готова.

Идея

Потому что у меня была возможность изменить оба мира. Я придумал способ объединить логические и строковые свойства в перечисление с флагами. Эти флаги были в основном теми же самыми смешанными свойствами, в основе которых лежала бизнес-логика для отображения или скрытия определенных атрибутов. Итак, я погрузился прямо в код.

Шаги

Сначала я пошел в Backend. Там я преобразовал все эти смешанные свойства во флаги перечисления. После этого я переключился на Frontend и переделал туда же логику. Затем, перебирая эти флаги перечисления, код генерировал соответствующие элементы HTML. Эти элементы хранились в памяти в массиве с индексом, который соответствовал всем комбинациям флагов перечисления. Затем, как только API выдал этот массив точек, зациклившись на них и глубоко клонировав этот HTML из массива, он был почти мгновенным. Теперь, объединив все эти сгенерированные элементы с некоторой магией CSS, я получил красивую циклическую анимацию сияния.

https://stackblitz.com/edit/bitwise-html-массив

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

https://stackblitz.com/edit/bitwise-html-array-combination

Вынос

Флаги и побитовые операции над ними широко используются на низком уровне таких фреймворков, как Angular и React. У JavaScript есть нативная склонность хорошо работать с BO, и он невероятно быстр.

Создание элементов JavaScript происходит довольно медленно по сравнению с клонированием элементов. Поэтому хранение предварительно созданных элементов в массиве еще больше расширило эту концепцию.

Я думаю, что эту концепцию также можно комбинировать с компонентами React и Angular. Для создания частей приложения, которым необходимо очень быстро отображать некоторые атрибуты.

Пусть клопы обходят вас стороной,
Евгений.