postTask：React的殺手锏被瀏覽器原生實現(xiàn)了？
大家好，我卡頌。
React這幾年一直在完善的并發(fā)模式主要由以下兩部分組成：
基于 fiber實現(xiàn)的可中斷更新的架構(gòu)基于調(diào)度器的優(yōu)先級調(diào)度
可以說，從16年開始重構(gòu)fiber架構(gòu)到今年底（或明年初）React18發(fā)布正式版，這期間React團隊大部分工作都是圍繞這兩點展開的。
如果現(xiàn)在告訴你，React嘔心瀝血多年實現(xiàn)的優(yōu)先級調(diào)度，瀏覽器原生就支持，會不會很驚訝？
文章參考Building a Faster Web Experience with the postTask Scheduler。
什么是優(yōu)先級調(diào)度
假設(shè)，我們有個記錄日志的腳本需要在頁面初始化后執(zhí)行：
initCriticalTracking();
調(diào)用棧火炬圖如下：
scheduler.postTask(() => initCriticalTracking());
Chrome實現(xiàn)的優(yōu)先級調(diào)度API。scheduler.postTask屬于試驗功能，需要在 chrome://flags 中打開 #enable-experimental-web-platform-features
之前是如何實現(xiàn)優(yōu)先級調(diào)度的
scheduler.postTask出現(xiàn)之前，通常使用瀏覽器提供的會在不同階段調(diào)用的API模擬優(yōu)先級調(diào)度，比如：requestAnimationFrame（簡稱rAF）一般用來處理動畫，會在瀏覽器渲染前觸發(fā)requestIdleCallback（簡稱rIC）在每一幀沒有其他任務的空閑時間調(diào)用setTimeout、postMessage、MessageChannel在渲染之間觸發(fā)
React使用MessageChannel實現(xiàn)優(yōu)先級調(diào)度，setTimeout作為降級方案。API畢竟都有本職工作。用他們實現(xiàn)的優(yōu)先級調(diào)度比較粗糙。
postTask Scheduler誕生了。postTask Scheduler的使用
scheduler.postTask有3種可選優(yōu)先級:
// 默認優(yōu)先級
scheduler.postTask(() => console.log('Hello, postTask'));
// 調(diào)用后延遲1秒執(zhí)行，優(yōu)先級最低
scheduler.postTask(() => console.log('Hello, postTask'), {
delay: 1000,
priority: 'background',
});
postTask建立在AbortSignal API上，所以我們可以取消尚在排隊還未執(zhí)行的回調(diào)函數(shù)。TaskController API控制：const controller = new TaskController('background');
window.addEventListener('beforeunload', () => controller.abort());
scheduler.postTask(() => console.log('Hello, postTask'), {
signal: controller.signal,
});
schedule.wait方法可以讓我們輕松的等待某一時機后再執(zhí)行任務。xxx.js：async function loadxxx() {
// 等待事件被派發(fā)
await scheduler.wait('myPageHasLoaded');
return import('xxx.js');
}
// 頁面加載后派發(fā)事件
window.dispatchEvent(new CustomEvent('myPageHasLoaded'));
postTask的event配置項：scheduler.postTask(() => import('xxx.js'), {
event: 'myPageHasLoaded'
})
總結(jié)
資源提前、延后請求 第三方資源延遲加載
web應用復雜到一定程度時，出現(xiàn)了前端框架，開發(fā)者不用直接操作DOM。優(yōu)先級。React現(xiàn)在在做的事么？
評論
圖片
表情