Javascript事件循环机制以及渲染引擎何时渲染UI

原文链接：https://segmentfault.com/a/1190000013212944

实际运行发现有两点和文章说的不一样：

1. 不管在哪种任务里出现了UI的修改（包括添加节点、修改颜色、修改节点内容等），UI渲染会立即执行（在debugger状态下能看到），不会等到任务队列执行完毕
   【更正：UI的修改（包括添加节点、修改颜色、修改节点内容等），会立即更新应用程序的状态。微任务队列清空后，事件循环会检查当前是否需要重新渲染UI，如果需要则渲染UI视图。debugger状态可能在微任务队列中强行插入了一个是否需要重新渲染UI视图的任务，所以在断点处也能看到UI被重新渲染】
2. MutationObserver的callback回调函数是异步的，只有在全部DOM操作完成之后才会调用callback（参考）。也就是说，不管是用户点击事件onclick，还是js触发的click，执行的结果是一样的，只会触发一个mutate。

还有一点需要注意，如果没有debugger，那么在alert(‘锚点’)的时候，看到inner的内容其实还是begin而不是end，我想这跟alert的阻断也有关系（参考）

var outer = document.querySelector('.outer'