JS事件执行机制的执行规则和顺序是怎样
前段时间一道笔试题,有点迷糊。今天彻底分析下JS的事件执行机制。
先看一段代码
各位小伙伴可以试着写出打印顺序
单线程
JS
主要作为浏览器的脚本语言,Js
的主要用途是操作DOM,这就决定了JS
必须是单线程,如果JS
如Java一样是多线程,如果两个线程同时操作DOM,那么浏览器应该怎么执行呢?
JS
的发布其实是为了蹭Java的热度,其中编写这门语言的时间并不久,所以这也就是为什么JS是单线程的原因
JS执行机制
JS既然是单线程,那么必然会对任务进行一个排序。所有的任务都将按照一个规则执行下去。
同步任务
异步任务
同步任务和异步任务进入执行栈中,JS会先判断任务的类型
是同步任务,直接进入主线程
是异步任务,进入
Event Table
中,注册回调函数Event Queue
同步任务全部执行结束,JS会
Event Queue
中读取函数执行这个过程会反复执行,直到全部任务执行结束。这就是我们常说的
事件循环
JS如何判断执行栈为空
emmmm,我不知道。。。。JS应该有一套自己独有的逻辑去判断执行栈是否为空。
异步任务
异步的任务执行顺序为:宏任务——> 微任务
异步任务可分为
宏任务
微任务
常见的宏任务
I/0
setTimeout
setInterval
常见的微任务
Promise
.then
.catch
答案
vite 之前配置的一个插件,版本有些问题,不要管这个红色报警
分析
开始了
是一个同步任务,最先进入执行栈中执行
task()
函数,a
是一个同步任务,进入执行栈中async/await 是异步转同步的过程,第一行代码会同步执行,以下的代码会异步。
b
作为一个同步任务进入执行栈中a end
成为了异步任务的微任务,进入执行栈中,
目前为止,同步任务队列依次是 开始了
, a
, b
目前为止,异步任务队列依次是 宏任务: setTimeout
微任务:a end
如果没有后续代码,打印顺序如下
那么问题来了,不是说宏任务会比微任务提前执行吗,为什么setTimeout
打印在a end
之后呢?
看这张图
setTimeout 作为了宏任务进入了任务队列。所以造成了这种原因
通俗来讲:
async await 导致了微任务的产生,但是这个微任务所属于当前的宏任务。所以会先执行a end
,执行完毕判断当前宏任务结束。执行下一个宏任务,打印出了setTimeout
继续走流程
c
由于Promise的转化,变为同步任务进入到任务队列中c end
作为Promise衍生的微任务进入任务队列d
作为同步任务进入任务队列
目前为止,同步任务队列
a
b
c
d
目前为止,异步任务队列
a end 微任务
c end 微任务
setTimeout 宏任务
所以打印顺序如下
后记
自己对JS执行机制的理解,可能会有些不正确的地方,希望各位大佬指出。
以上就是关于“JS事件执行机制的执行规则和顺序是怎样”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注网络,小编每天都会为大家更新不同的知识。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: JS事件执行机制的执行规则和顺序是怎样
本文地址: https://pptw.com/jishu/654417.html