web-dev-qa-db-fra.com

javascript document.createElement ou balises HTML

Je suis confus sur le style suivant d'écriture de code. Je veux savoir quelle est la méthode pratique et efficace pour insérer une balise HTML dans le document.

Javascript:

document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>';

OR

var itd=document.createElement('div'),
    ita=document.createElement('a'),
    idt=document.createTextNode('hello world');
    iat=document.createTextNode('click me');
    idn=document.createTextNode('also');

    ita.appendChild(iat);
    itd.appendChild(idt);
    itd.appendChild(ita);
    itd.appendChild(idn)

    docuemtn.getElementById('demoId').appendChild(itd);

Quelle est la méthode la plus rapide et la meilleure?

javascripthtmloptimizationcreateelement
22
blue ghhgdtt

Eh bien, réfléchissez à ce que chacun fait. Le premier prend la chaîne, l’analyse et appelle ensuite document.createElement, document.appendChild, etc. (ou des méthodes similaires) basées sur la sortie de la chaîne analysée. La seconde consiste à réduire la charge de travail du navigateur lorsque vous indiquez directement ce que vous voulez qu'il fasse.

Voir une comparaison sur jsPerf

Selon jsPerf , l'option 1 est environ 3 fois plus lente que l'option 2 .

Sur le sujet de la maintenabilité, l'option 1 est beaucoup plus facile à écrire, mais appelez-moi à l'ancienne, je préférerais utiliser l'option 2 car elle semble beaucoup plus sûre.

Modifier

Après que quelques résultats aient commencé à arriver, les résultats différents ont piqué ma curiosité. J'ai exécuté le test deux fois avec chacun de mes navigateurs installés, voici une capture d'écran des résultats de jsPerf après tous les tests (opérations/seconde, plus c'est mieux).

jsPerf results

Les navigateurs semblent donc différer considérablement dans la façon dont ils gèrent les deux techniques. En moyenne, l'option 2 semble être la plus rapide en raison de Chrome et le grand écart de Safari favorisant l'option 2. Ma conclusion est que nous devons simplement utiliser celui qui se sent le plus confortable ou qui correspond le mieux aux normes de votre organisation et ne vous inquiétez pas de ce qui est le plus efficace.

La principale chose que cet exercice m'a appris est pour ne pas utiliser IE10 malgré les bonnes choses que j'en ai entendues .

24
Daniel Imms