在编写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']）。 |
