p;以及DOM变动基于MutationObserver （变动观测器）同步运行（下一节详细介绍）。它作为一个微任务延迟直到步骤2执行以后才做出反应。这个延迟已经在Promise.resolve().then(reaction) 进行了对象转换，并且它将通过变动观测器自动运行。

步骤2

来自开发者的代码（任务）运行完成。微任务由NX开始执行所注册。因为它们是微任务，所以按序执行。注意，我们仍然在同一个滴答循环中。

步骤3

开发者通过 requestAnimationFrame(hook) 通知NX运行钩子。这可能在滴答循环后发生。重要的是，钩子运行在下一次绘制之前和所有数据操作之后，并且DOM和CSS改变都已经完成。

步骤4

浏览器绘制下一个视图。这也有可能发生在滴答循环之后，但是绝对不会发生在一个滴答的步骤3之前。

牢记在心里的事情

我们在原生的事件循环之上实现了一个简单而有效的定时系统。理论上讲它运行的很好，但是还是很脆弱，一个轻微的错误可能会导致很严重的BUG。

在一个复杂的系统当中，最重要的就是建立一定的规则并在以后保持它们。在NX中有以下规则：

永远不用 setTimeout(fn, 0) 来进行内部操作

用相同的方法来注册微任务

微任务仅供内部操作

不要干预开发者钩子运行时间

规则1和2

数据反射和DOM操作将按照操作顺序执行。这样只要不混合就可以很好的延迟它们的执行。混合执行会出现莫名其妙的问题。

setTimeout(fn, 0) 的行为完全不可预测。使用不同的方法注册微任务也会发生混乱。例如，下面的例子中microtask2不会正确地在microtask1之前运行。

Promise.resolve().then().then(microtask1)  Promise.resolve().then(microtask2)

规则3和4

分离开发者的代码执行和内部操作的时间窗口是非常重要的。混合这两种行为会导致不可预测的事情发生，并且它会需要开发者了解框架内部。我想很多前台开发者已经有过类似经历。

编译自：https://blog.risingstack.com/writing-a-javascript-framework-execution-timing-beyond-settimeout/作者： Bertalan Miklos

译者： kokialoves