JavaScript - Есть ли более эффективный способ создания элементов элементов?

Question

Я пытаюсь создать список выбора html с 10 000 опциями. Из-за числа мне нужно, чтобы он был настолько эффективным, насколько это возможно. Я получил это работает, но я думаю, что это довольно неэффективный

var select = document.createElement("select"); 
document.body.appendChild(select); 

for (var i = 1; i <= 10000; i++) { 
    var option = document.createElement("option"); 
    var optionText = option.createTextNode("option" + i); 
    option.value = "option" + i; 
    option.appendChild(optionText); 
    select.appendChild(option); 
} 

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

Answer 1

Я хотел бы посмотреть на этот вопрос с другой стороны. Как пользователь, я могу, возможно, переносить даже две секунды генерации этого списка (скорее всего, это займет менее 2 секунд даже на плохом телефоне), но заставляя меня выбирать элемент из выпадающего списка из 10 тыс. Элементов - это overkill.

Я бы полностью отказался от «создания опции» и будет исследовать лучший (с точки зрения точки зрения) подход. Что-то вроде select autocomplete (это только пример).

P.S. Если вы действительно хотите, чтобы ваши пользователи пострадали, прокрутив 10k элементов, я бы предложил взять эту часть select.appendChild(option); из цикла. Создайте все, что вы хотите добавить и добавить сразу.

Answer 2

Вы можете использовать Option constructor:

Конструктор предназначен для создания HTMLOptionElement объектов (в дополнение к методам фабричных из DOM, такие как createElement()):

Option(text, value, defaultSelected, selected)

При вызове в качестве конструктор, он должен вернуть новый объект HTMLOptionElement (новый элемент option).

Если первый аргумент не пустая строка, новый объект должен иметь в качестве своего единственного ребенка в Text узел, данные которого значение , что аргумент. В противном случае у него не должно быть детей.

Если value аргумент присутствует, то новый объект должен иметь атрибут value набор со значением аргумента в качестве его значения.

Если аргумент defaultSelected верен, новый объект должен иметь атрибут selected без значения.

Если аргумент selected верен, новый объект должен иметь свой номер selectedness, равный true; в противном случае значение selectedness должно быть установлено на значение false, даже если аргумент defaultSelected является истинным.

В вашем случае,

select.appendChild(new Option("option" + i)); 

Answer 3

Пожалуйста, используйте innerHTML, если вы хотите иметь высокую производительность

Я даю вам JSPerf ниже:

http://jsperf.com/js-appendchild/3