网站开发安全管理,北京赛车网站开发河南,大型展厅设计公司,传媒网站设计React 任务池
不同的fiber任务有不同的优先级#xff0c;为了用户体验#xff0c;React需要先处理优先级高的任务。 为了存储这些任务#xff0c;React中有两个任务池#xff1a;
// Tasks are stored on a min heap
var taskQueue []; // 存储立即要执行的任务
var tim…React 任务池
不同的fiber任务有不同的优先级为了用户体验React需要先处理优先级高的任务。 为了存储这些任务React中有两个任务池
// Tasks are stored on a min heap
var taskQueue []; // 存储立即要执行的任务
var timerQueue []; // 存储可以延迟执行的任务源码中任务的初始结构
var newTask {id: taskIdCounter, // 标记任务idcallback, // 回调函数priorityLevel,startTime, // 任务开始时间时间点expirationTime, // 过期时间时间点sortIndex: -1, // 排序取值来自过期时间因此值越小优先级越高
};React 中一旦来了新任务就会先用currentTime记录当前时间performance.now()或Date.now()如果任务中有delay参数那么任务开始执行时间startTime currentTime delay。接下来通过startTime currentTime 如果成立证明任务是可以延期的那么任务进入timerQueue否则进入taskQueue。
React中任务调度 如果找到优先级最高的任务 以taskQueue为例 它是动态的任务池。Array.sort对它排序可行但不是最优方案每次sort平均时间复杂度是nlog(n)。可以考虑小顶堆。 为什么不是大顶堆呢因为taskQueue的newTask中的排序用的是sortIndex这个值取自过期时间expirationTime意味着优先级越高的任务越需要立马执行那么过期时间自然就越小了优先级越高过期时间越小。 当然也有可能两个任务的过期时间一样那这时就要看谁先进的任务池了也就是newTask中的id每次来了新任务id都会加1。 所以React源码中任务比价优先级的函数如下 function compare(a,b){const diff a.sortIndex - b.sortIndex;return diff ! 0 ? diff : a.id - b.id;
}用到最小堆就是把taskQueue做成最小堆的数据结构然后在执行任务的时候取最小堆的最小任务如果任务处理完毕那么需要把这个任务从taskQueue中删除并重新调整剩下的任务池依然保证它是最小堆的数据结构。当然往taskQueue中插入新任务的时候也要调整taskQueue保证新的任务池仍是最小堆。
最小堆
