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之事件循环(执行机制)的更多相关文章

  1. JS JavaScript事件循环机制

    区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...

  2. Node.js 的事件循环机制

    目录 微任务 事件循环机制 setImmediate.setTimeout/setInterval 和 process.nextTick 执行时机对比 实例分析 参考 1.微任务 在谈论Node的事件 ...

  3. 浏览器中 JS 的事件循环机制

    目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...

  4. Node.js:事件循环

    ylbtech-Node.js:事件循环 1.返回顶部 1. Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 ...

  5. js的事件循环绑定和jQuery的隐式迭代

    js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...

  6. js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)

    javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...

  7. JS:事件循环机制、调用栈以及任务队列

    点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...

  8. JS基础-事件循环机制

    从一道题浅说 JavaScript 的事件循环 原文链接: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 ...

  9. JS浏览器事件循环机制

    文章来自我的 github 博客,包括技术输出和学习笔记,欢迎star. 先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. ...

随机推荐

  1. Java设计模式(一)

    1.什么是设计模式? 在软件工程中,设计模式是对软件设计中普遍存在的各种问题,所提出的 解决方案. 换句话说,设计模式是一套被反复使用.多数人知晓的.经过分类的.代码设计的 经验的总结.使用设计模式是 ...

  2. D:\yyy\UNetSegmentation_code_20180301\data\train

    key1 numpy.save("filename.npy",a) 利用这种方法,保存文件的后缀名字一定会被置为.npy,这种格式最好只用 numpy.load("fil ...

  3. c++——数据结构

    1.写一个函数PrintN,使得传入一个N,打印从1到N的全部整数 #include<stdio.h> //循环实现 void PrintN(int N){ int i; ;i<=N ...

  4. happens-before俗解

    happens-before俗解 学习Java并发,到后面总会接触到happens-before偏序关系.初接触玩意儿简直就是不知所云,下面是经过一段时间折腾后个人对此的一点浅薄理解,希望对初接触的人 ...

  5. C++学习(二十九)(C语言部分)之 顺序表

    一.数据结构组织 存放数据的方式 精心选择的数据结构可以提升效率 数据结构 1.逻辑结构 一对多关系 父与子 一对一关系 排队中 多对多关系 两地的路线 2.存储结构 数据存放的位置关系 顺序存储数据 ...

  6. 【HDOJ4635】【Tarjan缩点+思维】【经典】

    http://acm.hdu.edu.cn/showproblem.php?pid=4635 Strongly connected Time Limit: 2000/1000 MS (Java/Oth ...

  7. struts2参数转换器用法---2

    //第二种转换器写法public class PointConvert2 extends StrutsTypeConverter{ @Override public Object convertFro ...

  8. ionic1实现热更新以版本检测更新安装包的方法

    1.需要下载热更新插件:插件名称是cordova-hot-code-push 首先打开cli,执行命令 npm install -g cordova-hot-code-push-cli 此功能主要是为 ...

  9. 用idea编写第一个jsp文件

    创建一个JAVA-web项目的前提:1.下载并安装JDK2.安装并配置Tomcat服务器 下面开始创建JAVA-web项目: 1.File——>new——>Project...   2.跟 ...

  10. jsp页面继承

    功能类似 django template 中的  extends 功能 使用 1.需要下载rapid-core-4.0.jar    导入到web-inf下lib中   下载地址   http://w ...