js中什么是微任務和宏任務

在 JavaScript 引擎中，任務分為兩種類型：微任務（microtask）和宏任務（macrotask）。 微任務是指在當前任務執(zhí)行結束后立即執(zhí)行的任務，它可以看作是在當前任務的“尾巴”添加的任務。常見的微任務包括 Promise 回調和 process.nextTick。 宏任務是指需要排隊等待 JavaScript 引擎空閑時才能執(zhí)行的任務。常見的宏任務包括 setTimeout、setInterval、I/O 操作、DOM 事件等。 JavaScript 引擎會先執(zhí)行當前任務中的所有微任務，然后再執(zhí)行宏任務隊列中的第一個任務。這個過程會不斷重復，直到宏任務隊列中的任務被全部執(zhí)行完畢。

JS為什么要區(qū)分微任務和宏任務

JavaScript 之所以要區(qū)分微任務和宏任務，是因為微任務和宏任務的執(zhí)行順序不同，這對 Web 開發(fā)中一些異步操作的實現(xiàn)有著重要的影響。 在 JavaScript 中，微任務會優(yōu)先于宏任務執(zhí)行。這意味著在當前任務執(zhí)行結束后，所有微任務都會被立即執(zhí)行，而宏任務只有在所有微任務執(zhí)行完畢后才會執(zhí)行。這種執(zhí)行順序保證了微任務的優(yōu)先級，可以避免一些問題的出現(xiàn)，比如處理 Promise 對象時可能會出現(xiàn)的競態(tài)條件。 舉個例子，當我們使用 Promise 對象時，它會返回一個 Promise 實例并將回調函數(shù)放入微任務隊列中。當 Promise 的狀態(tài)發(fā)生改變時，它會立即執(zhí)行微任務隊列中的回調函數(shù)，而不是等待當前任務結束后再執(zhí)行。這種特性可以保證 Promise 回調函數(shù)的執(zhí)行順序，避免出現(xiàn)競態(tài)條件，從而使代碼更加可靠。 另一方面，宏任務的執(zhí)行是在當前任務結束后才會執(zhí)行的，這意味著可以將一些耗時的操作放入宏任務隊列中，從而避免阻塞當前任務的執(zhí)行。比如，我們可以將一些需要等待一段時間才能執(zhí)行的代碼放入 setTimeout 的回調函數(shù)中，這樣可以使頁面在執(zhí)行這些代碼的同時仍然保持響應，提高用戶體驗。 因此，JavaScript 之所以要區(qū)分微任務和宏任務，是為了保證異步操作的正確性和性能。

JS中微任務和宏任務執(zhí)行順序

1. 首先執(zhí)行當前代碼（同步任務），直到遇到第一個宏任務或微任務。
2. 如果遇到微任務，則將它添加到微任務隊列中，繼續(xù)執(zhí)行同步任務。
3. 如果遇到宏任務，則將它添加到宏任務隊列中，繼續(xù)執(zhí)行同步任務。
4. 當前任務執(zhí)行完畢后，JavaScript 引擎會先執(zhí)行所有微任務隊列中的任務，直到微任務隊列為空。
5. 然后執(zhí)行宏任務隊列中的第一個任務，直到宏任務隊列為空。
6. 重復步驟 4 和步驟 5，直到所有任務都被執(zhí)行完畢。 需要注意的是，微任務比宏任務優(yōu)先級要高，因此在同一個任務中，如果既有微任務又有宏任務，那么微任務會先執(zhí)行完畢。而在不同的任務中，宏任務的執(zhí)行優(yōu)先級要高于微任務，因此在一個宏任務執(zhí)行完畢后，它才會執(zhí)行下一個宏任務和微任務隊列中的任務。 舉個例子，假設當前代碼中有一個 setTimeout 和一個 Promise，它們分別對應一個宏任務和一個微任務。那么執(zhí)行順序如下：
   1). 執(zhí)行當前代碼，將 setTimeout 和 Promise 添加到宏任務和微任務隊列中。
   2). 當前任務執(zhí)行完畢，JavaScript 引擎先執(zhí)行微任務隊列中的 Promise 回調函數(shù)。
   3). 微任務隊列為空后，再執(zhí)行宏任務隊列中的 setTimeout 回調函數(shù)。 需要注意的是，在一些特殊情況下，微任務和宏任務的執(zhí)行順序可能會發(fā)生變化，比如在使用 MutationObserver 監(jiān)聽 DOM 變化時，它會被視為一個微任務，但是它的執(zhí)行順序可能會比其他微任務更靠后。因此，需要根據(jù)具體情況來理解和處理微任務和宏任務的執(zhí)行順序。

js微任務和宏任務有哪些

微任務：Promise 回調函數(shù)、process.nextTick、Object.observe（已廢棄）、MutationObserver。
宏任務：setTimeout、setInterval、setImmediate（Node.js 獨有）、requestAnimationFrame、I/O 操作、UI 渲染。

需要注意的是，不同的 JavaScript 引擎可能會存在一些差異，有些任務可能既可以作為微任務，也可以作為宏任務，比如在一些瀏覽器中，使用 MutationObserver 監(jiān)聽 DOM 變化時，它會被視為一個微任務，但是在一些 Node.js 版本中，它會被視為一個宏任務。 另外，需要注意的是，Promise 回調函數(shù)是微任務，但是它的內部代碼可能會包含其他的異步操作，這些異步操作可能是微任務或宏任務，因此在處理 Promise 時需要考慮到它內部可能包含的其他異步操作。

案例

1.微任務：Promise 回調函數(shù)，宏任務：setTimeout 回調函數(shù)

console.log('start');setTimeout(() => console.log('setTimeout'), 0);Promise.resolve().then(() => console.log('Promise'));console.log('end');// start// end// Promise// setTimeout

解析： 首先輸出 start，然后通過 setTimeout 方法注冊了一個回調函數(shù)，它會被添加到宏任務隊列中。接著創(chuàng)建了一個 Promise 實例，并且通過 then 方法注冊了一個回調函數(shù)，在 Promise 對象的狀態(tài)改變時會執(zhí)行這個回調函數(shù)。接著輸出 end。因為 Promise 回調函數(shù)是微任務，所以它會被添加到微任務隊列中，等待執(zhí)行。等到主線程的同步任務執(zhí)行完畢后，JavaScript 引擎會先執(zhí)行微任務隊列中的任務，輸出 Promise，然后執(zhí)行宏任務隊列中的任務，輸出 setTimeout。

2.微任務：process.nextTick 回調函數(shù)，宏任務：setImmediate 回調函數(shù)

console.log('start');setImmediate(() => console.log('setImmediate'));process.nextTick(() => console.log('process.nextTick'));console.log('end');// start// end// process.nextTick// setImmediate

解析： 在 Node.js 環(huán)境中，process.nextTick 回調函數(shù)是排在微任務隊列最前面的，優(yōu)先級比 Promise 回調函數(shù)還要高。而 setImmediate 回調函數(shù)是排在宏任務隊列最后面的。所以，以上代碼會先輸出 start，然后輸出 end。等到主線程的同步任務執(zhí)行完畢后，JavaScript 引擎會先執(zhí)行微任務隊列中的任務，輸出 process.nextTick，然后執(zhí)行宏任務隊列中的任務，輸出 setImmediate。

3.微任務：Promise 回調函數(shù)，宏任務：requestAnimationFrame 回調函數(shù)

console.log('start');requestAnimationFrame(() => console.log('requestAnimationFrame'));Promise.resolve().then(() => console.log('Promise'));console.log('end');// start// end// Promise// requestAnimationFrame

解析： 首先輸出 start，然后通過 requestAnimationFrame 方法注冊了一個回調函數(shù)，它會被添加到宏任務隊列中。接著創(chuàng)建了一個 Promise 實例，并且通過 then 方法注冊了一個回調函數(shù)，在 Promise 對象的狀態(tài)改變時會執(zhí)行這個回調函數(shù)。接著輸出 end。因為 Promise 回調函數(shù)是微任務，所以它會被添加到微任務隊列中，等待執(zhí)行。等到主線程的同步任務執(zhí)行完畢后，JavaScript 引擎會先執(zhí)行微任務隊列中的任務，輸出 Promise，然后執(zhí)行宏任務隊列中的任務，輸出 requestAnimationFrame。

4.微任務：Promise 回調函數(shù)，宏任務：XMLHttpRequest 回調函數(shù)

console.log('start');const xhr = new XMLHttpRequest();xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');xhr.onload = () => console.log('XMLHttpRequest');xhr.send();Promise.resolve().then(() => console.log('Promise'));console.log('end');// start// end// Promise// XMLHttpRequest

解析： 首先輸出 start，然后創(chuàng)建了一個 XMLHttpRequest 對象，并且通過 open 方法和 send 方法發(fā)送了一個 GET 請求。接著通過 onload 方法注冊了一個回調函數(shù)，在請求成功后會執(zhí)行這個回調函數(shù)。接著創(chuàng)建了一個 Promise 實例，并且通過 then 方法注冊了一個回調函數(shù)，在 Promise 對象的狀態(tài)改變時會執(zhí)行這個回調函數(shù)。接著輸出 end。因為 Promise 回調函數(shù)是微任務，所以它會被添加到微任務隊列中，等待執(zhí)行。等到主線程的同步任務執(zhí)行完畢后，JavaScript 引擎會先執(zhí)行微任務隊列中的任務，輸出 Promise，然后等待 XMLHttpRequest 對象的回調函數(shù)執(zhí)行。當請求成功后，JavaScript 引擎會執(zhí)行宏任務隊列中的任務，輸出 XMLHttpRequest。