setTimeout, requestTimeFrame刷新率谁小

Question

最近做一个尽量快的counter，遇到一些疑惑：

1. 为什么setTimeout的刷新率能比requestAnimationFrame高？

2. 除了setTimeout 1微秒以外，还能更快的计数吗？

setTimeout方式以1微秒去计数，数到1000大致花了6.5s

var i = 0;
function loop() {
    if(i == 1000) {
        console.log('end');
    } else {
        doSomething();

    setTimeout(loop, 1);
    }
    
}

function doSomething() {
    document.body.innerHTML = i++;
}

以requestAnimationFrame去数到1000，大致花了16.7s。刷新率大致是1s/60

var i = 0;
function step() {
    if(i == 1000) { // 16717
        console.log('end');
    } else {
        document.body.innerHTML = i++;
        requestAnimationFrame(step);
    }

}
requestAnimationFrame(step);

Answer 1

requestAnimationFrame不需要使用者指定循环间隔时间，浏览器会基于当前页面是否可见、CPU的负荷情况等来自行决定最佳的帧速率，从而更合理地使用CPU。
所以你这么比没什么意义啊，因为你这个doSomething太简单了，如果进行一些复杂的操作有可能会发生阻塞，也就说不清谁快谁慢了不是？

Answer 2

setTimeout设置为1肯定比requestAnimationFrame快，requestAnimationFrame是根据浏览器的设备绘制间隔来决定的。

关于这两个的讨论可以看看张鑫旭的博客