js事件循环机制

1. 什么是事件循环?

js引擎并不是独立运行的,它运行在宿主环境中,对多数开发者来说通常就是web浏览器。经过最近几年的发展,js已经超出了浏览器的范围,进入了其他环境。
所以这些环境都有一个共同“点”(thread,也指线程),即它们都提供了一种机制来处理程序中多个块的执行,且执行每块时调用js引擎,这种机制被称为事件循环

2. event loop它最主要是分三部分:主线程、宏队列(macrotask)、微队列(microtask)

js的任务队列分为同步任务和异步任务,所有的同步任务都是在主线程里执行的,异步任务可能会在macrotask或者microtask里面。

3. 主线程

就是访问到的script标签里面包含的内容,或者是直接访问某一个js文件的时候,里面的可以在当前作用域直接执行的所有内容(执行的方法、new出来的对象)

4. js引擎的两大特点:单线程和非阻塞

  • 单线程:只有一个主线程来处理任务。
  • 非阻塞:当执行异步任务时,不必等到结果返回,主线程会挂起(pending)这个任务,然后根据一定规则执行回调函数(事件循环机制)。

JS通常是非阻塞的,除了某些特殊情况,JS会停止代码执行:
alert, confirm, prompt(除了Opera)。
“页面上的程序正忙”的系统对话框弹出。

5. 任务分类:同步和异步

  • 同步任务(macrotask ):会立即执行的任务。
  • 异步任务(microtask ):不会立即执行的任务,可细分为一下两种:宏任务和微任务。

--宏任务:script, setTimeout, setInterval, setImmeditate, T/O, UI rendering
-- 微任务:process, nextTick, promise.then(), object.observe, MutationObserver

6. 执行顺序

1、先执行主线程

2、遇到宏队列(macrotask)放到宏队列(macrotask)

3、遇到微队列(microtask)放到微队列(microtask)

4、主线程执行完毕

5、执行微队列(microtask),微队列(microtask)执行完毕

6、执行一次宏队列(macrotask)中的一个任务,执行完毕

7、执行微队列(microtask),执行完毕

8、依次循环。。。

7. 执行栈和任务队列

占内存和堆内存
栈内存保存着JS的变量和指向堆内存中对象的指针,堆内存保存着对象。

  • 执行栈:

后进先出的数据结构,当函数被调用时添加到执行栈顶部,从栈顶移出。当一个任务为同步任务时,则会被立即执行,执行完移出;如果是异步任务,则会交给异步处理模块处理,当异步任务回调达到触发条件时,会将回调函数添加到任务队列中,如果是宏任务,则添加到宏任务队列中,如果是为微任务,则添加到微任务队列中。

  • 任务队列:

任务队列读取任务的顺序为宏任务-微任务(微任务队列全部执行结束才进入到下一轮宏任务)-宏任务-微任务的顺序;当执行栈中的任务全部完成之后会从事件队列中读取一个任务添加到执行栈。一个任务队列中可以有多个宏任务队列,但只能有一个微任务队列。

图示:
image.png
  • 引入微任务队列后,事实上事件循环执行的流程是这样的:
  1. 一开始把一整段的JS脚本作为第一个宏任务执行
  2. 在执行过程中,同步代码则直接运行,过程中存在宏任务则进入到宏任务队列,微任务在微任务队列中入列。
  3. 在当前宏任务执行完成后,检查微任务队列,若存在微任务则按序全部执行完毕。
  4. 继续检查宏任务队列,执行下一个宏任务,如此反复。

理解了原理后,可以根据这个步骤来多看几个例子,尝试写出打印的结果。

Promise.resolve().then(()=>{
  console.log('Promise1')  
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
});
setTimeout(()=>{
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')    
  })
},0);
console.log('start');

// start
// Promise1
// setTimeout1
// Promise2
// setTimeout2
  • 有个小 tip:从规范来看,microtask (微任务)优先于 macrotask(宏任务) 执行,所以如果有需要优先执行的逻辑,放入microtask 队列会比 task 更早的被执行。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352

推荐阅读更多精彩内容