JavaScript中的JS引擎的执行机制
为什么JavaScript是单线程?
Javascript引擎是单线程机制,首先我们要了解Javascript语言为什么是单线程
JavaScript的主要用途主要是用户互动,和操作DOM。如果JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时这两个节点会有很大冲突,为了避免这个冲突,所以决定了它只能是单线程,否则会带来很复杂的同步问题。此外HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程(UI线程, 异步HTTP请求线程, 定时触发器线程...),但是子线程完全受主线程控制,这个新标准并没有改变JavaScript单线程的本质。
任务队列
单线程一个一个完成任务,前一个任务完成了,才会执行下一个任务,就是排队一样,不能插队,只能前面的人完成才能轮到后一个。那么问题来了,加入一个人在那办理很多任务,一时半会办不完,难道就一直卡在那里吗,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。
- 所有同步任务都在主线程上执行,形成一个执行栈
- 主线程之外,还存在一个任务队列。只要异步任务有了运行结果,就在任务队列之中放置一个事件。
- 一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
- 主线程不断重复上面的第三步。
Event Loop(时间循环)
主线程从任务队列中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)
上图中,主线程运行的时候,产生堆(heap)和栈(stack),。其中,堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针,栈中的代码调用各种外部API,它们在"任务队列"中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去读取"任务队列",依次执行那些事件所对应的回调函数。
function read() {console.log(1);setTimeout(function () {console.log(2);})console.log(3);
}
read()
//输出结果是132复制代码
分析:setTimeout()的就表示当前代码执行完(执行栈清空)以后,立即执行(0毫秒间隔)指定的回调函数。
除了广义的同步任务和异步任务,我们对任务有更精细的定义:
Macrotask (宏任务):
- setImmediate:把回调函数放在事件队列的尾部
- setTimeout:定时器
- setInterval:定时器
Microtask 微任务):
- process.nextTick:把回调函数放在当前执行栈的底部
- Promise:
- async 函数
事件循环的顺序,决定js代码的执行顺序。进入整体代码(宏任务)后,开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务。
以下测试可以得到结论
console.log('main1');
process.nextTick(function() {console.log('process.nextTick1');
});
setTimeout(function() {console.log('setTimeout');process.nextTick(function() {console.log('process.nextTick2');});
}, 0);
new Promise(function(resolve, reject) {console.log('promise');resolve();
}).then(function() {console.log('promise then');
});
console.log('main2');
输出结果是: main1 、 promise 、 main2 、 process.nextTick1 、 promise then 、setTimeout 、 process.nextTick2复制代码
代码分析
首先执行main1是毫无疑问的,接下来看到process.nextTick这个函数,把他排到执行栈的底部(微任务) (未执行),在往下是一个setTimeout函数,应该放到宏任务队里排列(未执行),在看到的,promise函数,执行console.log('promise');then里面要判断排到nextTick的后面(未执行),最后看到输出的main2;微任务执行完,宏任务在实行.。
总结:1. process.nextTick会比setTimeout先执行
2.setTimeout和setImmediate谁先执行,答案是不确定。
Node.js的Event Loop
1. V8引擎解析JavaScript脚本。
2. 解析后的代码,调用Node API。
3. libuv库负责Node API的执行。它将不同的任务分配给不同的线程,形成一个Event Loop(事件循环),以异步的方式将任务的执行结果返回给V8引擎。
4. V8引擎再将结果返回给用户。
JavaScript中的JS引擎的执行机制相关推荐
- 好程序员web前端分享JS引擎的执行机制
好程序员web前端分享JS引擎的执行机制,请先着重牢记两点!JS是单线程语言. JS的EventLoop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的eventloop. 1.灵魂三问: ...
- 从ES规范和引擎细谈 js 中 parseInt 和 parseFloat 的执行机制
从ES规范和引擎细谈 js 中 parseInt 和 parseFloat 的执行机制 parseInt()和parseFloat()这两个常用 API 其实还是有很多"坑"的,以 ...
- Js引擎解析执行 阅读笔记
Js引擎解析执行 阅读笔记 一篇阅读笔记 http://km.oa.com/group/2178/articles/show/145691?kmref=search&from_page=1&a ...
- vj节点_创意编码—如何在JavaScript中创建VJ引擎
vj节点 by George Gally 通过乔治·加利 创意编码-如何在JavaScript中创建VJ引擎 (Creative Coding - How to create a VJ engine ...
- JavaScript中语句与函数的执行辨析
文章出自个人博客https://knightyun.github.io/2018/05/23/js-anonymous-function,转载请申明. Javascript代码中,语句和函数以及匿名函 ...
- Javascript中你必须理解的执行上下文和调用栈
执行上下文在 JavaScript 是非常重要的基础知识,想要理解 JavaScript 的执行过程,执行上下文是你必须要掌握的知识.否则只能是知其然不知其所以然. 理解执行上下文有什么好处呢? 它可 ...
- JS面试题 执行机制是怎样的?
定义: 宏任务:包含执行整体的js代码.事件回调(DOM事件),XHR回调(异步请求,接口回调),定时器(setTimeout/setInterval/setImmediate-->node环境 ...
- JAVA17中使用JS引擎Nashorn
用户手册 开发手册 JAVA15以后删除了nashorn js引擎,需要自己引入 <dependency><groupId>org.openjdk.nashorn</gr ...
- JavaScript中template模板引擎
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
最新文章
- 卷积神经网络(CNN)的原理
- 软件设计原则——开闭原则
- 自然数 素数 质数_在Java中获取素数的无限列表
- 更改密码 sp_password
- SQL 数据分析常用语句
- 世界手机号码格式_世界上手机号码最长的国家是中国,最短的是哪个国家?
- UI设计素材模板|游戏APP界面
- windows查看端口占用 windows端口占用 查找端口占用程序 强制结束端口占用 查看某个端口被占用的解决方法 如何查看Windows下端口占用情况
- 吴恩达深度学习之五《序列模型》学习笔记
- Lucene多字段排序备忘(Sorting by multiple fields)
- php中加载图片淡入淡出,jQuery做出图片滚动淡入淡出
- flash乱码解决方案
- 显卡性能测试软件的是,显卡性能测试软件
- java 实现Word或Excel 转Pdf
- 《数字图像处理》第12讲——图像表示与描述
- 系统配置microsoft服务器,Windows 评估服务设置和配置
- 基于layui后台html模板免费下载
- Linux下vi修改行距,调整label中text显示的行间距
- windows远程桌面的管理
- 前导图法(PDM)或单代号网络(AON)总结
热门文章
- SAP MM 对于MRKO事务代码的几点优化建议
- 组合求解器 + 深度学习 =?这篇ICLR 2020论文告诉你答案
- 深度 | 香港中文大学(深圳)张大鹏教授:生物特征识别的新进展 | CCF-GAIR 2019
- 下一代搜索引擎长啥样?Google 给出了TA的答案
- 科普丨数据中心、云计算、大数据之间有什么区别和联系?
- Python 之 matplotlib (十四)图中图
- pytorch之深入理解collate_fn
- VR视觉健康标准在穗发布 专家:VR使用不要超过45分钟
- 热力学第二定律中的悖论 | 集智百科
- 69张图看懂Elon Musk的脑机接口芯片项目