Fiber:是react核心算法的重新实现,执行任务时对任务进行时间分片,执行任务级别更高的fiber纤程。目的是为了快速响应客户,让客户觉得够快,阻塞用户的操作。 在提供用户操作体验上,一般有如下三种处理方式:
- 优化每一个任务,能优化多快就优化多块,压榨CPU性能;
- 快速响应用户的操作,让用户觉得够快;
- 尝试worker多线程。 此处我们说的fiber则采用的就是第二种方式。
React框架内部运行主要分为三步:
- Virtual Dom 层:虚拟DOM;
- Reconciler 层:称为调和,主要负责生命周期,diff算法类。fiber就发生在这一步中;
- Rerender 层:渲染层,根据不同端返回不同页面,例如ReactDom和ReactNative。
接着我们说一下调和层中的fiber工作原理。 一般的js任务在执行起来是无法打断的(包括浏览器也不行),这就造成了当我们对页面进行比较大的调整或者任务时,这个过程只有交给js内部去消化,js执行多久,页面就卡顿多久。而 fiber 则会将任务进行拆分成一个个小的fiber任务,每次在执行任务的时候都会像浏览器发送执行权限,浏览器空闲后就会给与任务的执行权限,并且会设置时长,在此时长内无论一个个fiber是否执行完或者以执行完,我们都会将控制权交还给浏览器,让浏览器重新分配任务。大概过程如下图:
提一下requestIdleCallback API
window.requestIdleCallback(
callback: (dealine: IdleDeadline) => void,
/**
* 超时时间设置
* Immediate(-1) - 这个优先级的任务会同步执行, 或者说要马上执行且不能中断
* UserBlocking(250ms) 这些任务一般是用户交互的结果, 需要即时得到反馈
* Normal (5s) 应对哪些不需要立即感受到的任务,例如网络请求
* Low (10s) 这些任务可以放后,但是最终应该得到执行. 例如分析通知
* Idle (没有超时时间) 一些没有必要做的任务 (e.g. 比如隐藏的内容), 可能会被饿死
*/
option?: {timeout: number}
)
为了避免任务被长期置之不理,我们可以对超时时间进行设置,设置任务的优先级。 fiber成为纤程,但是和进程完全是两码事,fiber也没有并发和多线程这样的概念。fiber只不过是将任务进行时间分片,优先响应优先级比较高的fiber分片,给用户一种响应很快的感受,实际上对整个任务的的优化没那么大。