解析浏览器渲染的“一帧”——事件循环、帧动画、空闲回调

最新推荐文章于 2024-12-06 13:09:02 发布

cicistream

最新推荐文章于 2024-12-06 13:09:02 发布

阅读量4.2k

点赞数 2

分类专栏：浏览器文章标签：浏览器 eventloop

本文链接：https://blog.csdn.net/sinat_31231955/article/details/116425035

版权

本文介绍了浏览器的刷新率与一帧的概念，详细讲解了事件循环（eventLoop）中的宏任务和微任务，以及requestAnimationFrame和requestIdleCallback的工作原理。浏览器如何处理任务队列以避免页面卡顿，如时间切片技术在React中的应用，帮助理解优化前端性能的关键点。

摘要由CSDN通过智能技术生成

概述

一般浏览器的刷新率为60HZ，即1秒钟刷新60次。1000ms / 60hz = 16.6 ，大概每过16.6ms浏览器会渲染一帧画面。

在这段时间内，浏览器大体会做两件事：task与render。

task被称为宏任务，包括 setTimeout，setInterval，setImmediate，postMessage，requestAnimationFrame，I/O，DOM 事件 等。

render是指渲染页面。

eventLoop

宏任务事件循环：

将新产生的task插入不同task queue中。

task按优先级被划分到不同的task queue中。

比如：为了及时响应用户交互，浏览器会为鼠标键盘（Mouse、Key）事件所在task queue分配3/4优先权。
按优先级从某个task queue中选择一个task作为本次要执行的task。

task执行过程中如果调用 Promise、MutationObserver、process.nextTick 会将其作为微任务保存在microTask queue中。

每当执行完task，在执行下一个task前，都需要检查 microTask queue，执行并清空里面的microTask。在当前的微任务没有执行完成时，是不会执行下一个宏任务的。

一个🌰：

setTimeout(() => console.log('timeout'));
Promise.resolve().then(() => {
   
    console.log('promise1');
    Promise.resolve().then(() =>

最低0.47元/天解锁文章

解析浏览器渲染的“一帧”——事件循环、帧动画、空闲回调

目录

概述

eventLoop