Ajout d'éléments comme une chaîne par rapport à CreateElement ()

Question

Pour ce que je veux accomplir, je peux utiliser soit createElement() ou innerHTML et une chaîne.

Qu'est-ce qui est vraiment plus rapide à la fin? J'ai été amené à croire depuis longtemps que les cordes sont beaucoup plus lentes que les fonctions intégrées qui renvoient les mêmes résultats, mais est-ce vraiment vrai?

Je demande parce que j'ai essayé createElement() Et il semble que toutes les propriétés qui doivent être ajoutées à chaque élément ralentit les choses. Non seulement cela, mais il occupe également plus de place. J'ai une boucle qui va de 1 infinité en fonction de la longueur d'un tableau, bien qu'ajoutant de préférence jusqu'à 50 éléments avant de montrer des signes de ralentissement. Dans ces 50 éléments que je souhaite créer, il y a environ 10 éléments de plus. Donc, en tout, cela crée en fait environ 500 éléments.

J'ai remarqué un peu plus rapidement que d'habitude en créant des éléments avec les fonctions intégrées, et en raison de mon trompe est vraiment mieux, à la fois en ce qui concerne la vitesse et simplement la meilleure pratique, avant de le faire partout.

Answer 1

Les différences de performance pour ce problème varient entre les navigateurs, et (parfois) entre différentes versions d'un navigateur, et j'ai vu quelques articles différents donner des conseils différents sur cette question.

D'après ma propre expérience, je ne me souviens qu'une seule fois où j'avais vraiment besoin d'apporter de grandes modifications à une grande page Web, reconstruisant spécifiquement un élément de table qui avait des centaines ou potentiellement des milliers de lignes dont chacune avait beaucoup de cellules, et J'ai trouvé que la construction d'une variable de chaîne, puis la définition d'interhtml une fois à la fin était beaucoup, beaucoup plus rapide que d'essayer de le faire via les fonctions DOM. Mais, c'était pour une application Web Intranet particulière où il était garanti que 100% des utilisateurs seraient sur IE, donc je n'avais pas besoin de m'inquiéter des tests croisés.

Même si vous décidez d'emprunter la voie de construction de cordes, il existe différentes opinions sur la façon de l'accélérer. J'ai lu plus d'un article qui a comparé les performances de l'ajout en continu à la fin de votre chaîne (standard myString += 'something' + 'something else' Type opérations) contre l'apprentissage jusqu'à la fin d'une variable de tableau, puis à l'aide de Array.Join () pour créer une grosse chaîne à la fin. Encore une fois, cela a fait une grande différence pour certaines versions de certains navigateurs, mais n'était pas différente ni pire dans d'autres.

Answer 2

InnerHTML est logique si vous avez de gros morceaux de contenu pour ajouter ou remplir un élément existant.

Il n'y a pas si longtemps, les méthodes DOM étaient beaucoup plus lentes que d'attribuer à la propriété innerhtml d'un élément, mais dernièrement, elles sont assez rapides et sont tout simplement gênantes en raison de tous les appels requis. Mais vous pouvez créer des fonctions d'assistance qui acceptent un objet avec toutes les informations nécessaires pour créer un élément pour soulager le fardeau.

Il y a des mises en garde à l'utilisation de InnerHTML:

1. Il est difficile d'insérer un certain nombre de nœuds et sœurs entre d'autres frères et sœurs. Pour ce faire, vous finissez par insérer le HTML dans un autre élément (par exemple un div), puis déplacer les éléments créés dans le DOM. Malheureusement, vous ne pouvez pas utiliser un document de document pour cela, donc cela nécessite d'itréter les nœuds enfants
2. L'utiliser sur les tables peut être problématique, c'est-à-dire que je n'aime pas modifier l'interhtml de divers éléments dans un tableau autre que TD
3. Les navigateurs génèrent des HTML différents comme propriété innerHTML, donc l'utiliser pour sérialiser les éléments est problématique
4. L'utilisation de la propriété InnerHTML peut supprimer les auditeurs sur d'autres éléments, même s'ils ne sont pas modifiés par l'InnerHTML

par exemple

<div id="div0">div0</div>

<!-- Button to add a click listener to above div -->
<button onclick="
  var el = document.getElementById('div0');
  el.onclick = function(){alert(this.id);}
">Add listener as property</button>

<!-- Button to modify the body's innerHTML -->
<button onclick="
  var body = document.getElementsByTagName('body')[0];
  body.innerHTML += '';
">Append to body.innerHTML</button>

Vous pouvez cliquer sur le premier bouton pour ajouter un écouteur de clic div0, mais lorsque vous cliquez sur le deuxième bouton (qui semble ne rien faire mais en fait réinitialise l'InnerHTML), l'auditeur est supprimé.

Answer 3

Je suppose que vous avez partiellement répondu à votre propre question.

La vitesse n'est pas vraiment affectée à moins que vous ne soyez un très grand morceau de HTML que vous souhaitez insérer en utilisant InnerHTML. L'utilisation de CreateElement est plus "conviviale", mais vous vous retrouvez avec beaucoup plus de lignes de code pour faire de petits changements parfois.

Personnellement j'utilise innerhtml ou, quelle que soit jQuery .html() propriété. Mais lorsque je dois utiliser des boucles, effectuez un travail complexé, j'utilise l'élément de création.

À la fin, tout est le même avec des différences de performances sans importance. Une fois que le navigateur a reflété le document, vous pouvez accéder à votre document à la même chose.