1. 程式人生 > >setTimeout與setInterval效能比較

setTimeout與setInterval效能比較

談到動畫,就避不開setTimeout與setInterval,都能實現動畫效果,但對我來說,只有需要手動控制幀的速率、頻率時,我才會優先選擇setTimeout,因為我知道,論效能,setTimeout略遜於setInterval。

造成效能差異的原因,主要有兩點:
1. setTimemout迭代式方法的呼叫方式,壓棧、出棧都不是輕量級的任務;
2. setTimeout自身消耗了部分效能;

為了驗證自己的想法,特意用Chrome時間線工具進行了監測:
從下圖可以看出,setInterval只執行一次,並且定時器的ID始終不變,從執行堆疊看,後續的所有任務都全由呼叫的函式(move)承擔,所以自身消耗的時間較短,其他任務消耗的時間較多,21us VS 610us。
setInterval的時間線分析


從setTimeout的時間線可以看出,setTimeout需要執行多次,並且每次執行,定時器的執行ID都會生成新的ID,從執行堆疊看,setTimeout的相關指令還會執行兩次,所以自身消耗的時間更多,見下圖。
setTimeout的時間線分析

測試程式碼

var item = $('#imgHy'),
    count = 10;
function move() {
    item.css({
        "margin-top" : 0 - count
    })
    if(count < 500) {
        count = count + 10;
        //  啟用setInterval時,登出此程式碼
setTimeout(move, 10) } else { // 啟用setTimeout時,登出此程式碼 //clearInterval(timer) } } // 啟用setInterval時,登出此程式碼 setTimeout(move, 10) // 啟用setTimeout時,登出此程式碼 //var timer = setInterval(move, 10)