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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容