文章目录
JS运行机制
1、谈谈JS的运行机制
-
JS是单线程的,因为js离不开用户的操作,和用途有关
-
例如:操作页面上的dom元素,假设js是多线程,一个线程是删除dom,一个线程是增加dom,这样就不知道该以哪个线程为主了
2、JS语言的特点?
- 单线程、解释性语言
event-loop
-
事件循环机制 由三部分组成:调用栈、微任务队列(微队列)、消息队列(宏队列)
-
event-loop开始的时候,会从全局一行一行地执行,会压入到调用栈中,被压入的函数被称之为帧,当函数返回后会从调用栈弹出
-
function func1(){ console.log(1); } function func2(){ console.log(2); func1(); console.log(3); } func2(); //2 1 3
-
先执行func2(),func2()被放入调用栈中,直接打印输出2,调用func1(),func1()被放入调用栈中,打印输出1,func1()执行完毕,从调用栈中弹出,接着打印输出3,fun2()执行完毕,从调用栈中弹出
-
-
js中的异步操作,比如fetch、setTimeout、setInterval压入到调用栈中的时候里面的消息会进去到消息队列中去,消息队列中会等到调用栈清空之后再执行
-
function fun1(){ console.log(1); } function fun2(){ setTimeout(()=>{ console.log(2); }); fun1(); console.log(3); } fun2(); //1 3 2
-
执行fun2(),将fun2()放入调用栈中,遇到定时器,将console.log(2)放入消息队列中,执行fun1(),输出1,fun1()执行完毕,从调用栈弹出,直接输出3,fun2()执行完毕,将fun2()从调用栈弹出,最后执行消息队列中的console.log(2),输出2
-
-
promise、async、await的异步操作的会加入到微任务中去,会在调用栈清空的时候立即执行,调用栈中加入的微任务会立马执行
-
var p=new Promise((resolve,reject)=>{ console.log(4); resolve(5); }) function f1(){ console.log(1); } function f2(){ setTimeout(()=>{ console.log(2); }); f1(); console.log(3); p.then(value=>{ console.log(value); }) } f2(); //4 1 3 5 2
-
定义p,将new promise的操作放入调用栈中,立即执行,输出4,将resolve(5)放入微任务队列,定义p的操作执行完毕,从调用栈弹出。执行f2(),将f2()压入调用栈,一来就遇到定时器,将console.log(2)压入消息队列,执行f1(),将f1()压入调用栈,输出1,f1()执行完毕,将f1()从调用栈里弹出,输出3,执行then(),输出5,resolve(5)弹出微任务队列,执行消息队列里的console.log(2),将其从消息队列里弹出
-