Foros del Web - Ver Mensaje Individual

KarlanKas · #1 (**permalink**) 08/06/2008, 12:08

Hola a todos!

Hace tiempo me regalaron un libro de Nicholas C. Zakas llamado "Javascript para desarrolladores web". La verdad es que lo hojeé y me pareció que estaba muy bien pero no lo leí hasta hoy que he empezado a cotillearlo. Es muy divertido y didáctico y me ha enseñado una cosa curiosa que no sabía (una de muchas porque estoy aprendiendo bastante con este libraco). La cosa en cuestión es que es más rápido usar el método join para crear cadenas de texto que el típico texto+="pepito";

Es decir, que se tarda menos en que aparezca escrito "pablito clavó un clavito" así:

Código:

frase=new Array();
frase.push("pablito");
frase.push("clavó");
frase.push("un");
frase.push("clavito");

texto=frase.join(" ");

que así:

Código:

texto="pablito ";
texto+="clavó ";
texto+="un ";
texto+="clavito";

Esto lo pone como ejemplo para explicar los prototype (Dios, es interesantisiimo!!). Os pongo un ejemplo basándome en su texto (dejo todos los prototipos que he creado aunque alguno no se use):

Código:

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script>

function anadirTexto(){
this._strings=new Array();
}

anadirTexto.prototype.poner= function(esto){
this._strings.push(esto);
}
anadirTexto.prototype.quitar= function(esto){
for(a=0;a<this._strings.length;a++){
if(this._strings[a]==esto){
this._strings.splice(a,1);
}
}
}

anadirTexto.prototype.crear=function(){
return this._strings.join(" ");
}

iteraciones=10000;
// COMIENZA LA PRUEBA

document.write("Iniciando por método join");
t1=new Date();

textito=new anadirTexto();
for(a=0;a<iteraciones;a++){
textito.poner("pepito");
}
texto=textito.crear();
t2=new Date();
document.write("<br />Terminado!<br /><br />");

textito=null;
texto=null;

document.write("Iniciando por método tradicional");
t3=new Date();
texto="";
for(a=0;a<iteraciones;a++){
texto+=" pepito";
}
t4=new Date();
document.write("<br />Terminado!");
alert("Usando join ha tardado:"+((t2-t1)/1000)+" segundos\n\nUsando método tradicional ha tardado: "+((t4-t3)/1000)+" segundos");

</script>


</body>
</html>

En el ejemplo crea una cadena con 10.000 pepitos seguidos. La diferencia de tiempo es más o menos del 50%. Pero si lo poneis para 50.000 la diferencia es abismal. Sobre todo en el IE7 (me ha tardado unos 150 segundos).

Según Nicholas, el motivo está en que con el método "tradicional" se crea una variable nueva por cada adición de texto que sustituye a la que había ya. El proceso sería algo así:

texto="hola";
texto+=" pepe";

1. crea una cadena para almacenar hola
2. otra para almacenar pepe
3. otra para almacenar el resultado de la suma
4. añade a esta última cadena el contenido de la varialbe texto (que es hola)
5. añade pepe al resultado
y 6. por último sustituye el valor de texto por el resultado de la suma.

No me digais que no es curioso.

EDITADO:

En firefox cuantas más iteraciones se ponga más gana el método tradicional!