ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

JS执行机制---1

2022-06-20 13:04:18  阅读:148  来源: 互联网

标签:异步 主线 JS --- 任务 机制 执行 event Event


js的执行机制

1.JavaScript是一门单线程语言。

为什么说js是单线程,因为js执行代码是从上往下执行的,

2.Event Loop(事件循环)是JavaScript的执行机制。

事件循环、eventloop\运行机制 这三个术语其实说的是同一个东西,

“先执行同步操作异步操作排在事件队列里”这样的理解其实也没有任何问题但如果深入的话会引出很多其他概念,

 比如event table(事件表)和event queue(事件队列), 我们来看运行过程:

当代码从上往下执行时,

1.首先判断JS是同步还是异步,同步就进入主线程运行,异步就进入event table.

2.异步任务在event table中注册事件,当满足触发条件后,(触发条件可能是延时也可能是ajax回调),被推入event queue

3.同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中。


js引擎会监视js执行的进程,会持续不断的检查 主线程 执行栈是否为空,一旦为空,就会去event queue那里检查是否有等待被调用的函数。
console.log(1) // 同步任务进入主线程
setTimeout(fun(),0)   // 异步任务,被放入event table, 0秒之后被推入event queue里
console.log(3) // 同步任务进入主线程

除了广义上分为同步任务,异步任务,任务还有更精细的定义:

  1. 宏任务     包含整个script代码块,setTimeout
  2. 微任务      Promise,异步ajax

在事件循环(主线程 → 事件队列)中其实有更细致的操作流程,即(宏任务 → 微任务)之间的循环,如下图所示:

所以通常来说,我们页面中的js执行顺序是这样的:
  • 第一轮事件循环:
  1. 主线程执行js整段代码(宏任务),将ajax、setTimeout、promise等回调函数注册到Event Queue,并区分宏任务和微任务。
  2. 主线程提取并执行Event Queue 中的ajax、promise等所有微任务,并注册微任务中的异步任务到Event Queue。
  • 第二轮事件循环:
  1. 主线程提取Event Queue 中的第一个宏任务(通常是setTimeout)。
  2. 主线程执行setTimeout宏任务,并注册setTimeout代码中的异步任务到Event Queue(如果有)。
  3. 执行Event Queue中的所有微任务,并注册微任务中的异步任务到Event Queue(如果有)。
  • 类似的循环:宏任务每执行完一个,就清空一次事件队列中的微任务

注意:事件队列中分“宏任务队列”和“微任务队列”,每执行一次任务都可能注册新的宏任务或微任务到相应的任务队列中,只要遵循“每执行一个宏任务,就会清空一次事件队列中的所有微任务”这一循环规则,就不会弄乱。

 

参考:https://juejin.cn/post/6844903667301089288

标签:异步,主线,JS,---,任务,机制,执行,event,Event
来源: https://www.cnblogs.com/jingxin01/p/16392865.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有