javascript document.createElementi HTML o HTML

Question

Sono confuso sul seguente stile di scrittura del codice. Voglio sapere quale è il e efficiente metodo efficiente per inserire il tag HTML nel documento.

Javascript:

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

O

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); 

Qual è il metodo più veloce e migliore?

Answer 1

Beh, pensa solo a quello che stanno facendo ciascuno di loro. Il primo sta prendendo la stringa, analizzandola e quindi chiamando document.createElement, document.appendChild, ecc. (O metodi simili) in base all'output dalla stringa analizzata. Il secondo è la riduzione del carico di lavoro sul browser poiché stai dichiarando direttamente cosa vuoi che faccia.

See a comparison on jsPerf

Secondo jsPerf opzione 1 è circa 3 volte più lento rispetto all'opzione 2.

In tema di manutenibilità, l'opzione 1 è molto più facile da scrivere ma mi chiama vecchio stile, preferirei usare l'opzione 2 in quanto mi sembra molto più sicura.

Modifica

Dopo alcuni risultati cominciarono ad arrivare, i risultati differenti suscitato il mio curiosità. Ho eseguito il test due volte con ciascuno dei miei browser installati, Ecco uno screenshot dei risultati di jsPerf dopo tutti i test (operazioni al secondo, più alto è meglio).

Così i browser sembrano molto diverse nel modo in cui gestiscono le due tecniche. In media, l'opzione 2 sembra essere la più veloce a causa dell'ampia opzione di vantaggio di Chrome e Safari 2. La mia conclusione è che dovremmo semplicemente usare quello che sembra più comodo o più adatto agli standard della tua organizzazione e non preoccuparti di quale sia più efficiente.

La cosa principale di questo esercizio mi ha insegnato è non utilizzare IE10 nonostante le grandi cose che ho sentito su di esso.