Там есть игра со значительным количеством предметов. У меня есть веб-сайт с браузером для этой игры.

Там есть поле поиска. Если поле поиска пустое, все элементы нарисованы, что означает пару сотен div с фонами (я использую спрайты CSS для изображений). Скриншот для лучшей справки: введите описание изображения здесь В настоящее время каждое изображение элемента представляет собой div элемент, обернутый в компонент ItemIcon , и он монтируется и отключается по мере изменения массива имен элементов, которые нужно нарисовать.

Вопрос :

  • Всякий раз, когда поле поиска очищается (т. Е. Все элементы отображаются), веб-сайт зависает на заметную долю секунды.

Производительность, измеренная Chrome Devtools: введите описание изображения здесь Большую часть занимают сотни {amp}lt;ItemIcon/{amp}gt; .

Что я мог поделать? Я думаю, что установка значков для display:none не будет намного более производительным, чем их установка / размонтирование. Есть ли что-то, способствующее такому подходу?