无需登录 数据私有 本地保存

requestIdleCallback 任务调度演示 - 空闲时间利用

68
0
0
0

术语表与概念解析

requestIdleCallback (rIC)

浏览器提供的原生 API,用于在浏览器空闲时段执行低优先级任务。调用该方法时需要传入一个回调函数,浏览器会在主线程空闲时调用此回调,并传入一个 IdleDeadline 对象,其中包含剩余空闲时间等信息。该 API 是性能优化的重要工具,适用于不紧急的后台处理工作。

requestAnimationFrame (rAF)

浏览器提供的原生 API,用于在下一次重绘之前执行动画或视觉更新相关的回调。与 requestIdleCallback 不同,rAF 的执行时机与浏览器的渲染周期紧密绑定,因此更适合处理需要与画面同步的任务。在选择使用哪个 API 时,应根据任务的性质和时效性需求来决定。

IdleDeadline

requestIdleCallback 回调函数接收到的参数对象,包含两个关键属性:timeRemaining() 方法返回当前空闲时段的剩余毫秒数,didTimeout 布尔值指示该回调是否因超时而被强制调用。开发者可以通过这些信息决定是否继续处理任务或将其推迟到下一次空闲时段。

主线程 (Main Thread)

浏览器中负责处理 JavaScript 执行、DOM 操作、样式计算、布局、绘制等核心工作的单线程。主线程的繁忙程度直接影响页面的响应速度和用户体验。所有用户交互事件、网络回调、定时器回调等都在主线程上排队执行,因此合理安排主线程的工作负载至关重要。

空闲时段 (Idle Period)

主线程在完成当前帧的所有工作(包括渲染、事件处理等)后,到下一帧开始之前的时间窗口。requestIdleCallback 的回调函数仅在这些空闲时段中被调度执行。空闲时段的长短取决于页面的复杂度和当前的交互状态,可能是几毫秒到几十毫秒不等。

超时 (Timeout)

requestIdleCallback 的可选参数,指定一个毫秒值。如果浏览器在该时间内未能提供空闲时段,回调函数将被强制执行,此时 IdleDeadline 对象的 didTimeout 属性为 true。合理设置 timeout 可以确保有时效性要求的任务不会被无限期延迟。

事件循环 (Event Loop)

JavaScript 运行时的核心机制,负责协调代码执行、事件处理、渲染更新等任务。事件循环不断地从任务队列中取出任务执行,每完成一个任务后检查是否需要进行渲染更新。理解事件循环的工作原理有助于开发者编写高性能、无阻塞的代码。

长任务 (Long Task)

执行时间超过 50 毫秒的 JavaScript 任务。长任务会阻塞主线程,导致页面无法响应用户输入、动画卡顿等问题。使用 requestIdleCallback 将后台任务推迟到空闲时段执行,可以有效避免产生长任务,提升页面的流畅度。