@Strax77

Как оптимизировать добавление в dom большого кол-ва элементов?

здравствуйте.
пишу небольшую аппку с использованием electron.

нужно сделать отображение всех шрифтов на компьютере у пользователя.

есть функция, возвращающая массив где-то из 400 элементов с содержанием вида:
{ path: '/Library/Fonts/Arial.ttf',
    postscriptName: 'ArialMT',
    family: 'Arial',
    weight: 400,
}


собственно, есть список select под это дело.
новые элементы option создаются как-то так:
function $createFontOption(font) {
let option = document.createElement('option');
option.value = font.path;
option.textContent = font.postscriptName;
option.style.fontFamily = font.family;
option.style.fontWeight = font.weight;
return option;
}

таким образом, создаю элемент select, добавляю много таких option в него и вставляю все это дело в dom.
все бы хорошо, но приложение ни на что не реагирует в течении нескольких секунд после запуска, ожидая загрузки этакого чудовища.
пробовал добавлять каждый option в dom по отдельности, но разницы не увидел.
можно ли как-то подобную операцию заставить выполняться асинхронно, не блокируя программу?
  • Вопрос задан
  • 240 просмотров
Решения вопроса 1
@codemafia
Самоотвод
Для решения этой задачи существует Virtual DOM. Если не хотите использовать большую готовую библиотеку типа Vuejs, возьмите preact. Если не ошибаюсь, в нём реализована асинхронная обработка изменений с использованием промисов.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@vashaaa
Юх с горы
Как вариант можно закинуть в селект первых 50, потом при скроле добавлять ещё по 30-40.
Ответ написан
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы