JS的运行机制

基础知识

js作为浏览器脚本语言,它的主要用途是与用户互动,以及操作DOM,因此js是单线程,也避免了同时操作同一个DOM的矛盾问题;

为了利用多核CPU的计算能力,H5的Web Worker实现的“多线程”实际上指的是“多子线程”,完全受控于主线程,且不允许操作DOM;

js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数。这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)

所有同步任务都在主线程上执行,形成一个执行栈(execution context stack);

如果在微任务执行期间微任务队列加入了新的微任务,会将新的微任务加入队列尾部,之后也会被执行;

js中的异步操作

setTimeOut    setInterval    ajax   promise   I/O

同步任务 or 异步任务

同步任务(synchronous):在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;

异步任务(asynchronous):不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

      异步任务: 微任务和宏任务

            宏任务(macro-task):整体代码script、setTimeOut、setInterval

            微任务(mincro-task):promise.then、promise.nextTick(node)

            (注:new Promise是会进入到主线程中立刻执行,而promise.then则属于微任务)

Event Loop事件循环


1. 在执行script(作为第一个宏任务)开始执行的时候,会把所有的代码分成 同步任务 和 异步任务

2.同步任务在主线程依次执行

3.异步任务分为微任务和宏任务,微任务和宏任务分别进入Event Table,并在里面注册回调函数,每当指定事件完成时,Event Table会把这个函数推进Event Queue(等待)

4.主线程任务执行完成后,会检查微任务的Event Queue,如果有就全部执行,没有就就执行下一个宏任务

列子1:

1.setTimeout是异步,且是宏函数,放到宏函数队列中;

2.new Promise是同步任务,直接执行,打印2,并执行for循环;

3.promise.then是微任务,放到微任务队列中;

4.console.log(4)同步任务,直接执行,打印4;

5.此时主线程任务执行完毕,检查微任务队列中,有promise.then,执行微任务,打印3;

6.微任务执行完毕,第一次循环结束;从宏任务队列中取出第一个宏任务到主线程执行,打印1;

7.结果:2,4,3,1



列子2:

1.add()是同步任务,直接执行,打印1;

2.add()里面的setTimeout是异步任务且宏函数,记做timer1放到宏函数队列;

3.add()下面的setTimeout是异步任务且宏函数,记做timer2放到宏函数队列;

4.new Promise是同步任务,直接执行,打印4;

5.Promise里面的setTimeout是异步任务且宏函数,记做timer3放到宏函数队列;

6.Promise里面的for循环,同步任务,执行代码;

7.Promise.then是微任务,放到微任务队列;

8.console.log(8)是同步任务,直接执行,打印8;

9.此时主线程任务执行完毕,检查微任务队列中,有Promise.then,执行微任务,发现有setTimeout是异步任务且宏函数,记做timer4放到宏函数队列;

10.微任务队列中的console.log(7)是同步任务,直接执行,打印7;

11.微任务执行完毕,第一次循环结束;

12.检查宏任务Event Table,里面有timer1、timer2、timer3、timer4,四个定时器宏任务,按照定时器延迟时间得到可以执行的顺序,即Event Queue:timer2、timer4、timer3、timer1,取出排在第一个的timer2;

13.取出timer2执行,console.log(3)同步任务,直接执行,打印3;

14.没有微任务,第二次Event Loop结束;

15.取出timer4执行,console.log(6)同步任务,直接执行,打印6;

16.没有微任务,第三次Event Loop结束;

17.取出timer3执行,console.log(5)同步任务,直接执行,打印5;

18.没有微任务,第四次Event Loop结束;

19.取出timer1执行,console.log(2)同步任务,直接执行,打印2;

20.没有微任务,也没有宏任务,第五次Event Loop结束;

21.结果:1,4,8,7,3,6,5,2

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

推荐阅读更多精彩内容

  • 一、为什么JS语言是单线程 js的单线程和他的用途有关。作为浏览器脚本语言,js的主要用途就是与用户互动,以及操作...
    fenerchen阅读 2,426评论 0 2
  • title: JS的运行机制date: 2018-12-28 11:02:52tags: js 为什么JavaSc...
    Kris_lee阅读 400评论 0 0
  • 最近比较忙,硬是没抽出时间总结一点小知识。最近在网上看到一篇不错的文章,转一下!本文的目的就是要保证你彻底弄懂ja...
    殖民_FE阅读 282评论 1 2
  • 一、为什么JavaScript是单线程? (1) JS为什么是单线程的? JS最初被设计用在浏览器中,那么想象一下...
    木子川页心阅读 1,891评论 0 27
  • 1.基础知识 js作为浏览器脚本语言,它的主要用途是与用户互动,以及操作DOM,因此js是单线程,也避免了同时操作...
    勇么阅读 262评论 0 0