El momento de volver a dibujar el navegador
function demo() {
const now = Date.now();
document.body.style.backgroundColor = 'red';
while(Date.now() - now <= 2000) {
continue; }
document.body.style.backgroundColor = 'blue';
}
Cuando no se completa la tarea de la cola de macros actual, la operación de convertir el fondo en rojo no se volverá a dibujar, por lo que el fondo aquí solo se volverá azul directamente.
Procesamiento asincrónico de eventos de adición
function addAsync(a, b) {
return new Promise((resolve, reject) => {
resolve(a + b);
})
}
const addSum = async (arrs) => {
let asyns = [];
while (arrs.length >= 2) {
asyns.push(addAsync(arrs[0], arrs[1]));
arrs.splice(0, 2);
}
arrs.length && asyns.push(arrs[0]);
arrs = await Promise.all(asyns);
if (arrs.length === 1) return arrs[0];
else return addSum(arrs);
}
let arr = [];
for (let i = 1; i < 100; i++) arr.push(i);
addSum(arr).then(sum => console.log(sum));
El entrevistador no está muy satisfecho con la respuesta. Es necesario agregar un mecanismo de carreras a la Promesa y se define una nueva matriz. En la devolución de llamada de cada Promesa, se confirma si el número en la matriz es mayor que 2. Definir un contador para registrar el número de promesas que se están ejecutando. Si el número en la matriz es 1 y todas las promesas se ejecutan, se devolverá el resultado.
requestAnimationFrame 与 setTimeout
requestAnimationFrame
Nueva api HTML5, similar a setTimeout timer. Un método del navegador window.requestAnimationFrame del objeto de ventana (por lo que solo se puede usar en el navegador) proporciona API específicamente para la animación, lo que permite la animación dom y la animación del lienzo. animación svg. Existe un mecanismo de actualización unificado para las animaciones webGL.
Características:
1. Vuelva a dibujar las páginas web por cuadro. Este método le dice al navegador que quiere ejecutar la animación y solicita al navegador que llame a la función de entrega para actualizar la animación antes del próximo redibujo.
2. El sistema determina el mecanismo de ejecución de la función de devolución de llamada. El navegador optimizará automáticamente la llamada al método en tiempo de ejecución.
3. La pantalla tiene una frecuencia de actualización fija (60 Hz o 75 Hz), es decir, solo se puede volver a dibujar 60 o 75 veces por segundo como máximo. La idea básica de requestAnimationFrame mantiene la frecuencia de redibujo de la página sincronizada con esta actualización frecuencia, como las pantallas de monitor. La frecuencia de actualización es de 60 Hz. Con la API requestAnimationFrame, la función de devolución de llamada se ejecutará cada 1000 ms / 60 ≈ 16,7 ms; si la frecuencia de actualización de la pantalla es de 75 Hz, la función de devolución de llamada se ejecutará cada 1000 ms / 75 ≈ 13,3 ms.
4. El intervalo de tiempo de redibujo o reflujo de la página causado por la llamada a la función de devolución de llamada a través de requestAnimationFrame es el mismo que el intervalo de tiempo de actualización de la pantalla. Por lo tanto, requestAnimationFrame no necesita pasar el intervalo de tiempo como setTimeout, pero el navegador obtiene y usa la frecuencia de actualización de la pantalla a través del sistema.
setTimeout
Cambie continuamente la imagen estableciendo un intervalo de tiempo para lograr un efecto de animación. Este método aparecerá atascado y con fluctuaciones en algunas máquinas de gama baja. Generalmente, hay dos razones para este fenómeno:
1. El tiempo de ejecución de setTimeout no es seguro. La frecuencia de actualización se ve afectada por la resolución y el tamaño de la pantalla. La frecuencia de actualización de la pantalla de diferentes dispositivos puede ser diferente.
2.setTimeout solo puede establecer un intervalo de tiempo fijo. Este tiempo y el intervalo de actualización de la pantalla pueden ser diferentes.
Las dos situaciones anteriores harán que el ritmo de ejecución de setTimeout y el ritmo de actualización de la pantalla sean inconsistentes, lo que provocará una caída de fotogramas. La mayor ventaja de usar requestAnimationFrame para ejecutar la animación es garantizar que la función de devolución de llamada se ejecute solo una vez en cada intervalo de actualización de la pantalla, de modo que no cause pérdida de cuadros y la animación no se congele.
La diferencia entre setTimeout y requestAnimationFrame
- Nivel de motor: setTimeout pertenece al motor JS, con sondeo de eventos y colas de eventos.
requestAnimationFrame pertenece al motor GUI, que ocurre en la parte de rediseño y reordenamiento del proceso de renderizado, que es consistente con la resolución de la computadora. - Nivel de rendimiento: cuando la página está oculta o minimizada, el temporizador setTimeout sigue realizando tareas de animación en segundo plano.
Cuando la página está en un estado inactivo, el sistema suspenderá la tarea de actualización de la pantalla de la página y requestAnimationFrame también se detendrá. - Nivel de aplicación: use setTimeout, este mecanismo de tiempo para hacer animaciones, para simular la actualización de la página en un momento fijo.
requestAnimationFrame es una API proporcionada por el navegador específicamente para la animación. El navegador optimizará automáticamente la llamada del método durante el tiempo de ejecución, lo que puede ahorrar efectivamente la sobrecarga de la CPU en un entorno específico.