https://segmentfault.com/a/1190000013660033?utm_source=channel-hottest
感覺有點(diǎn)問題宵蕉，有空研究一下
大家忽略我這個(gè)文章叭＠崖Ｄ欠ァ！尔店！
之前了解過js的運(yùn)行機(jī)制，知道有異步和同步佑惠，eventloop的存在朋腋，但最近復(fù)習(xí)的時(shí)候發(fā)現(xiàn)怎么又來了個(gè)微任務(wù)和宏任務(wù)？膜楷？旭咽？？赌厅？
所以整理一下小筆記穷绵，我們一起看看是什么東西吧！
js同步異步
- 同步任務(wù)：指的是在主線程上排隊(duì)執(zhí)行的任務(wù)特愿，只有前一個(gè)任務(wù)執(zhí)行完畢仲墨，才能執(zhí)行后一個(gè)任務(wù)
- 異步任務(wù)： 指的是不進(jìn)入主線程，某個(gè)異步任務(wù)可以執(zhí)行了洽议，該任務(wù)才會(huì)進(jìn)入主線程執(zhí)行宗收。
js異步運(yùn)行機(jī)制
異步執(zhí)行的運(yùn)行機(jī)制如下(同步任務(wù)也如此漫拭，因?yàn)樗梢员灰暈闆]有異步任務(wù)的異步執(zhí)行)：
- 所有同步任務(wù)都在主線程上執(zhí)行亚兄，形成一個(gè)執(zhí)行棧(execution context stack)
- 主線程之外，還存在一個(gè)“任務(wù)隊(duì)列”采驻，只要異步任務(wù)有了運(yùn)行結(jié)果审胚，就在“任務(wù)隊(duì)列”之中放置一個(gè)事件
3.一旦“執(zhí)行棧”中的所有同步任務(wù)執(zhí)行完畢礼旅，系統(tǒng)就會(huì)讀取“任務(wù)隊(duì)列”膳叨，看看里面有哪些事件。那些對(duì)應(yīng)的異步任務(wù)痘系，于是結(jié)束等待菲嘴，進(jìn)入執(zhí)行棧，開始執(zhí)行 - 主線程不斷重復(fù)第3步
[圖片上傳失敗...(image-77d9ff-1551700016485)]
微任務(wù)和宏任務(wù)
- macro-task(宏任務(wù))：包括整體代碼script，setTimeout龄坪，setInterval
- micro-task(微任務(wù))：Promise昭雌，process.nextTick
不同類型的任務(wù)會(huì)進(jìn)入不同的Event Queue，有宏任務(wù)的隊(duì)列和微任務(wù)的隊(duì)列健田。
事件循環(huán)的順序烛卧，決定js代碼的執(zhí)行順序。進(jìn)入整體代碼(宏任務(wù))后妓局，開始第一次循環(huán)总放。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始好爬，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢局雄，再執(zhí)行所有的微任務(wù)。
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
}).then(function() {
console.log('then');
})
console.log('console');
- 整段代碼作為宏任務(wù)進(jìn)入主線程
- 遇到settimeout存炮，將其回調(diào)函數(shù)注冊(cè)后分發(fā)到宏任務(wù)Event Queue哎榴。
- 遇到了Promise，new Promise立即執(zhí)行僵蛛，then函數(shù)分發(fā)到微任務(wù)Event Queue
- 遇到console.log()尚蝌，立即執(zhí)行
- 第一個(gè)宏任務(wù)執(zhí)行結(jié)束，看看有什么微任務(wù)充尉，發(fā)現(xiàn)有then飘言，執(zhí)行
- 第二輪循環(huán)，發(fā)現(xiàn)宏任務(wù)settimeout的回調(diào)函數(shù)驼侠，執(zhí)行姿鸿。
- 結(jié)束。
[圖片上傳失敗...(image-cfacad-1551700016485)]
分析代碼
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
答案
1 7 6 8 倒源、2 4 3 5苛预、 9 11 10 12
