Как уменьшить время загрузки предметов внутри выпадающего

Question

Я пытаюсь загрузить 100 000 элементов в раскрывающийся список по событию нажатия кнопки. но это слишком медленно, чтобы загрузить. как сократить время загрузки предметов?

Петля для продукта

    for (int i = 0; i < 100000; i++) {
        out.print("<option>Product" + i + "</option>");
    }

Ajax

    <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>

Answer 1

Раскрывающееся меню, содержащее 100 000 элементов, не очень удобно для пользователя. Я рекомендую вместо этого предоставить typeahead функциональность.

Вместо того, чтобы извлекать все содержимое за один раз, создайте API поиска, который бы фильтровал результаты. Ваш пользовательский интерфейс должен давать пользователю возможность выполнять поиск (частичное или точное совпадение по вашему усмотрению) и при поиске показывать релевантные результаты поиска для пользователя на выбор в виде раскрывающегося списка.

Единственный способ оптимизировать этот сценарий «загрузить все» - это выполнить инкрементную загрузку. Ваш API / метод поставщика данных должен предоставлять вам куски меньшего размера (скажем, 500), и при каждом успешном запросе вы можете добавлять данные в выпадающее меню. Таким образом, рендеринг не блокируется, пока не будут заполнены все параметры.