使用 requestIdleCallback 优化埋点数据上报

一、什么是 requestIdleCallback？

requestIdleCallback 接收回调函数，在浏览器的空闲时段调用，这样既不阻塞关键性事件，又能保证低优任务的时效性。

二、使用 requestIdleCallback

可以像使用 setTimeout 一样使用 requestIdleCallback，区别是 requestIdleCallback 中的回调函数可以接收当前剩余空闲时间，以便合理利用这段时间来处理队列任务。一般会在回调函数内再次调用 requestIdleCallback，以便在下次空闲时间段继续执行剩余的任务。

# 按序调用
requestIdleCallback(() => {console.log(1)})
requestIdleCallback(() => {console.log(2)})
requestIdleCallback(() => {console.log(3)})
requestIdleCallback(() => {console.log(4)})
requestIdleCallback(() => {console.log(5)})
// 1 2 3 4 5

# 队列
const tasks = [0, 1, 2, 3, 4]
function doLowProMissions (IdleDeadline) {
    // 空闲时间内尽量多执行任务
    while (IdleDeadline.timeRemaining() && tasks.length) {
        const num = tasks.shift()
        console.log('执行任务：', num)
    }
    // 剩余任务下一个空闲段执行
    if (tasks.length) requestIdleCallback(doLowProMissions)
}
requestIdleCallback(doLowProMissions)
// 执行任务： 0
// ...
// 执行任务： 4

三、案例：优化埋点数据上报

// 定义日志上报队列
const reportTasks = []
// 按需填充日志队列
reportTasks.push({cmd: 413, action: 'show'})
reportTasks.push({cmd: 322, action: 'click'})
// 回调函数
function doLowPriorityReport (IdleDeadline) {
    // 空闲时间内尽量多执行任务
    while (IdleDeadline.timeRemaining() && reportTasks.length) {
        const log = reportTasks.shift()
        console.log('上报数据：', log)
    }
    // 剩余任务下一个空闲段执行
    if (reportTasks.length) requestIdleCallback(doLowPriorityReport)
}
requestIdleCallback(doLowPriorityReport)

四、参考

使用 fingerprintjs2 获取用户指纹