Bootstrap-multiselect очень медленный с большим количеством вариантов
В моем заявлении я прошу клиента заполнить небольшую форму, где одно из полей просит его выбрать 3 из своих любимых городов (или городов, которые они посетили).
Мой список городов на выбор довольно большой (3 тыс. Городов), и я решил использовать bootstrap-multiselect с поиском. Однако bootstrap-multiselect довольно медленный с таким количеством опций.
Моя самая большая жалоба - время загрузки страницы. Ниже приведена демонстрация с 30 опциями, подождите, пока она загрузится, а затем запустите ее, вы увидите, что она супер быстрая.
http://www.bootply.com/07KLihND2q
Теперь в демонстрации ниже есть варианты 3K, подождите, пока она загрузится, и запустите ее. Мультивыбор займет не менее 3 секунд, чтобы принять желаемую форму!
http://www.bootply.com/wK8zFCjB2D
Есть ли способ ускорить процесс и / или заменить bootstap-multiselect другим компонентом, который удовлетворит мои потребности?
Я ищу что-то, что позволит пользователям быстро находить свои любимые города (например, с помощью текстового поиска), будет компактным (может вписываться в форму вместо открытия нового окна) и ограничит пользователя одним из варианты 3К у меня есть. Возможность заполнять элемент из JSON с помощью js-populate - большой бонус.
Спасибо!
2 ответа
У нас была точно такая же проблема, но мы действительно хотели сохранить компонент, так как это очень удобно.
Нашим решением было визуализировать компонент без параметров, а затем использовать setTimeout для загрузки параметров ПОСЛЕ отображения страницы. Это остановило рендеринг опций от удержания всей страницы.
На самом деле это не так быстро, но пользователю это кажется быстрее. Они могут начать читать страницу и выяснить, что происходит, пока вы отображаете параметры в фоновом режиме.
Я бы сказал, что компонент не подходит для такого большого списка опций и не является лучшим UX. Вам лучше использовать что-то вроде Typeahead https://twitter.github.io/typeahead.js/examples/
Хотя это, очевидно, не вариант для всех, мы столкнулись с тем же и решили отказаться от решения Bootstrap в пользу React Virtualized Select. Он прекрасно обрабатывает огромные списки.