Después de la reacción 16, se introdujo la fibra y se refactorizó el algoritmo central. Fue muy gratificante dedicar un tiempo a estudiar e investigar.
Todo el mundo sabe que requestAnimationFrame se usa más en la animación de dibujos de lienzo. Debería haber comparado
requestAnimationFrame y setTimeout (setInterval) antes. RequestAnimationFrame tiene algunos puntos de optimización del rendimiento, como la diferencia después de que la ventana pierde el foco;
El método requestIdleCallback debería ser relativamente desconocido,
https://www.w3.org/TR/requestidlecallback/
requestIdleCallback es también la API básica implementada por React Fiber. Queremos poder responder rápidamente a los usuarios, hacer que los usuarios se sientan lo suficientemente rápidos y no bloquear la interacción del usuario. RequestIdleCallback permite a los desarrolladores realizar trabajos en segundo plano y de baja prioridad en el bucle de eventos principal sin afectar los eventos clave retrasados, como la animación y la respuesta de entrada. . Una vez completada la tarea de marco normal, no supera los 16 ms, lo que indica que hay un exceso de tiempo de inactividad, y la tarea registrada en requestIdleCallback se ejecutará en este momento.
El proceso de ejecución específico es el siguiente: el desarrollador usa el método requestIdleCallback para registrar la tarea correspondiente y le dice al navegador que la prioridad de mi tarea no es alta. Si hay tiempo de inactividad en cada cuadro, la tarea registrada se puede ejecutar. Además, el desarrollador puede pasar el parámetro de tiempo de espera para definir el período de tiempo de espera. Si se alcanza el período de tiempo de espera, el navegador debe ejecutarlo inmediatamente. El método de uso es el siguiente: window.requestIdleCallback (callback, {timeout: 1000} ). Una vez que el navegador termina de ejecutar este método, si no queda tiempo o no hay una próxima tarea ejecutable, React debería devolver el control y también usar requestIdleCallback para solicitar el siguiente segmento de tiempo.
requestIdleCallback (callback) callback recibe la fecha límite predeterminada del parámetro y contiene dos parámetros
- DidTimeout tiempo de espera
- timeRemaining () Cuántos milisegundos quedan en el marco actual
Ejemplo de multitarea en un cuadro
let taskQueue = [
() => {
console.log('task1 start')
console.log('task1 end')
},
() => {
console.log('task2 start')
// sleep(950)
console.log('task2 end')
},
() => {
console.log('task3 start')
console.log('task3 end')
}
]
const performUnitWork = (deadline) => {
// 取出第一个队列中的第一个任务并执行
console.log(`此帧的剩余时间为: ${
deadline.timeRemaining()}`)
taskQueue.shift()()
}
const workloop = (deadline) => {
// 如果此帧剩余时间大于0或者已经到了定义的超时时间（上文定义了timeout时间为1000，到达时间时必须强制执行），且当时存在任务，则直接执行这个任务
// 如果没有剩余时间，则应该放弃执行任务控制权，把执行权交还给浏览器
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && taskQueue.length > 0) {
performUnitWork(deadline)
}
// 如果还有未完成的任务，继续调用requestIdleCallback申请下一个时间片
if (taskQueue.length > 0) {
window.requestIdleCallback(workloop, {
timeout: 1000 })
}
}
requestIdleCallback(workloop, {
timeout: 1000 })
Si el sueño es superior a 16 milisegundos en cada tarea, la tarea se ejecutará en varios marcos;
