深入分析下JS中的事件执行机制

本篇文章通过分析一段代码的打印顺序 , 带大家深入了解一下javascript中的事件执行机制 , 希望对大家有所帮助!

深入分析下JS中的事件执行机制

文章插图

前段时间一道笔试题 , 有点迷糊 。 今天彻底分析下JS的事件执行机制 。 【相关推荐:javascript学习教程】
先看一段代码各位小伙伴可以试着写出打印顺序
深入分析下JS中的事件执行机制

文章插图

单线程JS主要作为浏览器的脚本语言 , Js的主要用途是操作DOM , 这就决定了JS必须是单线程 , 如果JS如Java一样是多线程 , 如果两个线程同时操作DOM , 那么浏览器应该怎么执行呢?
JS的发布其实是为了蹭Java的热度 , 其中编写这门语言的时间并不久 , 所以这也就是为什么JS是单线程的原因
JS执行机制JS既然是单线程 , 那么必然会对任务进行一个排序 。 所有的任务都将按照一个规则执行下去 。
    同步任务
    异步任务
【深入分析下JS中的事件执行机制】
深入分析下JS中的事件执行机制

文章插图

同步任务和异步任务进入执行栈中 , JS会先判断任务的类型
    是同步任务 , 直接进入主线程
    是异步任务 , 进入Event Table中 , 注册回调函数Event Queue
    同步任务全部执行结束 , JS会Event Queue中读取函数执行
    这个过程会反复执行 , 直到全部任务执行结束 。 这就是我们常说的事件循环
JS如何判断执行栈为空emmmm , 我不知道 。 。 。 。 JS应该有一套自己独有的逻辑去判断执行栈是否为空 。
异步任务异步的任务执行顺序为:宏任务——>微任务
异步任务可分为
    宏任务
    微任务
常见的宏任务
    I/0
    setTimeout
    setInterval
常见的微任务
    Promise
    .then
    .catch
答案vite 之前配置的一个插件 , 版本有些问题 , 不要管这个红色报警
深入分析下JS中的事件执行机制

文章插图

分析
    开始了 是一个同步任务 , 最先进入执行栈中
    执行task()函数 , a是一个同步任务 , 进入执行栈中
    async/await 是异步转同步的过程 , 第一行代码会同步执行 , 以下的代码会异步 。 b作为一个同步任务进入执行栈中
    a end成为了异步任务的微任务 , 进入执行栈中 ,
目前为止 , 同步任务队列依次是 开始了, a, b
目前为止 , 异步任务队列依次是 宏任务: setTimeout 微任务:a end
如果没有后续代码 , 打印顺序如下
深入分析下JS中的事件执行机制

文章插图

那么问题来了 , 不是说宏任务会比微任务提前执行吗 , 为什么setTimeout打印在a end之后呢?
看这张图
深入分析下JS中的事件执行机制

文章插图

setTimeout 作为了宏任务进入了任务队列 。 所以造成了这种原因
通俗来讲:
async await 导致了微任务的产生 , 但是这个微任务所属于当前的宏任务 。 所以会先执行a end , 执行完毕判断当前宏任务结束 。 执行下一个宏任务 , 打印出了setTimeout
继续走流程
    c 由于Promise的转化 , 变为同步任务进入到任务队列中
    c end 作为Promise衍生的微任务进入任务队列
    d 作为同步任务进入任务队列
目前为止 , 同步任务队列
    a
    b
    c
    d
目前为止 , 异步任务队列
    a end 微任务
    c end 微任务
    setTimeout 宏任务
所以打印顺序如下
深入分析下JS中的事件执行机制

文章插图

后记自己对JS执行机制的理解 , 可能会有些不正确的地方 , 希望各位大佬指出 。
【相关视频教程推荐:web前端】
以上就是深入分析下JS中的事件执行机制的详细内容 , 更多请关注电脑自学网其它相关文章!

推荐阅读