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:以上都都是不阻塞代码执行的
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐