天天看点

setTimeout与setInterval性能比较

谈到动画,就避不开setTimeout与setInterval,都能实现动画效果,但对我来说,只有需要手动控制帧的速率、频率时,我才会优先选择setTimeout,因为我知道,论性能,setTimeout略逊于setInterval。

造成性能差异的原因,主要有两点:

1. setTimemout迭代式方法的调用方式,压栈、出栈都不是轻量级的任务;

2. setTimeout自身消耗了部分性能;

为了验证自己的想法,特意用Chrome时间线工具进行了监测:

从下图可以看出,setInterval只执行一次,并且定时器的ID始终不变,从执行堆栈看,后续的所有任务都全由调用的函数(move)承担,所以自身消耗的时间较短,其他任务消耗的时间较多,21us VS 610us。

setTimeout与setInterval性能比较

从setTimeout的时间线可以看出,setTimeout需要执行多次,并且每次执行,定时器的执行ID都会生成新的ID,从执行堆栈看,setTimeout的相关指令还会执行两次,所以自身消耗的时间更多,见下图。

setTimeout与setInterval性能比较

测试代码

var item = $('#imgHy'),
    count = ;
function move() {
    item.css({
        "margin-top" :  - count
    })
    if(count < ) {
        count = count + ;
        //  启用setInterval时,注销此代码
        setTimeout(move, )
    } else {
        //  启用setTimeout时,注销此代码
        //clearInterval(timer)
    }
}
//  启用setInterval时,注销此代码
setTimeout(move, )
//  启用setTimeout时,注销此代码
//var timer = setInterval(move, 10)
           

继续阅读