如何通过HTML isInputPending API监控输入队列，防止长任务拖慢网页响应？

本文共计967个文字，预计阅读时间需要4分钟。

由于 `isInputPending` 只能在主线程同步调用，且必须在浏览器确定可能有输入待处理的窗口期内才有效——例如在事件回调、requestIdleCallback 回调或 task 的前几毫秒内。一旦你进入一个超过 50ms 的同步计算循环，浏览器很可能已经将输入事件暂存到队列中，但不再将其暴露给 JavaScript 的pending状态。此时，重复调用 `isInputPending` 将会稳定返回 `false`，即使用户正在疯狂敲击键盘。

常见错误是这样写：

function longTask() { for (let i = 0; i < 1e7; i++) { doSomeWork(i); if (navigator.scheduling?.isInputPending?.()) { // ❌ 这里大概率永远不触发 break; } } }

根本原因：浏览器在长循环中不会插入输入检查点，isInputPending() 不是轮询接口，它只反映「当前调用时刻」的瞬时状态，且受 scheduler 优先级策略限制。

正确用法：配合 requestIdleCallback + 显式切片

必须把长任务主动拆成小块，并在每块结束时让出控制权，才能让浏览器有机会分发输入事件并更新 pending 状态。