Производительность JavaScript при добавлении большого количества дочерних элементов к большому количеству элементов

Question

У меня есть много выбранных входов на странице (96 или 384).Каждый из них имеет обширный список опций - почти 1000. В результате размер страницы составляет 4-8 МБ (сжатые 1-4 МБ).Я решил сделать так, чтобы страница загружалась быстрее, добавив список параметров только один раз, а затем добавив его к каждому входу с помощью JavaScript.

К сожалению, браузеру требуется много времени для завершения задачи (~ 3 минуты на FF 10) или зависает (Chrome 17).Я пытался выполнить задачу с помощью jQuery и чистого JS.Нет никакой разницы.

Является ли задача выполнимой?Что я должен знать, чтобы писать быстрый и эффективный JavaScript?

Редактировать: я помещаю все опции в одну строку и использую innerHTML, чтобы поместить ее в выбранный вход.Спасибо за такой быстрый ответ.

Edit2: я генерирую элементы способом, предложенным Диодеусом.Тем не менее, я загружаю опции, когда элемент select находится в фокусе (спасибо rlemon).Я считаю, что все ответы очень полезны и могут быть полезны для тех, у кого есть подобные проблемы.Спасибо вам всем.

Answer 1

Создайте свой HTML как строку или отдельный объект и вставьте все это в эту страницу за один раз.Перезапись DOM выполняется медленно, поскольку повторные потоки документов должны рассчитываться для каждой вставки.

Answer 2

Быстрее загружать все по умолчанию в HTML, чем использовать JS для добавления тысяч элементов.

Ваш сервер дает вам гарантию качества / скорости, которую компьютер пользователя не будет.

Answer 3

Я бы предложил вам использовать ajax. Замените стандартный выбор ввода на сторонний комбинированный список E.g: Jquery UI Combobox. Сначала вы загружаете все пустые выпадающие списки. Это элементы будут загружены, как только нажмите, чтобы открыть раскрывающийся список.

Вы можете сделать это довольно просто с помощью jquery и jquery UI.

Answer 4

Зачем вам нужно добавлять детей отдельно?Просто оберните весь список с параметрами в другом элементе и добавьте тот.Это должно быть намного быстрее, поскольку это будет всего одна операция вместо 1000.