Contenido

style vs className, ¿cual es más rápido?

7 oct

+ 4

Hace unos días me ví involucrado en una conversación sobre el uso de clases para definir estilos frente a definir los estilos directamente en el elemento. Quitando todas las obviedades sobre la comodidad de disponer de una clase y con todos los estilos necesarios para darle un aspecto diferente a esos elementos.

La conversación venía, ¿por si era mejor cambiar los estilos directamente mediante DOM, atacando a los atributos de style directamente o cambiando el className del elemento y dejar que el navegador sea el que asocie esa nueva class a los estilos recorriendolos y aplicándolo?

Pues trás 5 minutos de charla y 30 segundos de Google llegamos al gran Quirksmode, y evidentemente, como otras tantas veces, nos sacó de dudas con una de sus espectaculares tablas comparativas.

style_vs_classname

Funciones usadas

// Cambiar styles
function doChangeStyle()
{
	startTimer();
	var x = pointer.getElementsByTagName('td');
	for (var i=0;i<x.length;i++)
	{
		x[i].style.backgroundColor = '#00cc00';
		x[i].style.fontSize = '120%';
	}
	stopTime = new Date().getTime();
	setTimeout('stopTimer(2)',10);
}

// Cambiar className
function doChangeClassName()
{
	startTimer();
	var x = pointer.getElementsByTagName('td');
	for (var i=0;i<x.length;i++)
	{
		x[i].className = 'teststyle';
	}
	stopTime = new Date().getTime();
	setTimeout('stopTimer(1)',10);
}

El artículo, nos permite realizar una prueba creando una tabla y cambiandole los estilos a todos los elementos <td />.

Conclusiones

Pues la opción que no más usamos y que por un momento creí que podría ser la menos apropiada, className se comporta realmente rápida en todos los navegadores testeados excepto en Opera 9.5b que sería mejor usar el método style.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.