javascript - img - document.createelement( input)

JavaScript document.createElement o HTML tags

Question

Estoy confundido en el siguiente estilo de escritura de código. Quiero saber cuál es el método práctico y eficiente para insertar una etiqueta HTML en un 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);

¿Cuál es el método más rápido y mejor?

Answer 1

Bueno, solo piensa en lo que cada uno de ellos está haciendo. El primero es tomar la cadena, analizarla y luego llamar a document.createElement , document.appendChild , etc. (o métodos similares) en función de la salida de la cadena analizada. El segundo es reducir la carga de trabajo en el navegador, ya que está indicando directamente lo que quiere que haga.

Vea una comparación en jsPerf

Según jsPerf, la opción 1 es aproximadamente 3 veces más lenta que la opción 2 .

Sobre el tema de mantenibilidad, la opción 1 es mucho más fácil de escribir, pero llámeme anticuado. Prefiero usar la opción 2, ya que se siente mucho más seguro.

Editar

Después de que empezaron a llegar algunos resultados, los diferentes resultados despertaron mi curiosidad. Ejecuté la prueba dos veces con cada uno de mis navegadores instalados. Aquí hay una captura de pantalla de los resultados de jsPerf después de todas las pruebas (operaciones / segundo, más alto es mejor).

Así que los navegadores parecen diferir mucho en cómo manejan las dos técnicas. En promedio, la opción 2 parece ser más rápida debido a la gran brecha de Chrome y Safari que favorece a la opción 2. Mi conclusión es que deberíamos usar el que se sienta más cómodo o que se ajuste mejor a los estándares de su organización y no preocuparnos por cuál es más eficiente.

Lo principal que este ejercicio me ha enseñado es no usar IE10 a pesar de las cosas maravillosas que he escuchado al respecto.