#12999 - update textContent VS data VS nodeValue · jsPerf
https://jsperf.com/update-textcontent-vs-data-vs-nodevalue
Suite de ça sur les perfs du JS.
Si on veut mettre du texte dans un élément, en JS, utilisez ça :
Ou bien, si l’élément est vide du départ :
Plutôt que .innerHTML ou .innerText ou .textContent.
Par contre, pour la récupération de texte (court, sans HTML), innerHTML semble très rapide (par contre jQuery est trente mille fois plus lent que le reste : 25k opérations par seconde au lieu de 770'000'kops).
Évidemment, on fait rarement 700 millions de div imbriqués (ou alors il faut vous faire soigner), mais la différence peut être notable sur les ordinateurs moins puissants, comme les smartphones.
Je suis en train d’optimiser Blogotext et le lecteur RSS en JS.
À ce titre, je me rend compte que je vais pratiquement bannir .innerHTML, tant les perfs semblent merdiques. Il faut mieux utiliser plusieurs .createElement() et plein de manipulation DOM plutôt que d’utiliser .innerHTML.
La manipulation DOM directement reste quand même vachement plus rapide que le reste (ce qui est normal : le niveau est plus bas que le .innerHTML, qui doit invoquer un parseur HTML avant).
Si on veut mettre du texte dans un élément, en JS, utilisez ça :
element.firstChild.nodeValue = 'lorem ipsum';
Ou bien, si l’élément est vide du départ :
element.appendChild(document.createTextNode('lorem ipsum'))
Plutôt que .innerHTML ou .innerText ou .textContent.
Par contre, pour la récupération de texte (court, sans HTML), innerHTML semble très rapide (par contre jQuery est trente mille fois plus lent que le reste : 25k opérations par seconde au lieu de 770'000'kops).
Évidemment, on fait rarement 700 millions de div imbriqués (ou alors il faut vous faire soigner), mais la différence peut être notable sur les ordinateurs moins puissants, comme les smartphones.
Je suis en train d’optimiser Blogotext et le lecteur RSS en JS.
À ce titre, je me rend compte que je vais pratiquement bannir .innerHTML, tant les perfs semblent merdiques. Il faut mieux utiliser plusieurs .createElement() et plein de manipulation DOM plutôt que d’utiliser .innerHTML.
La manipulation DOM directement reste quand même vachement plus rapide que le reste (ce qui est normal : le niveau est plus bas que le .innerHTML, qui doit invoquer un parseur HTML avant).