setTimeout如何设置0ms

通常来说setTimeout的最小时间间隔为4ms（当然，这也由各浏览器实现决定）。但是为何是4ms？如何设置0ms的延时呢？

首先回顾一下宏任务与微任务

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的”线程环境”都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

在此次 tick 中选择最先进入队列的任务(oldest task)，如果有则执行(一次)
检查是否存在 Microtasks，如果存在则不停地执行，直至清空 Microtasks Queue
更新 render
主线程重复执行上述步骤

在上诉tick的基础上需要了解几点：

JS分为同步任务和异步任务
同步任务都在主线程上执行，形成一个执行栈
主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

宏任务

script(整体代码)
setTimeout
setInterval
setImmediate
requestAnimationFrame
I/O
UI交互事件
postMessage
MessageChannel

微任务

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)

4ms的故事

实现0ms

主要参考：https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful

从理论上来说，由于postMessage的实现没有被浏览器引擎限制速度，一定是比 setTimeout 要快的。但空口无凭，咱们用数据说话。测试页

setZeroTimeout实现方式

(function () {
  var timeouts = [];
  var messageName = 'zero-timeout-message';

  // 保持 setTimeout 的形态，只接受单个函数的参数，延迟始终为 0。
  function setZeroTimeout(fn) {
    timeouts.push(fn);
    window.postMessage(messageName, '*');
  }

  function handleMessage(event) {
    if (event.source == window && event.data == messageName) {
      event.stopPropagation();
      if (timeouts.length > 0) {
        var fn = timeouts.shift();
        fn();
      }
    }
  }

  window.addEventListener('message', handleMessage, true);

  // 把 API 添加到 window 对象上
  window.setZeroTimeout = setZeroTimeout;
})();

知乎写的更全，直接拿过来了：https://zhuanlan.zhihu.com/p/379637806

MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout