一:同步 & 異步
同步:js是單線程,按照代碼從上到下的順序執行。多個同步任務組成執行的執行棧。比如:
alert(1); // 主線程上執行當前的同步任務 console.log(2);
如果不確定點擊alert彈框的內容,在控制台是看不到打印2出現的。
異步:不用等待當前任務的執行,等待異步任務有了執行結果,會放置一個時間到任務隊列中。等待執行棧中的內容執行完畢就安順序執行任務隊列中的任務。
同步任務、異步任務、執行棧、任務隊列、主線程 個人理解的關系圖如下:
二:宏任務 & 微任務
宏任務:
微任務:
執行順序:同步 -> 異步 -> 宏任務 -> 微任務
有些說法中是 先微任務 -> 宏任務;其實都一樣,看針對那個任務而言。先微任務 ->宏任務, 微任務是本次宏任務中的,而宏任務是下一次的任務。先宏任務->微任務 是先把本次宏任務結束完成,再進行下一次的宏任務中的微任務。
例如:
setTimeout(() => { console.log('異步1任務time1'); new Promise(function (resolve, reject) { console.log('異步1宏任務promise'); setTimeout(() => { console.log('異步1任務time2'); }, 0); resolve(); }).then(function () { console.log('異步1微任務then') }) }, 0); console.log('主線程宏任務'); setTimeout(() => { console.log('異步2任務time2'); }, 0); new Promise(function (resolve, reject) { console.log('宏任務promise'); // reject(); resolve(); }).then(function () { console.log('微任務then') }).catch(function () { console.log('微任務catch') }) console.log('主線程宏任務2');
執行結果: