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

你可能感兴趣的:(JS的运行机制)