首页 » 前端 » 正文

requestIdleCallback

| 前端 | | 暂无评论 | 977 views

之所以单独拿出来说这，其实是给自己一个提醒。前两天去了“汽车某某”的公司面试，一开始问我是否知道RAF这个简称，是做性能优化的时候用到的，我说是requestAnimationFrame吗，巴拉巴拉说了一些，然后问我RIF，我猜测跟RAF同类型吧，但是我没用过。回来后我查了一下，其实是这个，so it is“RIC”
window.requestIdleCallback()会在浏览器空闲时期依次调用函数， 这就可以让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这样延迟敏感的事件产生影响。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。
那么既然跟事件循环有关，我自己做了一个测试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
window.requestAnimationFrame(function () {
console.log('requestAnimationFrame+++')
})
console.log('111')
setTimeout(function () {
    console.log('tiem out ')
},1000)
new Promise((resove,reject)=>{
    console.log('promise');
    resove('resove－1')
}).then(v=>{
    console.log(v)
}).then(v=>{
    console.log('resove－2');
})
 
var int = setInterval(function () {
    console.log('setInterval＝＝＝')
},1000)
window.requestIdleCallback(function () {
    console.log('requestIdleCallback＝＝＝')
})
/*process.nextTick(function () {
    console.log('nextTick＝＝＝')
})*/
console.log('222')
 
setTimeout(function () {
    clearInterval(int)
    console.log('clear interval')
},5000)

浏览器下的结果

1
2
3
4
5
6
7
8
9
10
111
promise
222
resove－1
resove－2
requestAnimationFrame+++
requestIdleCallback＝＝＝
tiem out
setInterval＝＝＝  （5）
clear interval

当然了，你看到我用了nexTick，因为是需要node执行的

1
2
3
4
5
6
7
8
9
10
11
12
111
promise
222
nextTick＝＝＝
resove－1
resove－2
tiem out
setInterval＝＝＝
setInterval＝＝＝
setInterval＝＝＝
setInterval＝＝＝
clear interval

其实是想知道 window中的requestIdleCallback和node中的nextTick谁先谁后。

所以nextTick是在所有主程序执行后立即执行的，requestIdleCallback在主程序可微观任务执行完后执行的。

吐槽：

面试的时候，感觉面试官咄咄逼人，中间不知道的问题，也不乐意给解释；

面试结束后，并没有让我问问题，即便我没过，但是我有提问的权利；

就像一开始提到的，问题都问错了，主要是我觉得拿简称判断能力有点偏颇，至于一些冷门的知识点就不说了，感觉面试官没有摆正自己的岗位诉求，也不善于发掘别人的优势，呵呵～