再看浏览器事件循环和NodeJS事件循环

事件循环是浏览器和Node用来解决JS单线程运行带来的问题的一种运行机制。浏览器和NodeJS环境下的事件循环是不同的,浏览器是完全遵循HTML5规范去实现的,NodeJS的事件循环是基于libuv实现的,在HTML5规范的基础上做了些取舍,为了保证上层(即javascript)语法一致,API方面和浏览器差不多,但是宏/微任务的执行逻辑和浏览器完全不一样。比如NodeJS新增了nextTick、setImmediate,而没有MutationObserver。
浏览器和NodeJS下宏任务和微任务分别有:

可以看到:
1、浏览器端只有IE才有setImmediate,NodeJS端又启用了它。
2、MutationObserver用来观察Dom节点变化,包括子节点的删除、属性修改、文本内容修改等等。
3、requestAnimationFrame(foo)涵义是延迟执行foo,而延迟多长时间由浏览器根据操作系统当前的显示器刷新率来决定,从而保证它的执行和显示器刷新频率保持一致,避免丢帧现象。解决了用setTimeout制作动画时自行设定延时不准确而丢帧的问题,所以requestAnimationFrame不是setTimeout的替代,而是特定场景下的补充。需要注意的是这个方法虽然能够保证回调函数在每一帧内只渲染一次,但是如果这一帧有太多任务执行,还是会造成卡顿的;因此它只能保证重新渲染的时间间隔最短是屏幕的刷新时间。
4、我不认为requestAnimationFrame和UI rendering属于宏任务,所以划掉了。
怎么看UI render呢?
网上不少地方说UI render(也就是绘制界面)也列为宏任务,但我从HTML标准里看到,其实UI render和宏任务是平行的,完整的事件循环是:执行第一个宏任务 -> 执行所有微任务 -> UI render -> 执行下一个宏任务...。重点看UI render,HTML标准里提供了一段伪代码,用来说明UI render阶段干了什么:
可以看到UI render内部先后处理了窗口变化、滚动、媒体查询、CSS动画、全屏、requestAnimationFram的回调、IntersectionObserver的回调,最后再绘制。也就是说这些异步任务都不属于宏任务和微任务的范畴,而是集中在UI render阶段执行。
1、我们看一看IntersectionObserver,它是用来监听元素是否出现(出现的比例)在屏幕视口的。
2、我们再看一个也会产生异步任务的API,requestIdleCallback。简单来说,它是让回调函数在进程空闲时再执行,如果进程忙的话就延后到下一次。可以传一个timeout时间requestIdleCallback(foo, {timeout:6000}),表示6000ms以后就算进程忙也要强制执行。那么怎么才算进程不忙呢?HTML标准做了说明:当宏任务和微任务全部执行完了才算。另外也可以看出,requestIdleCallback的回调是在UI render的最后一步(第12步)才执行的,而且还有可能不执行,优先级非常之低。
3、除了上面讲的窗口变化、滚动、全屏等dom事件,其他dom事件基本都是同步的,不是异步任务。

NodeJS的事件循环

NodeJS 采用 V8 作为JS解析引擎,而I/O处理方面使用了自己设计的libuv,libuv是一个基于事件驱动的跨平台抽象层,封装了不同操作系统一些底层特性,对外提供统一的API,事件循环机制也是它里面的实现。在浏览器中,可以认为只有一个宏队列,所有的macrotask都会被加到这一个宏队列中,但是在NodeJS中,不同的macrotask会被放置在不同的宏队列中,有
1、Timers Queue(放置setTimeout、setInterval的回调)
2、IO Callbacks Queue
3、Check Queue(放置setImmediate的回调)
4、Close Callbacks Queue
在浏览器中,也可以认为只有一个微队列,所有的microtask都会被加到这一个微队列中,但是在NodeJS中,不同的microtask会被放置在不同的微队列中,所以执行微任务的时候,NodeJS会优先执行NextTick Queue里的所有任务,再执行Other Micro Queue的所有任务。
1、NextTick Queue(放置process.nextTick的回调)
2、Other Micro Queue(放置Promise等其他microtask)
所以,NodeJS环境的事件循环是:

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

推荐阅读更多精彩内容