js执行机制

Posted 张若昀的小迷妹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js执行机制相关的知识,希望对你有一定的参考价值。

1.     关于javascript

js是一门单线程语言,一切js版的‘多线程’都是用单线程模拟起来的。

2.     js事件循环

将任务分为2类:同步任务、异步任务

技术分享图片

同步任务进入主线程,异步任务进入Event Table并注册函数

当指定的事件完成时,Event Table会将这个函数移入Event Queue

主线程内的任务执行完毕为空后,会去Event Queue读取对应的函数,进入主线程运行

以上过程会不断的重复,即Event Loop事件循环

js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空

 

技术分享图片

ajax进入Event Table,注册回调函数success

执行console.log(‘代码执行结束’)

ajax事件完成后,回调函数success进入event Queue

主线程从Event Queue读取回调函数success并执行

3.     setTimeout  异步任务

技术分享图片

task()进入Event Table并注册,计时开始

执行sleep()

3秒到了,计时事件完成,task()进入Event Queue,此时sleep()仍在执行

sleep()执行完毕

task()从Event Queue进入主线程并执行

 

setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲执行,不用再等多少秒,只要主线程执行栈内的同步任务全部执行完就可以马上执行

4.     setInterval

setInterval会每隔指定时间将注册的函数置入Event Queue

setInterval(fn,ms)不是每过ms秒就执行一次fn,而是每过ms秒,就会有fn进入Event Queue

一旦setInterval的回调函数fn执行时间超过了延迟时间ms,那么就完全看不出来有时间间隔了

5.     Promise与process.nextTick(callback)

宏任务 整体代码script setTimeout setInterval

微任务 Promise process.nextTick

不同类型的任务会进入不同的Event Queue

 

技术分享图片

 

技术分享图片

先遇到setTimeout,将其回调函数注册后分发到宏任务Event Queue

接下来遇到Promise,new Promise立即执行,then函数分发到微任务Event Queue

遇到console.log(‘console’)立即执行

第一次宏任务执行结束,查看微任务,发现了then,执行

第一轮事件循环结束,开始下一轮

第二轮,发现了宏任务Event Queue中的setTimeout立即执行

结束

6.     复杂的例子

技术分享图片

技术分享图片

第一轮事件循环Event Loop

console.log(‘1’);

遇到setTimeout,将其回调函数分发到宏任务Event Queue中,记为setTimeout1

遇到process.nextTick(),其回调函数被分发到微任务Event Queue中,记为process1

遇到Promise,输出7,then被分发到微任务Event Queue,记为then1

又遇到setTimeout,其回调函数被分发到宏任务Event Queue中,记为setTimeout2

技术分享图片

第一轮宏任务执行结束,开始执行微任务,输出6和8

第一轮事件循环输出1 7 6 8

第二轮事件循环Event Loop

宏任务setTimeout1:

        首先输出2

        将process.nextTick()分发到微任务EventQueue,记为process2

        new Promise立即执行,输出4

        then分发到微任务Event Queue,记为then2

技术分享图片

第二轮宏任务执行完毕,开始执行微任务,输出3和5

第二轮事件结束,输出2 4 3 5

第三轮事件循环Event Loop

宏任务setTimeout2:

        输出9

        将process.nextTick()分发到微任务EventQueue,记为process3

       then分发到微任务Event Queue,记为then3

技术分享图片

第三轮宏任务执行完毕,开始执行微任务,输出10和12

第三轮事件结束,输出9 10 12

7.     总结

js是一门单线程语言

Event Loop是js的执行机制

以上是关于js执行机制的主要内容,如果未能解决你的问题,请参考以下文章

10分钟理解JS引擎的执行机制

JS引擎的执行机制

JS引擎的执行机制event loop

浅析JS异步执行机制

js执行机制:event loop(多图理解)

JS 引擎的执行机制