Quel est le moyen le plus efficace de créer des éléments HTML avec jQuery?
Récemment, j'ai fait beaucoup de fenêtres contextuelles modales et autres, pour lesquelles j'ai utilisé jQuery. La méthode que j'ai utilisée pour créer les nouveaux éléments sur la page a été essentiellement la suivante:
$("<div></div>");
Cependant, j'ai le sentiment que ce n'est ni la meilleure ni la plus efficace des méthodes. Quel est le meilleur moyen de créer des éléments dans jQuery du point de vue des performances?
Cette réponse a les repères aux suggestions ci-dessous.
J'utilise $(document.createElement('div'));Benchmarking montre cette technique est la plus rapide. Je suppose que c'est parce que jQuery n'a pas à l'identifier en tant qu'élément et à créer l'élément lui-même.
Vous devriez vraiment lancer des tests avec différents moteurs Javascript et peser votre audience avec les résultats. Prendre une décision à partir de là.
personnellement, je suggérerais (pour la lisibilité):
$('<div>');
quelques chiffres sur les suggestions faites jusqu'à présent (safari 3.2.1/mac os x):
var it = 50000;
var start = new Date().getTime();
for (i = 0; i < it; ++i) {
// test creation of an element
// see below statements
}
var end = new Date().getTime();
alert( end - start );
var e = $( document.createElement('div') ); // ~300ms
var e = $('<div>'); // ~3100ms
var e = $('<div></div>'); // ~3200ms
var e = $('<div/>'); // ~3500ms
Question:
Quel est le moyen le plus efficace de créer des éléments HTML avec jQuery?
Répondre:
Puisqu'il s'agit de jQuery alors je pense qu'il est préférable d'utiliser cette approche (propre) (vous utilisez)
$('<div/>', {
'id':'myDiv',
'class':'myClass',
'text':'Text Only',
}).on('click', function(){
alert(this.id); // myDiv
}).appendTo('body');
De cette façon, vous pouvez même utiliser des gestionnaires d’événements pour un élément spécifique comme
$('<div/>', {
'id':'myDiv',
'class':'myClass',
'style':'cursor:pointer;font-weight:bold;',
'html':'<span>For HTML</span>',
'click':function(){ alert(this.id) },
'mouseenter':function(){ $(this).css('color', 'red'); },
'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');
Toutefois, lorsque vous utilisez de nombreux éléments dynamiques, évitez d’ajouter l’événement handlers à un élément en particulier, mais utilisez plutôt un gestionnaire d’événements délégué, tel que
$(document).on('click', '.myClass', function(){
alert(this.innerHTML);
});
var i=1;
for(;i<=200;i++){
$('<div/>', {
'class':'myClass',
'html':'<span>Element'+i+'</span>'
}).appendTo('body');
}
Ainsi, si vous créez et ajoutez des centaines d’éléments de même classe, c’est-à-dire (myClass), la mémoire utilisée pour la gestion des événements est réduite, car un seul gestionnaire sera présent pour effectuer le travail pour tous les éléments insérés dynamiquement.
Mise à jour: Puisque nous pouvons utiliser l'approche suivante pour créer un élément dynamique
$('<input/>', {
'type': 'Text',
'value':'Some Text',
'size': '30'
}).appendTo("body");
Mais l'attribut size ne peut pas être défini avec cette approche en utilisant jQuery-1.8.0 ou une version ultérieure et voici un ancien rapport de bogue , regardez cet exemple en utilisant jQuery-1.7.2 qui montre que l'attribut size est défini sur 30 en utilisant l'exemple ci-dessus, mais en utilisant la même approche, nous ne pouvons pas définir l'attribut size en utilisant jQuery-1.8.3, voici un violon qui ne travaille pas . Donc, pour définir l'attribut size, nous pouvons utiliser l'approche suivante
$('<input/>', {
'type': 'Text',
'value':'Some Text',
attr: { size: "30" }
}).appendTo("body");
Ou celui-ci
$('<input/>', {
'type': 'Text',
'value':'Some Text',
prop: { size: "30" }
}).appendTo("body");
Nous pouvons passer attr/prop en tant qu’objet enfant, mais cela fonctionne dans jQuery-1.8.0 and later versions check cet exemple mais cela ne fonctionnera pas dans jQuery-1.7.2 or earlier (non testé dans toutes les versions précédentes).
BTW, extrait de jQuery rapport de bogue
Il y a plusieurs solutions. La première consiste à ne pas l'utiliser du tout, car cela ne vous fait pas gagner de place et cela améliore la clarté du code:
Ils ont conseillé d'utiliser l'approche suivante ( fonctionne dans les précédentes également, testé dans 1.6.4)
$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");
Donc, il vaut mieux utiliser cette approche, IMO. Cette mise à jour est faite après que j'ai lu/trouvé cette réponse et que cette réponse montre que si vous utilisez 'Size'(capital S) au lieu de 'size', il ne fera que fonctionne correctement , même dans version-2.0.2
$('<input>', {
'type' : 'text',
'Size' : '50', // size won't work
'autofocus' : 'true'
}).appendTo('body');
Lisez également à propos de prop , car il y a une différence, Attributes vs. Properties, elle varie selon les versions.
En fait, si vous faites $('<div>'), jQuery utilisera également document.createElement().
(Il suffit de regarder ligne 117 ).
Il existe un surcoût d'appel de fonction, mais à moins que les performances ne soient critiques (vous créez des centaines [de milliers] d'éléments), il n'y a pas beaucoup de raisons de revenir en clair DOM.
La création d'éléments pour une nouvelle page Web est probablement un cas dans lequel vous ferez mieux de vous en tenir à la manière de jQuery .
Ce n'est pas la bonne réponse à la question, mais j'aimerais quand même partager ceci ...
Utiliser uniquement document.createElement('div') et ignorer JQuery améliorera considérablement les performances lorsque vous souhaitez créer de nombreux éléments à la volée et les ajouter à DOM.
Si vous avez beaucoup de contenu HTML (plus qu'une seule div), vous pouvez envisager de créer le code HTML dans la page dans un conteneur masqué, puis de le mettre à jour et de le rendre visible en cas de besoin. De cette façon, une grande partie de votre balisage peut être pré-analysée par le navigateur et vous éviter d’être embourbé par JavaScript lorsqu’il est appelé. J'espère que cela t'aides!
Je pense que vous utilisez la meilleure méthode, bien que vous puissiez l’optimiser pour:
$("<div/>");
Vous n'avez pas besoin des performances brutes d'une opération que vous effectuerez extrêmement rarement du point de vue du processeur.
Vous devrez comprendre que l'importance des performances de création d'élément n'est pas pertinente dans le contexte de l'utilisation de jQuery en premier lieu.
Gardez à l'esprit que la création d'un élément n'est pas vraiment utile, à moins que vous ne l'utilisiez réellement.
Vous serez peut-être tenté de tester quelque chose du type performances telles que $(document.createElement('div')) par rapport à $('<div>') et d'obtenir des gains de performances considérables en utilisant $(document.createElement('div')), mais il s'agit simplement d'un élément qui ne figure pas encore dans le DOM.
Cependant, à la fin de la journée, vous voudrez quand même utiliser l'élément, le vrai test devrait donc inclure f.ex. .ajouter à();
Voyons si vous testez les éléments suivants:
var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');
Vous remarquerez que les résultats varieront. Parfois, un moyen est plus performant que l’autre. Et ceci uniquement parce que la quantité de tâches en arrière-plan de votre ordinateur change avec le temps.
Donc, en fin de compte, vous voulez choisir le moyen le plus simple et le plus lisible de créer un élément. De cette façon, au moins, vos fichiers de script seront les plus petits possibles. Probablement un facteur plus important sur le point de performance que la manière de créer un élément avant de l’utiliser dans le DOM.
Quelqu'un a déjà fait un repère: équivalent de document.createElement de jQuery?
$(document.createElement('div')) est le grand gagnant.
Un point est qu'il peut être plus facile à faire:
$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")
Ensuite, faire tout cela avec des appels jQuery.
J'utilise jquery.min v2.0.3. C'est pour moi qu'il vaut mieux utiliser ce qui suit:
var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);
comme suit:
var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);
Le temps de traitement du premier code est nettement inférieur au second.