jQuery de lisibilité par rapport à la performance

Question

Compte tenu des fragments de code jQuery qui fait la même chose:

$("<div />").css({ 
    "background-color" : "red", 
    "color" : "white", 
    "border" : "solid 1px black" }) 
    .appendTo(someElement); 

et

$("<div style='background-color:red;color:white;border:solid 1px black' />") 
    .appendTo(someElement); 

Le premier est plus lisible à mon avis, mais Y a-t-il une différence de performance entre les deux? Ou est la différence de performance si petite que la lisibilité devrait aller avant la déclaration explicite de l'étiquette?

[Edit: clarification]

L'utilisation et le style est css juste un exemple. Il pourrait également ajouter de nombreux autres attributs/valeurs.

Answer 1

Eh bien .... ça dépend. Si vous l'insérez beaucoup, la seconde est plus rapide, car il y a moins de travail répété (mais plus d'analyse au départ ... et cette partie dépend du navigateur, que l'analyse ou le paramétrage explicite du CSS soit plus rapide). La chaîne html que vous utilisez est mise en cache en tant que fragment de document, réutilisée pour de futures insertions. La seconde aura donc tous les styles de chaîne et sera prête à être clonée immédiatement, plutôt que de définir des styles à chaque fois. une boucle c'est beaucoup plus rapide.

Malheureusement, parce que de cette mise en cache, il est difficile à tester, car la meilleure façon de tester ... une boucle répétée, il est optimisé pour. Voici une démo de test rapide qui fonctionne dans Chrome ou Firefox/Firebug, il suffit d'ouvrir votre console pour voir les résultats (la page sera en retard pendant son ouverture ...l'exécution des tests):

http://jsfiddle.net/XAece/

Dans ce test, sur ma machine pour 100.000 itérations dans Chrome: Méthode

• .css(): 4654ms
• méthode de style en ligne: 4056ms
• $(html, props) méthode: 5816ms

Pour Firefox:

• méthode .css(): 8648ms
méthode
• de style en ligne: 3371ms
• méthode $(html, props): 10250ms

---

Comme une note de côté, il y a une autre méthode (troisième dans le test ci-dessus), $(html, props), où vous pouvez joindre des gestionnaires d'événements, utilisez text pour obtenir le texte intérieur codé, etc:

$("<div />", { 
    css: { "background-color" : "red", 
     "color" : "white", 
     "border" : "solid 1px black" }, 
    click: function() { alert('You clicked me!'); } 
}).appendTo(someElement); 

Answer 2

utilisation:

$('<div class="someClass" />').appendTo(someElement); 

et vous garderez les deux

ou

$('<div style="\ 
    border:1px solid #888;\ 
    padding:2px;\ 
" />').appendTo(someElement);