JS Event Loops 微任务宏任务

超、凢脫俗 2022-12-21 03:25 175阅读 0赞

### EventLoop、宏任务、微任务 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]  
补：开始执行代码》（console.log）先压入anonymous函数》执行同步代码》如果有异步代码，压入WebApi环境》执行完所有同步代码后》anonymous也弹出CallStack（调用栈空了），这时事件循环(**EventLoop只做一件事情监听调用栈和消息队列**)开始》被调用的回调函数或定时器到时间的函数会被放入消息队列种（消息队列发生变化EventLoop就会监听到然后回放入调用栈）》放入调用栈。

console.log(1)
    
    setTimeout(function () {   进入宏任务队列
      console.log(2)
    }, 0)
    
    console.log(3)

console.log('global begin')  1
    setTimeout(function timer1 () { 
      queueMicrotask(() => {  把函数内的东西放入微任务队列
        console.log('queueMicrotask') 2
      })
      console.log('timer1 invoke') 3
    }, 0)
    
    console.log('global end') 4

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]  
CallStack空了后 事件循环开启，先执行微任务队列，然后宏任务。微任务队列和宏任务队列中的任务都会被取到CallStack里执行，注意！微任务队列压栈执行完后，CallStack空了 还是先回去看看微任务有没有任务，如果微任务队列都空了会执行渲染的操作，开启渲染线程渲染，然后再去宏任务队列读任务，此时宏任务执行完后会开启新一轮循环。

// 事件循环, 主线程
    while (macroQueue.waitForMessage()) { 
      // 1. 执行完调用栈上当前的宏任务(同步任务)
      // call stack
    
      // 2. 遍历微任务队列，把微任务队里上的所有任务都执行完毕(清空微任务队列)
      // 微任务又可以往微任务队列中添加微任务
      for (let i = 0; i < microQueue.length; i++) { 
        // 获取并执行下一个微任务(先进先出)
        microQueue[i].processNextMessage()
      }
    
    	// 3. 渲染（渲染线程）
      
      // 4. 从宏任务队列中取 一个 任务，进入下一个消息循环
      macroQueue.processNextMessage();
    }

## 产生宏任务的方式 ##

*  script 中的代码块
 *  setTimeout()
 *  setInterval()
 *  setImmediate() (非标准，IE 和 Node.js 中支持)
 *  注册事件

## 产生微任务的方式 ##

*  Promise
 *  [MutationObserver][] mutaition 变化 observer观察 监听dom改变，如果变化就会执行mutaitionObserver对象中的函数
 *  [queueMicrotask][]()

queueMicrotask(() => { 
      console.log('微任务')
    })

### [何时使用微任务][Link 1] ###

微任务的执行时机，晚于当前本轮事件循环的 Call Stack(调用栈) 中的代码(宏任务)，早于事件处理函数和定时器的回调函数。

使用微任务的最主要原因简单归纳为：

*  减少操作中用户可感知到的延迟 微任务后可以立即渲染 改变dom 但宏任务可能会久一点
 *  确保任务顺序的一致性，即便当结果或数据是同步可用的
 *  批量操作的优化

### 确保任务顺序的一致性 ###

customElement.prototype.getData = url => { 
      if (this.cache[url]) { 
        this.data = this.cache[url];
        this.dispatchEvent(new Event("load"));
      } else { 
        fetch(url).then(result => result.arrayBuffer()).then(data => { 
          this.cache[url] = data;
          this.data = data;
          this.dispatchEvent(new Event("load"));
        )};
      }
    };
    
    element.addEventListener("load", () => console.log("Loaded data"));
    console.log("Fetching data...");
    element.getData();
    console.log("Data fetched");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]

customElement.prototype.getData = url => { 
      if (this.cache[url]) { 
        queueMicrotask(() => { 
          this.data = this.cache[url];
          this.dispatchEvent(new Event("load"));
        });
      } else { 
        fetch(url).then(result => result.arrayBuffer()).then(data => { 
          this.cache[url] = data;
          this.data = data;
          this.dispatchEvent(new Event("load"));
        )};
      }
    };

### 批量操作 ###

![在这里插入图片描述][20201114151103845.png_pic_center]

## 参考资料 ##

*  [异步 JavaScript][JavaScript]
 *  [并发模型与事件循环][Link 2]
 *  [Microtasks and the JavaScript runtime environment][]
 *  [在 JavaScript 中通过 queueMicrotask() 使用微任务][JavaScript _ queueMicrotask_]
 *  [https://developer.mozilla.org/zh-CN/docs/Web/API/HTML\_DOM\_API/Microtask\_guide/In\_depth][Microtasks and the JavaScript runtime environment]
 *  [Event loops][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/62a8c50f1922481d9d3c36624c9fa4bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/201e20f0a3c44dd69a00b2d58d84c26e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/d3d3199427a64762b52b7ec50b149512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/a83d2c13db5e4dd1ade403c5fe5bbc1b.png
[MutationObserver]: https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
[queueMicrotask]: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8%E5%BE%AE%E4%BB%BB%E5%8A%A1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/59e64b1dfcae45158f70ba85bd1ff96e.png
[20201114151103845.png_pic_center]: /images/20221120/53113b01ab63401b869fcef27ee921be.png
[JavaScript]: https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop
[Microtasks and the JavaScript runtime environment]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth
[JavaScript _ queueMicrotask_]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide
[Event loops]: https://html.spec.whatwg.org/multipage/webappapis.html#event-loops