延迟执行--Event loop--Vue(nextTick)

在编写js代码中大家基本都用到过setTimeOut这个延迟函数，通常是等待DOM处理完成后触发某些事件。用法setTimeout(()=>{//延迟处理的事件},0)。
而这个setTimeout其实是涉及到异步编程 event loop知识。
这里参考Tasks, microtasks, queues and schedules;
js是单线程的，里面可执行的代码分为任务(Tasks)和微任务(Microtasks)。上链接中的代码:

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

例子中的Promise回调是微任务，其他的都称为任务，有的还把setTimeout回调叫Macrotask。setTimeout只是把任务排到了所有任务的最后面。按代码执行顺序，执行完成后，会优先执行微任务，所以先执行Promise回调(包括后面的then)，最后才执行setTimeout。最终输出结果如下：

script start
script end
promise1
promise2
setTimeout

得出微任务比setTimeout要快一些，前段时间看vue的nextTick中提到首选使用Promise.then来解决就是用的微任务，次选是MutationObserver。这个东西又是什么？
MDN上说MO 给开发者提供了一种能在某个范围内的DOM数发生变化时作出适当反应的能力。其实就是一个监听DOM对象的观察者。
使用方法是var observer=new MutationObserver(callback)。
实例有3个方法
observer.observer(targer,options);//DOM元素,配置参数监听一个DOM元素
observer.disconnect();解除监听
observer.takeRecords();清空observer操作记录并返回操作记录
options项参数有(MDN复制)