jQuery Girl
  1. jQuery Girl
  3. Accélération de l’ajout d’éléments HTML dans div via JavaScript
Intereting Posts
JQuery: mettre en miroir une entrée de texte sur une autre Obtenir une variable ASP classique à partir de JSON posté Utilisation d’isotope avec AngularJS (ng-repeat) Ajax appelle pour la réponse json remplacement du texte d’un collage lors d’une boucle sur des éléments HTML Ouvrir la page à partir du bookmarklet, mais en faire une fenêtre modale? jQuery obtient la hauteur d’une image sensible Méthode de clic JQuery sur asp.net Élément de menu? “JQuery (…)” au lieu de “$ (…)” TypeError: $ (…) .autocomplete n’est pas une fonction JQuery3.0 génère une erreur en définissant une propriété qui n’a qu’un getter firefox JQuery Valider le problème de structure de retour à distance Comment puis-je désactiver «l’affixe» de Bootstrap sur les écrans plus petits? Mettre à jour JSON sur chaque keyup for twitter typeahead Les images de boîtes fantaisie disparaissent sur les rails

Accélération de l’ajout d’éléments HTML dans div via JavaScript

J’ajoute quelques éléments dans ma div sous forme de liste. Tous les détails de mes articles sont stockés dans un tableau. L’ajout prend moins de temps lorsque le nombre d’éléments est inférieur à 50. Cependant, lorsque la taille des éléments augmente à 400 ou plus, l’ajout de ma liste a pris beaucoup de temps.

Comment je peux append un peu plus vite div ou en vol à mon div.

La structure est quelque chose comme ça. 

 
 
 ..... . . . .

Cette div principale est comme un écran différent dans mon application.

Comme @arete l’ a mentionné, DocumentFragment augmentera les performances des éléments ajoutés dans le DOM.

L’utilisation de DocumentFragments est plus rapide que l’injection répétée d’un nœud DOM unique et vous permet d’effectuer des opérations de nœud DOM sur de nouveaux éléments au lieu d’une injection en masse via innerHTML .

L’interface DocumentFragment représente un object document minimal qui n’a pas de parent. Il est utilisé comme une version allégée de Document pour stocker des fragments de XML bien formés ou potentiellement non.
– MDN

Nous pouvons créer un DocumentFragment vide en utilisant la méthode document.createDocumentFragment() et append les enfants créés à l’ .appendChild() méthode native JavaScript de .appendChild() , comme suit: 

 var frag = document.createDocumentFragment(), limit = 400, element = 'div', clsName = 'item'; for (var i=0; i

DEMO DE TRAVAIL .

Voici un test de performance d'utilisation de DocumentFragments sur jsPerf

Aussi, j'ai mis à jour la démo de violoneux fournie par @Zword , vous voudrez peut-être en tenir compte.

Essayez ce plugin simple que j’ai créé. Sera sûrement plus rapide que d’append des éléments ou des divs un par un: 

 /*plugin code start*/ (function( $ ) { $.fn.fastAppend = function(getHTML,limit){ var parent=$(this); var str = ""; for(i=0;i
',400);

Voir la démo

Vérifiez le temps d’exécution pris lorsque

Cas 1: Quand les divs sont ajoutés un par un

Violon 1

Cas 2: Quand les div sont concaténés dans une chaîne et complètement ajoutés

Violon 2

Résultat: le cas 2 est plus rapide que le cas 1

Les fragments de document vous donneront une augmentation considérable des performances pour le problème que vous rencontrez. Ce que vous pouvez faire est de créer un fragment de document auquel tous vos éléments seront ajoutés, puis de l’append à l’élément auquel vous envisagez de tout append.

Pour ce faire, vous devez créer un object jQuery tel que: 

 var foo = $("
"); foo.append($("
")); foo.append($("
")); ... foo.append($("
")); $("body").append(foo);

Vous pouvez également utiliser .html() pour définir le code HTML interne d’un élément. Voir: l’article DOM DocumentFragments sur DOM de John Resig pour plus d’informations.

Construire une chaîne avec tout le contenu puis utiliser container.innerHTML = str est une approche peu sophistiquée et laide, mais peut être plus rapide.

Toujours utiliser la mise en cache pour cela car l’ajout d’un élément dans DOM ralentit le processus. Mieux, collectez les balises dans une chaîne, puis ajoutez tout dans DOM en même temps. Par exemple: 

 var _sEleList = "" for (var k=0; k < _nElements; k++) { _sEleList += "
Content
"; }; $('#w_oHolder').append(_sEleList);