共计 2206 个字符，预计需要花费 6 分钟才能阅读完成。
大家好，我卡颂。
React这几年始终在欠缺的 并发模式 次要由以下两局部组成：
- 基于
fiber实现的可中断更新的架构 - 基于调度器的优先级调度
能够说，从 16 年开始重构 fiber 架构到今年底（或明年初）React18公布正式版，这期间 React 团队大部分工作都是围绕这两点开展的。
如果当初通知你，React醉生梦死多年实现的 优先级调度，浏览器原生就反对，会不会很诧异？
文章参考 Building a Faster Web Experience with the postTask Scheduler。
什么是优先级调度
假如，咱们有个 记录日志 的脚本须要在页面初始化后执行：
initCriticalTracking();调用栈火炬图如下：
能够看到，这是个执行了 249.08ms 的长工作，在执行期间浏览器会掉帧（体现为：浏览器卡顿）。
当初，咱们将其包裹在 优先级调度函数 scheduler.postTask的回调函数中：
scheduler.postTask(() => initCriticalTracking());长工作被合成为多个短工作：
在每个工作之间浏览器有机会重排、重绘，缩小了掉帧的可能性。
这种 依据工作优先级将工作拆解，调配执行工夫的技术 ，就是 优先级调度。
scheduler.postTask 是 Chrome 实现的 优先级调度 API。
scheduler.postTask 属于试验性能，须要在 chrome://flags 中关上 #enable-experimental-web-platform-features
之前是如何实现优先级调度的
在 scheduler.postTask 呈现之前，通常应用浏览器提供的 会在不同阶段调用的 API模仿 优先级调度，比方：
requestAnimationFrame（简称rAF）个别用来解决动画，会在浏览器渲染前触发requestIdleCallback（简称rIC）在每一帧没有其余工作的闲暇工夫调用setTimeout、postMessage、MessageChannel在渲染之间触发
React应用 MessageChannel 实现优先级调度，setTimeout作为降级计划。
然而，这些 API 毕竟都有本职工作。用他们实现的 优先级调度 比拟毛糙。
基于此起因，postTask Scheduler诞生了。
postTask Scheduler 的应用
scheduler.postTask有 3 种可选优先级：
| 优先级 | 形容 | polyfill 实现 |
|---|---|---|
| user-blocking | 最高优先级，可能会阻塞用户交互 | 应用 MessageChannel 调度工作，setTimeout 作为降级计划 |
| user-visible | 第二优先级，对用户可见，但不会阻塞用户交互。比方：渲染第二屏内容。这是默认优先级 | 在 user-blocking 实现的根底上通过优先级队列管制 |
| background | 最低优先级，通常执行不紧急任务，例如记录日志 | 应用 rIC 实现，setTimeout(0)作为降级计划 |
应用形式很简略，通过以下形式注册的回调函数会以 默认优先级 调度：
// 默认优先级
scheduler.postTask(() => console.log('Hello, postTask'));你也能够指定优先级与执行提早：
// 调用后提早 1 秒执行，优先级最低
scheduler.postTask(() => console.log('Hello, postTask'), {
delay: 1000,
priority: 'background',
});postTask建设在 AbortSignal API 上，所以咱们能够勾销尚在排队还未执行的回调函数。
通过应用 TaskController API 管制：
const controller = new TaskController('background');
window.addEventListener('beforeunload', () => controller.abort());
scheduler.postTask(() => console.log('Hello, postTask'), {signal: controller.signal,});同时，实验性的 schedule.wait 办法能够让咱们轻松的期待某一机会后再执行工作。
比方，咱们能够在页面加载实现后异步加载xxx.js：
async function loadxxx() {
// 期待事件被派发
await scheduler.wait('myPageHasLoaded');
return import('xxx.js');
}
// 页面加载后派发事件
window.dispatchEvent(new CustomEvent('myPageHasLoaded'));以上代码被简化为 postTask 的event配置项：
scheduler.postTask(() => import('xxx.js'), {event: 'myPageHasLoaded'})总结
优先级调度 能够利用在很多畛域，比方：
- 资源提前、延后申请
- 第三方资源提早加载
……
能够预感，将来这势必会减少前端编程复杂度。
就像已经，当 web 利用简单到肯定水平时，呈现了前端框架，开发者不必间接操作DOM。
将来，当 优先级调度 简单到肯定水平时，肯定也会呈现集成解决方案，让开发者不必间接操作 优先级。
慢着，这不就是 React 当初在做的事么？
欢送退出人类高质量前端框架钻研群，带飞