延迟执行--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复制)

属性	说明
childList	设置为true如果要观察目标节点的子元素（包括文本节点）的添加和删除。
attributes	设置为true是否要观察到目标属性的突变。
characterData	设定为true要观察目标数据的突变。
subtree	设定为true要观察目标和目标的后代的突变。
attributeOldValue	设置为true，如果attributes设置为true需要记录突变之前和目标的属性值。
characterDataOldValue	设置为true如果characterData设置为true目标数据，然后才需要记录突变。
attributeFilter	值为一个数组，表示需要观察的特定属性（比如['class', 'str']）。