JavaScript中的巨集任務和微任務詳情

阿新 • • 發佈：2021-11-24

1、微任務有哪些

Promise

await和async

2、巨集任務有哪些

setTimeout

setInterval

DOM事件
AJAX請求

3、案例

<script>

console.log(1)

setTimeout(()=>{

    console.log("2")

},0)

Promise.resolve().then(()=>{

    console.log('3')

})

console.log(4)

</script>

我們發現列印的順序是1-4-3-2

為什麼是這樣的順序？

先列印1-4www.cppcns.com這肯定是沒有問題的

為啥先列印3然後才是2

因為3是Promise,Promise是微任務。

2是setTimeout，它是巨集任務

微任務的執行時機比巨集任務早。

所以先執行的是3然後才是2

JavaScript中的巨集任務和微任務詳情

3.1 結論

先同步後非同步，先微後巨集
微任務的執行時機比巨集任務早哈~

4、程式碼案例

<body>

    <div id="app"></div>

<script>

// 這一段是dom渲染的

let app=document.getElewww.cppcns.com 
mentById("app")

let cont='<p>我是p標籤</p>'

app.append(cont)

// dom渲染結束



console.log(1)

setTimeout(()=>{

    console.log("2")

    alert('setTimeout2')

},0)

Promise.resolve().then(()=>{

    console.log('3')

    alert('3')

})

console.log(4)

</script>

</body>www.cppcns.com

4.1 程式碼分析

上面這一段程式碼的執行分析：

肯定是先執行1-4

然後根據先微任務後巨集任務

就是輸出3然後彈出3

然後就是說輸出2然後彈出setTimeout2 【錯誤的】

因為微任務和巨集任務之間還有一個DOM渲染

所以然後是dom渲染，最後才是巨集任務

所以輸出1-4後，執行的是DOM渲染。

然後才是輸出2然後彈出setTimeout2

4.2 結論和運用的場景

微任務》DOM渲染》巨集任務看下面的例子

這個結論的bpTZWJe運用場景

我們都做過echarts.我們知道渲染echarts的時候。

需要頁面的DOM渲染完畢後，才能拿到節點進行渲染。

所以有的小夥伴會請請求的時機放在monuted()這個生命週期中

這樣就可以確保返回來的資料肯定能夠正常渲染在頁面上。

其實根據上面這個結論。

你完全可以在created中去請求資料。返回來的的時候。

DOM肯定渲染完了。因為請求是巨集任務。

巨集任務的執行時機是在DOM渲染後的哈

到此這篇關於中的巨集任務和微任務詳情的文章就介紹到這了,更多相關Script中的巨集任務和微任務內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

JavaScript中的巨集任務和微任務詳情

目錄1、微任務有哪些2、巨集任務有哪些3、案例3.1 結論4、程式碼案例4.1 程式碼分析4.2 結論和運用的場景1、微任務有哪些

js中的巨集任務和微任務

js中的巨集任務和微任務非同步和同步都是在完成任務列的內容同步任務是逐條進行的，非同步任務有固定時間和非固定時間的

淺談JavaScript巨集任務和微任務執行順序

目錄一、javascript單執行緒1. 同步任務（synchronous）2. 非同步任務（asynchronous）二、任務佇列(task queue)1.執行棧擴充套件一下setTimeout的理解一、javaScript單執行緒

淺談js中的巨集任務和微任務

目錄1、關於2、Script事件迴圈3、巨集任務和微任務4、拓展巨集任務微任務下面一道關於巨集任務和微任務http://www.cppcns.com的題：

js中巨集任務和微任務

巨集任務包括：<script>整體程式碼、setTimeout、setInterval、setImmediate、Ajax、DOM事件微任務：process.nextTick、MutationObserver、Promise.then catch finally

JS 巨集任務和微任務

文章參考：https://www.cnblogs.com/wangziye/p/9566454.html 巨集任務（macrotask）微任務（microtask）

EventLoop事件輪詢巨集任務和微任務

EventLoop事件輪詢巨集任務和微任務瀏覽器從伺服器獲取到程式碼後，瀏覽器會開闢一個GUI渲染執行緒，GUI從上到下開始執行程式碼。

熟悉事件迴圈？那談談為什麼會分為巨集任務和微任務。

什麼是事件迴圈在瞭解事件迴圈前，需要一些有關 JS 特性的前置知識。 JS 引擎是單執行緒的，直白來說就是一個時間點下 JS 引擎只能去做一件事情，而 Java 這種多執行緒語言，可以同時做幾件事情。

熟悉事件迴圈？那談談為什麼會分為巨集任務和微任務

原文連結：熟悉事件迴圈？那談談為什麼會分為巨集任務和微任務什麼是事件迴圈

js 事件迴圈訊息佇列和微任務巨集任務

事件迴圈與訊息佇列因為js是單執行緒指令碼語言，一般情況下程式碼是同步執行。也就是說js執行程式碼是一行一行向下執行的，前面沒有執行完成是不會執行後面的程式碼的。

巨集任務（macrotask）和微任務（microtask）-非同步任務的分類

/* *巨集任務 *分類：setTimeoutsetIntervalrequrestAnimationFrame *1.巨集任務所處的佇列就是巨集任務佇列

JavaScript之事件迴圈,巨集任務與微任務

首先看一段程式碼：列印順序是什麼？正確答案：script start, script end, promise1, promise2, setTimeout

JavaScript單執行緒，微任務，巨集任務

技術標籤：javascript 文章目錄一、JavaScript的單執行緒二、微任務，巨集任務一、JavaScript的單執行緒

javascript的巨集任務及微任務

技術標籤：前端javascriptjs的執行順序直接上程式碼 console.log(\'1\'); setTimeout(function() {

瞭解js的巨集任務（macrotask）和微任務(microtask)以及Event-Loop

JavaScript 首先，JavaScript是一個單執行緒的指令碼語言，所以就是說在一行程式碼執行的過程中，必然不會存在同時執行的另一行程式碼，就像使用alert（）後進行列印，如果不關閉彈窗，則不會執行後續的列印操作

JavaScript 操作巨集任務與微任務

巨集任務與微任務 javascript是單執行緒語言（如果多執行緒dom會瘋掉）所以在同一時間只能執行一個任務，稱為主執行緒，用來執行同步任務

詳細談談React中setState是一個巨集任務還是微任務

目錄前言面試官的問法是否正確？React 是如何控制 setState 的？未來會有非同步的 setState總結前言

巨集任務（(macro)task）和微任務（microtask）

這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。

巨集任務、微任務

參考1：https://www.cnblogs.com/lucy-xyy/p/11652286.html 參考2：https://www.cnblogs.com/yugege/p/9598265.html

從vue的$nextTick看巨集任務、微任務

1、nextTick呼叫方法首先看nextTick的呼叫方法： https://cn.vuejs.org/v2/api/#Vue-nextTick // 修改資料

JavaScript中的巨集任務和微任務詳情

目錄

1、微任務有哪些

2、巨集任務有哪些

3、案例

3.1 結論

4、程式碼案例

4.1 程式碼分析

4.2 結論和運用的場景

相關推薦