为什么setTimeout如此不具有性能

Why is setTimeout so non-performant

本文关键字：性能 setTimeout 为什么      更新时间：2023-09-26

为什么setTimeout如此不具有性能？

我有100个任务，每个任务需要1毫秒。我将它们与requestAnimationFrame交织在一起，后者应该在16ms左右。因此，我希望每个rAF都能执行14-16个这样的任务。相反，我看到每个rAF有1-3个。

var count = 0;
var limit = 100;
function doSomething1ms() {
  var start = performance.now();
  while (performance.now() - start < 1);
  log("finished: " + count);
  if (++count < limit) {
    setTimeout(doSomething1ms, 0);
  }
}
doSomething1ms();
  
var rafCount = 100;
function raf() {
  log("raf");
  --rafCount;
  if (rafCount) {
    requestAnimationFrame(raf);
  }
};
requestAnimationFrame(raf);
log("start------------------------");
function log(msg) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(msg));
  document.body.appendChild(div);
}

基于bergi的评论和链接，setTimeout的限制为4ms

使用postMessage，我每个rAF可以得到7-10个调用，虽然还差16个，但效果更好。

var count = 0;
var limit = 100;
function doSomething1ms() {
  var start = performance.now();
  while (performance.now() - start < 1);
  log("finished: " + count);
  queueNext();
}
window.addEventListener('message', doSomething1ms);
function queueNext() {
  if (++count < limit) {
    window.postMessage({}, "*", []);
  }
}
queueNext();
  
var rafCount = 100;
function raf() {
  log("raf");
  --rafCount;
  if (rafCount) {
    requestAnimationFrame(raf);
  }
};
requestAnimationFrame(raf);
log("start------------------------");
function log(msg) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(msg));
  document.body.appendChild(div);
}

相关文章：