fiber
fiber 本身是一个数据结构和执行单元
数据结构
tag fiber 节点类型
sibilings 兄弟节点
child 第一个子结点
return 父级
执行单元
1.React 向浏览器请求调度 2.浏览器空闲时会交给 React
3.React 判别是否空闲和未执行任务，否则交还给浏览器
raf
raf 浏览器绘画的 api，它要求浏览器在下一帧的时候调用回调函数渲染动画内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| let dom = document.querySelector(".div");
let btn = document.querySelector(".btn");
let start;
let arr = [];
const process = () => {
dom.style.width = dom.offsetWidth + 1 + "px";
if (dom.style.width < 100) {
let time = +new Date();
arr.push({ time: time - start });
start = time;
requestAnimationFrame(process);
} else {
console.log("finish");
}
};
btn.onclick = () => {
dom.style.width = 0;
let time = +new Date();
start = time;
requestAnimationFrame(progress);
};
|
requestIdleCallBack
能够使代码块在浏览器分配低任务执行,以保证动画计时器正常执行
timeRemaining 是否有空闲时间
dealTime 是否还有执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| const work = [
() => {
console.log("A1");
},
() => {
console.log("A2");
},
() => {
console.log("B1");
},
];
requestIdleCallBack(execJob);
const execJob = (time) => {
while (time.timeRemaining() > 0 && work.length > 0) {
runJob();
}
};
const runJob = () => {
let job = work.shift();
job();
};
|