Js之事件循环(执行机制)
js的执行机制是事件循环
什么是事件循环?
js引擎在执行代码时,首先会将同步代码加入到主线程中,异步代码会放到event table中注册回调函数,
当主线程空闲之后,event table中的回调函数就会被加入到主线程中执行。
当遇到宏任务(例如:script、setTimeout、setInterval等)又有微任务(promise、promise.nextTick)时,首先遇到异步代码其回调被加入到event table中,遇到同步代码直接执行,遇到微任务如promise中的.then会将其加入到微任务的队列中,当前这个宏任务执行完成,就会去执行微任务,微任务执行完成,也就是完成了一个tick;就会进入到执行下一个tick,又从宏任务到微任务开始执行,这样循环就是事件循环。
案例:
要知道node和浏览器的event loop有差异,这里以浏览器为准
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
参考资料:
js运行机制:https://segmentfault.com/a/1190000012806637
js运行机制深入浅出:https://zhuanlan.zhihu.com/p/33125763
Js之事件循环(执行机制)的更多相关文章
- JS JavaScript事件循环机制
区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...
- Node.js 的事件循环机制
目录 微任务 事件循环机制 setImmediate.setTimeout/setInterval 和 process.nextTick 执行时机对比 实例分析 参考 1.微任务 在谈论Node的事件 ...
- 浏览器中 JS 的事件循环机制
目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...
- Node.js:事件循环
ylbtech-Node.js:事件循环 1.返回顶部 1. Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 ...
- js的事件循环绑定和jQuery的隐式迭代
js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...
- js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...
- JS:事件循环机制、调用栈以及任务队列
点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...
- JS基础-事件循环机制
从一道题浅说 JavaScript 的事件循环 原文链接: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 ...
- JS浏览器事件循环机制
文章来自我的 github 博客,包括技术输出和学习笔记,欢迎star. 先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. ...
随机推荐
- C# Dictionary源码剖析---哈希处理冲突的方法有:开放定址法、再哈希法、链地址法、建立一个公共溢出区等
C# Dictionary源码剖析 参考:https://blog.csdn.net/exiaojiu/article/details/51252515 http://www.cnblogs.com/ ...
- 20165313 预备作业3 Linux安装及学习
虚拟机安装 刚开始我觉得既然有了教程,安装虚拟机应该是很简单的事情,然而由于电脑本身系统地地问题,导致我数次安装失败,后来咨询了老师并查阅了资料,最终才安装好. 其中最主要的问题就是电脑虚拟化的修改. ...
- hdu2328 Corporate Identity 扩展KMP
Beside other services, ACM helps companies to clearly state their “corporate identity”, which includ ...
- 企业库实现AOP的几种方法
1.创建新对象时,分继承基类和继承接口 TargetClass theTarget = PolicyInjection.Create<TargetClass>(parameter1, pa ...
- oracle使用flashback时,没有显示undosql
这是因为oracle11g没有开启这个功能 用管理员用户sys(也就是sysdba)执行以下语句即可 alter databases add supplemental log data; 如果我们想恢 ...
- Eclipse无法编译,提示错误“找不到或者无法加载主类”解决方法
jar包问题: 1.项目的Java Build Path中的Libraries中有个jar包的Source attachment指为了一个不可用的jar包, 解决办法是:将这个不可用的jar包remo ...
- Spring定时器corn表达式详解
1.结构 Spring定时器corn表达式详解 2.各字段的含义 字段 允许值 允许的特殊字符 秒 0~59 - * / 分 0~59 - * / 小时 0~23 - * / 日期 1~31 - * ...
- day 47 html 学习 css 学习
前端基础之CSS CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS(Cascading Style Sheet,层叠样式表)定义如何显示 ...
- tile38 roaming-geofences 试用
tile38 支持动态实时的移动对象的数据监控 环境准备 docker-compose 文件 version: "3" services: app: image: tile ...
- 备忘录模式-Memento Pattern
1.主要优点 备忘录模式的主要优点如下: (1)它提供了一种状态恢复的实现机制,使得用户可以方便地回到一个特定的历史步骤,当新的状态无效或者存在问题时,可以使用暂时存储起来的备忘录将状态复原. (2) ...