浏览器是如何协调任务执行的？宏任务、微任务和 DOM 变化监听的协奏曲

2024-01-03 12:29:01

浏览器任务执行的时空舞台：宏任务、微任务与 DOM 变化监听的完美协奏曲

想象一下一个繁忙的音乐厅，乐队、独奏家和指挥齐聚一堂，奏响一曲和谐动人的交响乐。在浏览器中，任务执行的过程也是如此，只不过这里演奏的不是音符，而是各种各样的任务。就像音乐厅中协调着不同乐器的演奏一样，浏览器也使用了一套机制来协调任务的执行，以确保一切都井然有序。在这个交响乐中，宏任务 、微任务 和DOM 变化监听 扮演着关键的角色。

宏任务与微任务：任务执行的两种基本形式

任务进入浏览器时，会被分类为宏任务 或微任务 。宏任务就像交响乐中的乐队，代表着那些需要时间完成的任务，比如网络请求、文件读取以及那些由 setTimeout() 和 setInterval() 调度的任务。另一方面，微任务就像舞台上的独奏家，代表着那些几乎可以立即完成的轻量级任务，比如 DOM 事件处理程序、Promise 回调函数以及 MutationObserver 回调函数。

宏任务和微任务的执行顺序：谁先谁后？

就像乐队在独奏家演奏之前演奏一样，浏览器也会在处理微任务之前先处理宏任务。这确保了那些耗时的任务不会被微任务打断，从而保持了浏览器响应的稳定性。浏览器有一个称为事件循环 的系统，它不断地检查宏任务队列 和微任务队列 ，并在每个队列中依次执行任务。

DOM 变化监听：DOM 元素变化的忠实守卫者

DOM（文档对象模型）是浏览器对网页内容的表示。当 DOM 元素发生变化时，浏览器可以使用DOM 变化监听 来检测这些变化并触发相应的回调函数。这些监听就像音乐厅中聆听音符变化的听众，一旦检测到变化，它们就会向浏览器发出信号，将对应的回调函数加入到微任务队列中。

宏任务、微任务和 DOM 变化监听的完美协奏曲

这三种机制共同作用，形成了一曲任务执行的和谐协奏曲。宏任务负责繁重的任务，微任务负责轻量级的任务，而 DOM 变化监听则负责监测 DOM 的变化。它们之间无缝配合，确保了浏览器能够流畅地响应用户的输入和处理各种任务，就像交响乐队完美地演奏乐曲一样。

代码示例

以下是展示宏任务、微任务和 DOM 变化监听如何协同工作的代码示例：

// 宏任务
setTimeout(() => {
  console.log('宏任务');
}, 0);

// 微任务
Promise.resolve().then(() => {
  console.log('微任务');
});

// DOM 变化监听
const observer = new MutationObserver(() => {
  console.log('DOM 变化');
});

observer.observe(document.body, {
  childList: true
});

document.body.appendChild(document.createElement('p'));