为什么 setTimeout 如此低效

Question

为什么 setTimeout 如此低效？

我有 100 个任务，每个任务需要 1 毫秒。我将它们与 requestAnimationFrame 交织在一起，它应该在 16 毫秒左右。因此，我希望看到每个 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);
}

Answer 1

根据 bergi 的评论和 link setTimeout 的限制为 4 毫秒

使用 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);
}

为什么 setTimeout 如此低效

Why is setTimeout so non-performant

javascript

settimeout

dom-events