setTimeout與setInterval效能比較
阿新 • • 發佈:2019-01-29
談到動畫,就避不開setTimeout與setInterval,都能實現動畫效果,但對我來說,只有需要手動控制幀的速率、頻率時,我才會優先選擇setTimeout,因為我知道,論效能,setTimeout略遜於setInterval。
造成效能差異的原因,主要有兩點:
1. setTimemout迭代式方法的呼叫方式,壓棧、出棧都不是輕量級的任務;
2. setTimeout自身消耗了部分效能;
為了驗證自己的想法,特意用Chrome時間線工具進行了監測:
從下圖可以看出,setInterval只執行一次,並且定時器的ID始終不變,從執行堆疊看,後續的所有任務都全由呼叫的函式(move)承擔,所以自身消耗的時間較短,其他任務消耗的時間較多,21us VS 610us。
從setTimeout的時間線可以看出,setTimeout需要執行多次,並且每次執行,定時器的執行ID都會生成新的ID,從執行堆疊看,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)