aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace tiempo hablabamos de DOM como una alternativa al innerHTML, en la que argumentábamos que el uso de DOM era el definido en el estandar y no el de innerHTML que al ser un método propietario de Internet Explorer, se había incluido en otros navegadores a modo de parche para solucionar problemas debido a la gran acogida que tuvo.

Como pudimos ver, el uso de innerHTML podría tambien ser reemplazado por métodos desarrollados por frameworks como Prototype, que mejoraban el rendimiento y delegaban al framework el uso correcto del DOM.

Ahora, Steven Levithan, lanza una mini aplicación en la que podemos probar el rendimiento de innerHTML, y mejorarlo con replaceHTML, una función que se encarga de mejorar el rendimiento de innerHTML, fusionandolo con un pseudo-DOM.

function replaceHtml(el, html) {
	var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
	/*@cc_on // Puro innerHTML para IE (que es más rápido)
	oldEl.innerHTML = html;
	return oldEl;
	@*/
	var newEl = oldEl.cloneNode(false);
	newEl.innerHTML = html;
	oldEl.parentNode.replaceChild(newEl, oldEl);
	return newEl;
};

Como podemos ver, la función está dividida en 2 partes, una para IE y otra para el resto.

Para IE, su método funciona más optimamente y permite mejorar el rendimiento frente al DOM propuesto por la W3C, pero para Firefox, el sistema de eliminación de elementos desde innerHTML es lento comparado con el método DOM, por este motivo se delega a DOM esta parte.

Si miramos los resultados de la aplicación, vemos como a major número de iteraciones, replaceHTML, se perfila como vencedor en esta carrera de velocidad.

100 elements...
innerHTML (destroy only): 3ms
innerHTML (create only): 2ms
innerHTML (destroy & create): 4ms
replaceHtml (destroy only): 1ms (~ same speed)
replaceHtml (create only): 4ms (~ same speed)
replaceHtml (destroy & create): 4ms (~ same speed)
Done.
1000 elements...
innerHTML (destroy only): 31ms
innerHTML (create only): 14ms
innerHTML (destroy & create): 43ms
replaceHtml (destroy only): 4ms (7.8x faster)
replaceHtml (create only): 17ms (~ same speed)
replaceHtml (destroy & create): 17ms (2.5x faster)
Done.
2500 elements...
innerHTML (destroy only): 115ms
innerHTML (create only): 32ms
innerHTML (destroy & create): 147ms
replaceHtml (destroy only): 7ms (16.4x faster)
replaceHtml (create only): 36ms (~ same speed)
replaceHtml (destroy & create): 39ms (3.8x faster)
Done.
5000 elements...
innerHTML (destroy only): 338ms
innerHTML (create only): 64ms
innerHTML (destroy & create): 398ms
replaceHtml (destroy only): 12ms (28.2x faster)
replaceHtml (create only): 65ms (~ same speed)
replaceHtml (destroy & create): 75ms (5.3x faster)
Done.
10000 elements...
innerHTML (destroy only): 1147ms
innerHTML (create only): 129ms
innerHTML (destroy & create): 1425ms
replaceHtml (destroy only): 27ms (42.5x faster)
replaceHtml (create only): 128ms (~ same speed)
replaceHtml (destroy & create): 150ms (9.5x faster)
Done.
15000 elements...
innerHTML (destroy only): 2633ms
innerHTML (create only): 189ms
innerHTML (destroy & create): 2825ms
replaceHtml (destroy only): 33ms (79.8x faster)
replaceHtml (create only): 191ms (~ same speed)
replaceHtml (destroy & create): 224ms (12.6x faster)
Done.

[Via]