Un problema típico cuando desarrollas webs con mucho javascript es tener que ejecutar ciertas funciones (precarga, envío de estadísticas, actualizar los datos almacenados en local,…) pero que esta ejecución ocurra cuando la carga de la web haya terminado. Y con carga no me refiero únicamente a que haya terminado de cargar el documentos, si no de inicia izar todas las librerías para no afectar al rendimiento de la web. Para ello existe una solución en los navegadores: RequestIdleCallback
RequestIdleCallback lo que hace es encolar las funciones que se le pasan y llamarlas cuando el el navegador tenga poca carga de trabajo, así se mejora el rendimiento de la web y la experiencia de usuario. Su uso es muy sencillo:
requestIdleCallback(nonEssentialFunction);
Donde nonEssentialFunction es la función a la que se llamará cuando el navegador quede inactivo. La función recibe un parámetro un objeto deadline que tiene dos propiedades que podemos usar para planificar la ejecución de nuestro código:
- timeRemaining(), una función que devuelve cuanto tiempo tenemos para ejecutar nuestro código.
- didTimeout, que indica si el tiempo fijado como limite para ejecutar nuestra función (más adelante lo veremos) ha expirado. Si su valor es true, timeRemaining() devolverá 0.
Es decir que consultando deadline.timeRemaining() podemos saber si tenemos tiempo suficiente para ejecutar nuestro código. Hay que decir que es un valor orientativo y que si realmente nuestro código tarda más tiempo en terminar no pasara nada.
Veamos el ejemplo más simple, ejecutar una solo función:
function nonEssentialFunction(deadline) {
task();
}
Si tenemos que realizar varias tareas podemos ir haciéndolas de una en una hasta que se termine el tiempo. na vez terminado el tiempo no se han acabado todas las tareas se puede volver a llamar a requestIdleCallback:
function nonEssentialFunction(deadline) {
while (deadline.timeRemaining() > 0){ //mientras quede tiempo
task(n); //ejecutar tarea n
n--;
}
if(n > 0) { //si aun quedan tareas se encola la función otra vez
requestIdleCallback(nonEssentialFunction);
}
}
Veamos un ejemplo completo:
<html>
<script>
function nonEssentialFunction(deadline) {
while (deadline.timeRemaining() > 0)
console.log(deadline.timeRemaining());
}
//Se prepara la función cuando este libre el procesador
requestIdleCallback(nonEssentialFunction);
</script>
<body>
</body>
<script>
//esto se ejecuta antes que nonEssentialFunction
for(let i = 0; i < 100; i++){
console.log(i);
}
</script>
</html>
Poner un limite de tiempo
Puede ser que no queramos que la función que queremos llamar se retrase demasiado, para ellos podemos pasar otro parámetro que establece el tiempo de expiación, pasado ese tiempo se lanza la ejecución de la función:
requestIdleCallback(nonEssentialFunction, { timeout: 2000 });
El tiempo viene expresado en milisegundos.
Cuando una función es ejecuta porque expira el tiempo fijado en timeout se puede ver en que deadline.didTimeout es true.
function nonEssentialFunction(deadline) {
while (deadline.timeRemaining() > 0 || deadline.didTimeout )
console.log(deadline.timeRemaining());
}
requestIdleCallback(nonEssentialFunction, {timeout, 3000});
Construyendo a Chispas 