Как уменьшить время загрузки элементов в раскрывающемся списке
Я пытаюсь загрузить 100 000 элементов в раскрывающийся список при нажатии кнопки. но он слишком медленный для загрузки. как сократить время загрузки предметов?
Цикл для продукта
for (int i = 0; i < 100000; i++) {
out.print("<option>Product" + i + "</option>");
}
Аякс
<script>
function getproduct() {
var output;
var xhtp = new XMLHttpRequest();
xhtp.onreadystatechange = function () {
if (xhtp.readyState === 4 && xhtp.status === 200)
output = output +xhtp.responseText;
}
}
document.getElementById("product").innerHTML = output;
}
xhtp.open("post", "ProductController", true);
xhtp.send();
}
</script>
Ответы 1
Выпадающее меню, содержащее 100 000 элементов, не очень удобно для пользователей. Я рекомендую вам вместо этого предоставить функциональность наперед.
Вместо того, чтобы получать весь контент за один раз, создайте API поиска, который будет фильтровать результаты. Ваш пользовательский интерфейс должен давать пользователю возможность выполнять поиск (частичное совпадение или точное совпадение, как вы предпочитаете), а при поиске показывать релевантные результаты поиска для выбора пользователем в виде раскрывающегося списка.
Единственный способ оптимизировать этот сценарий «загрузить все» - это выполнить инкрементную загрузку. Ваш API / метод поставщика данных должен предоставлять вам данные кусками меньшего размера (скажем, 500), и с каждым успешным запросом вы можете добавлять данные в раскрывающееся меню. Таким образом, рендеринг не блокируется, пока не будут заполнены все параметры.
Да, это правда. но мне нужна логика для этого. @arjunlal
Я обновил ответ о том, как вы можете оптимизировать в этом случае. @ user6433464
Вам следует подумать об использовании базы данных или взглянуть на reactjs