MutationObserver、Worker 、MessageChannel也只是API的使用而已

1.MutationObserver是观察dom修改的新增API

<div id="app">
    <p class="aaa">我</p>
</div>
<script>
    //直接new传一个回调函数， observer.observe下面这行代码执行完，在dom被修改的时候，这个回调函数就会被调用
    let observer = new MutationObserver(function (mutationsList) {
        for (var mutation of mutationsList) {
            let type = mutation.type;
            switch (type) {
                case "childList":
                    console.log("A child node has been added or removed.");
                    break;
                case "attributes":
                    console.log(`The ${mutation.attributeName} attribute was modified.`);
                    break;
                case "subtree":
                    console.log(`The subtree was modified.`);
                    break;
                default:
                    break;
            }
        }
    });
    //调用observe方法，传入要观察的dom对象，后面是配置，要观察属性的变化，孩子的增删，子节点的修改
    observer.observe(document.getElementById('app'), { attributes: true, childList: true, subtree: true });
</script>

2.Worker是弥补js做耗时任务的新API

//index.js
 let worker = new Worker('./calc.js');
 worker.postMessage(10000);
 worker.onmessage = function (e) {
   console.log(e.data);
 }

//calc.js
// 注意这里面不能操作dom
onmessage = function (e) {
  //可能算了很久！
  let res = caculate(e.data)
  postMessage(res);
}

3.MessageChannel这个我也不知道有啥用，一般在页面与ifram之间通信

   let channel = new MessageChannel();
   let port1 = channel.port1;
   let port2 = channel.port2;
   port1.postMessage('hello');
   port2.onmessage = function (e) {
     console.log(e.data);
   };

• ps：以上都都是不阻塞代码执行的