大家好,我卡颂。

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)在每一帧没有其余工作的闲暇工夫调用
  • setTimeoutpostMessageMessageChannel在渲染之间触发

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'));

以上代码被简化为postTaskevent配置项:

scheduler.postTask(() => import('xxx.js'), {   event: 'myPageHasLoaded'})

总结

优先级调度能够利用在很多畛域,比方:

  • 资源提前、延后申请
  • 第三方资源提早加载

......

能够预感,将来这势必会减少前端编程复杂度。

就像已经,当web利用简单到肯定水平时,呈现了前端框架,开发者不必间接操作DOM

将来,当优先级调度简单到肯定水平时,肯定也会呈现集成解决方案,让开发者不必间接操作优先级

慢着,这不就是React当初在做的事么?

欢送退出人类高质量前端框架钻研群,带飞