Je peuplement de la liste avec environ 25 000 articles, à l'aide de code comme celui-ci:
var html = "";
for(var i = 0; i < reallyLongArray.length; i++) {
html += "<li><a href='#'>Hi</a></li>";
}
$("#list ol").html(html);
6 Réponses :
Utilisation des méthodes DOM pour la créer devrait fonctionner plus rapidement:
var fragment = document.createDocumentFragment();
for(i = 0; i < reallyLongArray.length; i++) {
fragment.appendChild($(document.createElement('li'))
.append($(document.createElement('a'))
.text('Hi')
.attr({href: 'foobar'})
)
.get(0)
);
}
$('list ol').append(fragment);
"Utilisation des méthodes DOM pour la créer devrait fonctionner beaucoup plus rapidement" [citation nécessaire] . selon QuirksMode , innerhtml est généralement plus rapide.
@nwellcome, j'ai dit innerhtml - rien à voir avec jQuery.
Ajout d'un fragment est extrêmement rapide, mais la construction du fragment ou de la liste d'un élément à la fois peut ne pas être. En général, je préfère les méthodes de style DOM car elles sont lisibles et sûres contre les attaques d'injection HTML, mais dans le cas où vous ajoutez des charges de nœuds à la fois, parfois innerhtml peut être plus rapide.
Voir le Test J'ai ajouté à la réponse. Le moyen le plus rapide est la manipulation Dom avec DocuTyFragment, sans utiliser de JQuery.
@bobnice JSPERF.COM/JQUERY-HTML-VERSUS-AppENDCHILD/3 , Sheesh, vous ne plaisantez pas, en utilisant un fragment est beaucoup plus rapide.
Cela accélérera un peu. La concaténation de la chaîne peut prendre beaucoup de temps lorsqu'il est utilisé beaucoup à cause de ce qui se passe "sous la hotte".
$(document).ready(function(){
var html = new Array();
for(i = 0; i < reallyLongArray.length; i++) {
html[i] = "<li><a href='#'>Hi</a></li>";
}
document.getElementById('list').getElementsByTagName('ol')[0].innerHTML = html.join("");
});
La concaténation de la chaîne n'est pas le goulot d'étranglement. La fonction html est.
@Kyle tu as édité depuis mon commentaire. En tout cas, vous devez utiliser html [i] au lieu de html [html.length] ...
Merci pour la suggestion, je l'ai mis à jour pour refléter cela. Ouais, je l'ai édité parce que j'ai remarqué une erreur.
Mis à part en utilisant directement ... et essayer la technique "Stringbuffer": P> innerhtml code>: var html = [];
for(i = 0; i < reallyLongArray.length; i++) {
html.push("<li><a href='#'>Hi</a></li>");
}
$("#list ol").html(html.join(''));
Allait suggérer cela. array.join () sera certainement accélérer pour rejoindre 25K articles.
Enveloppez le HTML dans un seul élément. Lorsque JQuery construit des éléments d'une chaîne, il ajoute tous les éléments de niveau supérieur en les itération. Si vous enveloppez les éléments de la liste dans un seul élément, cela devrait aller beaucoup plus vite car il ne doit ajouter que 1 élément de niveau supérieur à la DOM.
var html = "<ul>"; // your loop... var html += "</ul>"; // add list html to list container
@Peterolson: Je suppose que la combinaison des réponses de ce fil fera une solution super rapide. Grande question BTW.
Les jointures de tableau sont plus rapides que la manipulation de chaîne.
var html[];
for(i = 0; i < reallyLongArray.length; i++) {
html.push(string);
}
$(selector).html(html.join(''));
$.grep(ComboBoxData, function (e) {
if (e.Text.toLowerCase().indexOf(TextBox) != -1 || e.ID.toLowerCase().indexOf(TextBox) != -1) {
Show = true;
Result += "<li hdnTextID='" + hdTextID + "' onclick='Select(this," + TextBoxID + ")' onmouseover='triggerTheli(this)' HdntriggerID='" + e.HdntriggerID + "' postBack='" + e.TriggerPostBack + "' Event='" + e.EventName + "' HdnID='" + e.hdnID + "' SelectedValue='" + e.ID + "' style='background:" + Color + "'><a>" + e.Text + "<p> " + e.Description + " </p></a></li>";
if (Color == "#eff3ec")
Color = "#fff";
else
Color = "#eff3ec";
}
});
a good example of mine
Quel navigateur? Y a-t-il plus d'un élément sélectionné par
$ ("# liste ol") ? Pouvez-vous échangervraimentlongarray.length pour un numéro constant? Avez-vous essayé d'utiliser la méthode "Stringbuffer" au lieu d'une concaténation de chaîne?Avez-vous envisagé d'éviter l'option d'ajouter des dizaines de milliers d'éléments dans le DOM et de charger uniquement des portions plus petites?
Vous créez une variable globale
i , mieux la créer en dehors de la boucle en le préfixant avecvar . Le$ ("# liste OL"). HTML (HTML); peut également être remplacé par$ ("# liste # ol") [0] .innerhtml = html;@Peter: Donc, vous dites que le rendu est ce qui prend la part du lion du temps?
De plus, vous pouvez essayer de créer les éléments en JavaScript plutôt que dans JQuery, ce qui sera nettement plus rapide. Je n'ai pas le temps de rechercher comment faire cela - mais je parie que ce sera votre meilleure option
@Matt Non, un seul élément. Je ne suis pas préoccupé par la vitesse de la formation de la chaîne, car elle n'est pas prohibitivement lente.