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
HTMLOptionElement
objets (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
HTMLOptionElement
objet (un nouveloption
élément).Si le premier argument n'est pas la chaîne vide, le nouvel objet doit avoir comme unique enfant un
Text
nœud dont les données sont la valeur de cet argument. Sinon, il ne doit pas avoir d'enfants.Si l'argument
value
est présent, le nouvel objet doit avoir unvalue
ensemble d'attributs avec la valeur de l'argument comme sa valeur.Si l'argument
defaultSelected
est vrai, le nouveau l'objet doit avoir unselected
ensemble d'attributs sans valeur.Si l'argument
selected
est 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'argumentdefaultSelected
est vrai.
Dans ton cas,
select.appendChild(new Option("option" + i));
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.