Intervalos de tiempo

[IXtremeLT]

Buen día,

Siempre he tenido la duda del por qúe los navegadores interpretan diferente la velocidad sobre los intervalos de tiempo, es decir, setInterval y setTimeout. Pués por ejemplo, si creo un div y asigno un intervalo por milisegundo el cuál ira aumentando de pixel en pixel en el eje x del div, no es la mísma velocidad en todos los navegadores, por ejemplo, en firefox es lento (incluso llega a "laggearse"), en ie es rápido y en opera es muy rápido (probado en versiones modernas).

También si por ejemplo, un intervalo por milisegundo imprime un número incrementable de 1 en 1, en firefox imprime 100 por segundo, en opera alrededor de 40 y en ie como 200.

Por último, ¿Por qué los navegadores soportan tan pocas instrucciones en un intervalo?, por ejemplo si una función de 20 líneas se ejecuta cada milisegundo, no lo hace en UN milisengundo y suele "laggearse", también he probado dividir el código en varios intervalos, pero sale más lento.

Espero y alguien pueda explicarme acerca de ésto con claridad, saludos y gracias.

[Aijoona]

En los browsers el interprete JS comparte el thread de ejecución* con el motor gráfico, lo cual decanta en que se hace una cosa u otra.
Si vos estás interpretando o ejecutando código JS no vas a renderizar/repaintear nada en la UI y viceversa.

*Puede no cumplirse necesariamente en todos los niveles de ejecución.

Luego tenés las diferentes implementaciones de los browsers tanto del interprete como del motor grafico, de las cuales algunas son más rapidas que otras, con lo cual es lógico que no tengan el mismo rendimiento

Con respecto al setTimeout, si vos estás ejecutando una tarea al momento de ejecutar el contenido del setTimeout inevitablemente se te retrasa (recordemos que no podes ejecutar más de una tarea a la vez). Y a esto sumale que el setTimeout recién se ejecuta cuando el interprete esta libre (es decir, termino las tareas inmediatas).

El siguiente código sirve para entender esto ultimo:

Código Javascript:

// Diferimos la ejecucion en 0ms
setTimeout(function() {
    console.log('DELAYED!');
}, 0);
 
var d = +new Date;
 
// Ocupamos el interprete por medio segundo
while(+new Date - d < 500);
 
// Y luego con un retraso mayor a 500 ms
// "DELAYED!"
 

EDIT:

Te recomiendo leer este articulo, que aclara las cosas un poco mejor que este post.

[IXtremeLT]

Aijoona gracias, estuvo muy bien entendido tu post, y también la publicación que mencionaste que leyéra.
Con razón es más lento usar JavaScript para realizar animaciones que en un lenguaje como C++, C#, Java, etc., además usa un sólo hilo del procesador, básicamente eso hace la gran lentitud al haber muchas ejecuciones.
Saludos!