J'essaie de créer une liste de sélection html avec 10 000 options. En raison du nombre, j'ai besoin qu'il soit le plus efficace possible. Je l'ai fait fonctionner, mais je pense que c'est assez inefficace
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);
}
J'ai lu que trop interroger le DOM peut être coûteux. Existe-t-il un moyen plus simple de procéder?
3 réponses
J'examinerais cette question sous un autre angle. En tant qu'utilisateur, je peux probablement tolérer même deux secondes de génération de cette liste (très probablement cela prendra moins de 2 secondes même sur un mauvais téléphone), mais me forçant à sélectionner un élément dans une liste déroulante de 10k éléments - ce est une exagération .
J'abandonnerais complètement une "création d'une option" et étudierais une meilleure approche (du point de vue de l'interface utilisateur). Quelque chose comme une sélection de la saisie semi-automatique (ce n'est qu'un exemple).
P.S. Si vous voulez vraiment que vos utilisateurs souffrent en faisant défiler 10k éléments, je vous suggère de retirer cette partie select.appendChild(option); de la boucle. Générez tout ce que vous souhaitez ajouter et ajoutez-les en même temps.
Veuillez utiliser innerHTML, si vous voulez de hautes performances
Je vous donne un jsperf ci-dessous:
http://jsperf.com/js-appendchild/3
Vous pouvez utiliser le Option constructeur:
Un constructeur est fourni pour créer
HTMLOptionElementobjets (en plus des méthodes d'usine de DOM telles quecreateElement()):Option(text, value, defaultSelected, selected)Lorsqu'il est appelé en tant que constructeur, il doit renvoyer un nouveau
HTMLOptionElementobjet (un nouveloptionélément).Si le premier argument n'est pas la chaîne vide, le nouvel objet doit avoir comme unique enfant un
Textnœud dont les données sont la valeur de cet argument. Sinon, il ne doit pas avoir d'enfants.Si l'argument
valueest présent, le nouvel objet doit avoir unvalueensemble d'attributs avec la valeur de l'argument comme sa valeur.Si l'argument
defaultSelectedest vrai, le nouveau l'objet doit avoir unselectedensemble d'attributs sans valeur.Si l'argument
selectedest vrai, le nouvel objet doit avoir sa selectedness définie sur true; sinon le selectedness doit être défini sur false, même si le paramètre L'argumentdefaultSelectedest vrai.
Dans ton cas,
select.appendChild(new Option("option" + i));