Foros del Web » Programando para Internet » Javascript »

Rendimiento - SetTimeout y otras dudas...

Estas en el tema de Rendimiento - SetTimeout y otras dudas... en el foro de Javascript en Foros del Web. Hola a todos. Resulta que me estoy haciendo una librería para realizar animaciones...Hasta ahora, desde el punto de vista práctico, cumple casi las mismas funciones ...
  #1 (permalink)  
Antiguo 17/05/2012, 21:35
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 8
Rendimiento - SetTimeout y otras dudas...

Hola a todos. Resulta que me estoy haciendo una librería para realizar animaciones...Hasta ahora, desde el punto de vista práctico, cumple casi las mismas funciones que animate de Jquery.
Por donde quiero seguir es, agregandole la función de elegir un intervalo de tiempo por cada propiedad. Por ej:

height {nVal: 250, int: 10}
width { nVal: 300, int: 35}

En el script cambiaría el alto suficiente cada 10 ms hasta llegar a 250 X y el ancho suficiente cada 35 ms hasta llegar a 300 X.
Pongo X porque pueden ser px, em, %, etc.
Entonces, como intento hacer código lo menos pesado en cuanto velocidad, me encuentro con dos opciones y no se cual elegir.
Las opciones de las que hablo son:
1) Hacer varios setTimeout para cada intervalo
2) Usar un sólo setTimeout para varios intervalos, y, a diferencia del anterior, utilizando menos setTimeouts y funciones pero más arrays, comprobaciones según el retardo que se esté utilizando y comprobaciones del contador general con respecto al contador de cada propiedad.
El contador de la propiedad, son las veces que hay que cambiar el valor de la propiedad hasta tener el valor deseado.
El contador general, es el valor del contador de propiedad más alto que hay.

Considero que la frase "Una imagen vale más que mil palabras" es válida en éste área como "Un script vale más que mil palabras", ja, así que acá van dos script con las diferencias que habrían entre las dos opciones:

1)
Código Javascript:
Ver original
  1. //Mucho Código
  2. //...
  3. intWidth=10
  4. intHeight=35
  5. contWidth=13
  6. contHeight=8
  7. contMax=13
  8. intervalos=[10,10,10,5,5]
  9. function fnAnima()
  10. {
  11.     //Cambia ancho necesario si el retardo es igual a 10 y si cont es menor que contWidth
  12.     //Cambia alto necesario si el retardo es igual a 5 y si cont es menor que contHeight
  13.  intervalos.push(intervalos.shift())  //Corro los elem del array a la izquierda, en la primera iteración sería: intervalos =[10,10,5,5,10], y así...
  14. if(cont==contMax)
  15. {
  16.     return 0 //si lo hizo las veces que era necesario , termina.
  17. }
  18. cont++
  19. setTimeout(fnAnima,intervalos[0])
  20. }
  21. //Omito la función para calcular en qué orden y que valor deben tener los intervalos,
  22. // que no estaría en la 2da opción.
  23. //También hay un contador general, que se debe andar comparando cada 2x3 con el de la
  24. //propiedad.
  25. //...
  26. //Mucho Código

2)
Código Javascript:
Ver original
  1. intWidth=10
  2. intHeight=35
  3. contWidth=13
  4. contHeight=8
  5. cont=0
  6. function fnAnimaH()
  7. {
  8.   //cambia alto necesario
  9. cont++
  10. if(contHeight==cont)
  11.    {
  12.        return 0 //Si lo hizo las veces que era necesario, termina
  13.    }
  14. setTimeout(fnAnimaH,intHeight)
  15. }
  16.  
  17. function fnAnimaW()
  18. {
  19.   //cambia ancho necesario
  20. cont++
  21. if(contWidth==cont)
  22.    {
  23.        return 0 //Si lo hizo las veces que era necesario, termina
  24.    }
  25. setTimeout(fnAnimaW,intWidth)
  26. }
  27.  
  28. //Sería una función por cada propiedad, en este caso una para Width y otra para Height.
Que quede claro que son ejemplos, esto tiene muchísimo más código, y orientado a objetos; pero representa exactamente las diferencias que habría en utilizar un método u otro.

Otras dudas en cuanto a rendimiento en JS:
Si ofusco el código, aparte de ganar ancho de banda para el cliente, ¿gano velocidad en JS?.
¿qué métodos/técnicas conocen para ganar rendimiento?
¿conocen alguna manera de testear la velocidad de ejecución de JS?
Si conocen alguna guía relacionada con el tema, les estaría muy agradecido.

PD: No quiero parecer un obsesionado, pero como voy a tratar con algo que lo voy a utilizar
mucho, no quiero que se cuelgue el navegador. (aunque todavía no pasó, me prevengo)

Gracias y Salu2.

Última edición por pistonasos; 17/05/2012 a las 21:48
  #2 (permalink)  
Antiguo 22/05/2012, 19:43
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 7 meses
Puntos: 187
Respuesta: Rendimiento - SetTimeout y otras dudas...

No entiendo bien la diferencia entre ambos, me dan la sensación que se ejecutará la misma cantidad de veces.

Para medir rendimientos puedes probar con:
http://jsperf.com/
  #3 (permalink)  
Antiguo 26/05/2012, 19:56
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 8
Respuesta: Rendimiento - SetTimeout y otras dudas...

La diferencia es que si yo quisiera cambiar un width, un height, un top, un left, estaría creando un setTimeout por cada propirdad y en el otro caso, estaría realizando todo con un solo setTimeout, pero cada propiedad va a sumar más variables y calculos en los intervalos del setTimeout.
Lo que yo me pregunto es cuál es la mejor forma: Muchos setTimeout y pocas variables , condiciones y cálculos o un sólo set timeout y muchas variables,condiciones y cálculos.
Gracias por la respuesta y por la web que me pasaste, salu2.

Etiquetas: rendimiento, settimeout
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:17.