JavaScript

Question

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?

javascript algorithm performance loops dom

0

user5680735 6 mars 2016 à 03:55

Answer 1

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.

2

Salvador Dali 6 mars 2016 à 01:14

Answer 2

Veuillez utiliser innerHTML, si vous voulez de hautes performances

Je vous donne un jsperf ci-dessous:

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

-1

zeromike 6 mars 2016 à 03:06

Answer 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 que createElement()):
Option(text, value, defaultSelected, selected)
Lorsqu'il est appelé en tant que constructeur, il doit renvoyer un nouveau HTMLOptionElement objet (un nouvel option é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 un value ensemble d'attributs avec la valeur de l'argument comme sa valeur.

Si l'argument defaultSelected est vrai, le nouveau l'objet doit avoir un selected 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'argument defaultSelected est vrai.

Dans ton cas,

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

1

Oriol 6 mars 2016 à 01:05

JavaScript - Existe-t-il un moyen plus efficace de créer des éléments d'option?

3 réponses

Questions connexes

De nouvelles questions