Pour ce que je veux accomplir, je peux utiliser 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 c'est vraiment vrai?
Je demande parce que j'ai essayé J'ai remarqué un peu de ralentissement plus rapidement que d'habitude en créant des éléments avec les fonctions intégrées et, en raison de mes conclusions autour de la réinitialisation de ce tableau (le tableau était 5D et non dans le même script), je voudrais Pour savoir ce qui est vraiment meilleur, les deux jusqu'à la vitesse vont et tout simplement la meilleure pratique avant de le faire partout. CreeEeElement () ou innerhtml et une chaîne.
CreeeEeey () et il semble que toutes les propriétés qui doivent être ajoutées à chaque élément ralentit les choses. Non seulement cela, mais cela prend plus de place aussi. J'ai une boucle qui va n'importe où à partir de 1-Infinity basée sur la longueur d'une arraie, mais d'ajouter de préférence jusqu'à 50 éléments avant de montrer des signes de ralentissement. Dans ces 50 éléments de 50 ou plus que je souhaite créer, il y a environ 10 autres éléments. Donc, dans tout, il crée environ 500 éléments.
3 Réponses :
Je suppose que vous avez partiellement répondu à votre propre question.
La vitesse n'est pas vraiment affectée à moins d'une très grande partie de HTML que vous souhaitez insérer avec innerhtml. L'utilisation de Createeeyement est plus "Domicile", mais vous vous retrouvez avec beaucoup de lignes de code pour faire de petits changements parfois.
Personnellement, j'utilise innerhtml ou, quelle que soit l'utilisation de jQuery avec la propriété À la fin, tout est pareil avec des différences de performance sans importance. Une fois le navigateur refusion du document, vous pouvez accéder à votre document de la même page. .html () . Mais lorsque je dois utiliser des boucles, effectuez un travail complexe, j'utilise l'élément Créer.
Avec jQuery, il n'est pas nécessaire d'utiliser html () - ellementx.append ($ ('< ceci fonctionne comme prévu ')). Cliquez sur (... )
C'est intéressant, je ne savais pas que vous pouvez accéder à votre chaîne qui rapidement.
J'ai ajouté un peu d'informations à la OP il y a quelques minutes. J'ai fait ressembler à un peu, mais chaque élément que j'ajoutais dans la boucle contenait environ 10 éléments, donc cela équivaut à un gros morceau.
innerhtml a du sens si vous avez de gros morceaux de contenu pour ajouter ou remplir un élément existant.
Pas si longtemps, les méthodes DOM étaient très plus lentes que d'affecter la propriété innerhtml d'un élément, mais ils sont récemment assez rapides et sont juste gênants à cause de tous les appels requis. Mais vous pouvez créer des fonctions d'assistance qui acceptent un objet avec toutes les informations nécessaires à la création d'un élément pour faciliter le fardeau.
Il y a des mises en garde à utiliser innerhtml:
par exemple Vous pouvez cliquer sur le premier bouton pour ajouter un auditeur de clic sur div0 , mais lorsque vous cliquez sur sur Le deuxième bouton (qui semble ne rien faire mais en fait réinitialise l'innerhtml) que l'auditeur est supprimé.
Dans ma propre expérience, je ne me souviens que d'une fois que je devais vraiment faire de gros changements dans une grande page Web, en particulier la reconstruction d'un élément de table qui avait des centaines ou potentiellement des milliers de lignes chacune d'entretien et < Strong> J'ai trouvé que construire une variable de chaîne puis régler innerhtml une fois à la fin était beaucoup, beaucoup plus vite que d'essayer de le faire à travers les fonctions DOM . mais , c'était pour une application Web intranet particulière où elle était garantie que 100% des utilisateurs seraient sur c.-à-d. Je n'avais donc pas besoin de vous inquiéter des tests de navigateur croisés.
Même si vous décidez d'aller dans la route de la construction de cordes, il existe des opinions différentes sur la manière de vous accélérer. J'ai lu plus d'un article qui a comparé la performance d'ajouter continuellement à la fin de votre chaîne (standard mystring + = 'quelque chose' + 'quelque chose d'autre' opérations de type) contre l'annexe à la fin de une variable de matrice puis en utilisant Array.join () pour créer une grande 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 ou pire chez d'autres.
Assez étrange, c'était la réponse la plus précise car elle semble être vraie que différents navigateurs font réellement une plus rapide que l'autre. Ie gère apparemment des cordes beaucoup mieux, mais Google Chrome gère des méthodes DOM incroyablement rapidement par rapport à innerhtml.
Peut-être devriez-vous créer des versions et testez lequel est le plus rapide
Je doute qu'il y ait une grande différence de performance. Je recommanderais de choisir une approche la plus facile à laquelle vous devez coder et entretenir. La règle générale que j'utilise est que pour les modifications mineures (mise à jour du texte, ajouter un lien, etc.) Utilisez
innerhtml et pour des modifications majeures (ajoutant de nombreux liens ou composants à un seul conteneur, ou tout Structure de plus de 2 nœuds profonds) UtilisezCreeEnment () .