使用 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 获取用户指纹

发表评论

电子邮件地址不会被公开。 必填项已用*标注