JavaScript的执行机制
JavaScript是单线程的,任务的执行时自上而下的,这就有了一个问题,当遇到一个比较耗时的任务时,下面的代码就会被阻塞,这就意味着卡死。所以js是有异步的,它的实现主要是通过事件循环(event loop)
事件循环
JavaScript中的任务分为两种:同步和异步
按照分类,当有任务执行时:
- 判断是同步还是异步,同步进入主线程,异步进入event table
- 异步任务在event table中注册函数,当满足触发条件,推入event queue
- 同步任务进入主线程后一直执行,直到主线程空闲时,才会到event queue中查看是否有可执行的异步任务,如果有就推入到主线程中执行
以上三步循环执行,就是event loop
看这幅图
如:
console.log("1")
setTimeout(function() {
console.log(2)
}, 1000)
console.log(3)
- consloe.log(1),同步任务,进入主线程
- setTimeout(),异步任务,进入event table,1秒后进入event queue里
- console.log(3),同步任务,放入主线程
- 先执行主线程中的任务,此时,主线程有,打印1,打印3
- 当主线程执行结束,主线程空闲,于是,主线程到event queue(事件队列)里查看是否有可执行的函数,于是打印2
宏任务和微任务
除了之前说过的同步任务和异步任务,还有更精细的定义:
- macro-task(宏任务):包含整体代码script,setTimeout,setlnterval
- micro-task(微任务):Promise,process.nextTick
不同的任务会进入不同的event queue,比如setTimeout,setlnterval会进入相同的event queue,Promise,process.nextTick会进入相同的event queue
事件循环的顺序,决定js代码的执行顺序,进入整体代码(宏任务)后,开始第一次循环。接着执行所有微任务。然后再从宏任务开始,待一个任务队列执行完毕,再执行微任务。代码演示
console.log("start")
setTimeout(function(){
console.log("setTimeout")
},0) new Promise(function(resolve){
resolve()
console.log("promise")
}).then(function(){
console.log("then")
}) console.log("end")
先按照最开始的方式解释,及同步任务和异步任务
- console.log("start"),同步任务,进入主线程,直接打印
- setTimeout,异步任务,进入event table
- Promise,同步任务,进入主线程,直接打印
- then,异步,放入event table
- console.log("end")同步任务,直接打印
- 结束,先执行主线程的任务,start => promise => end ,主线程结束,查看任务队列中是否有待执行的任务,打印 setTimeout => then
- 即,start => promisr => end => setTimeout => then
然而执行的结果却是这样的:start => promisr => end => then => setTimeout
所以我们要同过宏任务和微任务的方式解释
- 首先执行script下的宏任务,遇到console.log("start"),直接打印 “start”
- 遇到setTimeout,将其放入宏任务队列
- 遇到promise,直接执行,打印 “promise”
- 遇到then,微任务,放入微任务队列
- 遇到console.log("end"),直接打印 “end”
- 此时,整体script作为第一个宏任务执行结束,看看有没有微任务,发现有个then在微任务的event queue中,执行,打印“then”
- 到此第一轮事件循环结束,开始第二轮事件循环,当然要从宏任务event queue开始,此时宏任务event queue中有setTimeout,立即执行,打印“setTimeout”
- 结束,此时的顺序start => promisr => end => then => setTimeout
来看关系图
最后
要知道js是一门单线程语言,所有实现异步的方式,其实都是用同步模拟出来的,而事件循环event loop 是实现异步的一种方法,也是js的执行机制
JavaScript的执行机制的更多相关文章
- javaScript的执行机制-同步任务-异步任务-微任务-宏任务
一.概念理解 1.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变.所以一切javascr ...
- javascript的执行机制—Event Loop
既然今天要谈的是javascript的事件循环机制,要理解事件循环,首先要知道事件循环是什么. 我们先从一个例子来看一下javascript的执行顺序. <script> setTimeo ...
- 一段代码说明javascript闭包执行机制
假设你能理解以下代码的执行结果,应该就算理解闭包的执行机制了. var name = "tom"; var myobj = { name: "jackson", ...
- JavaScript 的执行机制
一.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web Worker,但javascript是单线程这一核心仍未改变. 为什么js是单线程的语言?因为最初 ...
- javascript执行机制
文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的 ...
- 彻底弄懂 JavaScript 执行机制
本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...
- JavaScript 执行机制
一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTi ...
- 转载---JavaScript执行机制
很好的一篇文章,原地址 JavaScript执行机制 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不 ...
- 【js】javaScript 执行机制
javascript 是一门单线程语言(按照语句一行一行的执行) let a = '1'; console.log(a); let b = '2'; console.log(b); 这样子正常执行是没 ...
随机推荐
- Neutron命令测试1
Refer: http://wenku.baidu.com/link?url=DtrbhO0A393hg8kOWKX0XYuZtSC8Iu0occn8NF1pYcUwNzlaSq5qXCQoNEBDM ...
- 关于老教授之家项目的思考 && 中国互联网+大赛培训
最近在做中国互联网+竞赛相关的项目,有一点思考在这里记录下来,算是一份经历,日后可以再回顾,这也是我真正参加的一个大型比赛,作为技术人员可能更多的是从事技术,但是在其他方面能贡献自己的一份力量也是不错 ...
- C/C++中 static 的作用
在C中,有三个作用: 1.修饰全局变量: 作用是隐藏,也就是这个全局变量仅在本文件中可见. 2.修饰局部变量: 作用是扩展变量的生存期,令这个局部变量成为静态的. 3.修饰函数: 作用是隐藏,将此函数 ...
- Linux 安装 webmin
下载webmin的rpm包 yum install webmin-rpm systemctl start webmin 即可
- c#-day02学习笔记
类型转化 为什么要类型转化:因为C#语言是强类型的语言,所以区分了很多的类型,类型和类型之间是不能直接赋值的,如果要赋值 就需要转换类型 类型转换分为两大类: 第一类:隐式转换 隐式转换是系统默认的转 ...
- SSIS 错误代码 DTS_E_CANNOTACQUIRECONNECTIONFROMCONNECTIONMANAGER
[OLE DB 源 [2]] 错误: SSIS 错误代码 DTS_E_CANNOTACQUIRECONNECTIONFROMCONNECTIONMANAGER.对连接管理器“test.trade_sh ...
- cf868F. Yet Another Minimization Problem(决策单调性 分治dp)
题意 题目链接 给定一个长度为\(n\)的序列.你需要将它分为\(m\)段,每一段的代价为这一段内相同的数的对数,最小化代价总和. \(n<=10^5,m<=20\) Sol 看完题解之后 ...
- 零基础逆向工程35_Win32_09_临界区_CRITICAL_SECTION结构
1 引入 为什么会存在临界区这中机制呢?是为多线程同时访问全局变量而引入的.也就是上一篇帖子的末尾流出的问题程序的解决办法. 看懂了上面的,那么我们再罗嗦总结一下: 1.多线程访问全局变量时,存在线程 ...
- cookie 的 写入,读取, 删除
页面跳转,cookie存储参数 1,设置cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp ...
- canvas制作运动的小球
<!DOCTYPE html> <head> <title>canvas</title> <style> .canvas{ border: ...