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 资源分配的基本单位,进程是由一个或者多个线程组成的. ...
随机推荐
- ORB(oriented FAST and rotated BRIEF)特征提取与检测
ORB采取FAST算法检测特征点,采取BRIEF算法计算特征点描述子. 1.检测特征点 检测候选特征点周围一圈的像素值,若有足够多的像素值与候选特征点的差异都较大,则认为该候选特征点是特征点. 对于上 ...
- react状态提升问题::::
父组件传值给子组件,只需要在组件上写上naverightstates={this.state.naverightstates},然后在子组件里面引用this.props.naverightstates ...
- XTU1254 Blance 如何实现称出1∼n 克的物品,请问最少需要几颗砝码?
题目描述 小明有一架天平,小明想称出1∼n 克的物品,请问最少需要几颗砝码? 比如小明想称出1∼4 克的物品,需要2颗砝码,为1和3克. balance 输入 第一行是一个整数T(1≤T≤10000) ...
- Django项目的创建和设计模式
1.安装django pip install django 2.创建项目 进入到项目文件夹的根目录下 django-admin startproject <project_name ...
- sql优化学习(一)
找到一套好的sql优化视频,地址如下: http://www.ppvke.com/10355.html p.s. 我在百度搜索半天都是些乱七八糟的东西,我用google搜索后,立刻就发现上面的视频地址 ...
- gorm-Duplicate-entry
gorm insert data to mysql tips: (Error 1062: Duplicate entry '267857' for key 'PRIMARY') reason: u ...
- zabbix怎么把英文界面换成中文
虽然能勉勉强强能看懂大部分英文,但感觉还是直接换中文方便上手一点
- The Microservices Workflow Automation Cheat Sheet
Written by Bernd Rücker on Dec 12 2018 in the Best Practices category. Editor’s Note: This post orig ...
- apache常用配置文件讲解
apache 的httpd.conf常用配置说明 # ServerRoot: The top of the directory tree under which the server's # conf ...
- 普林斯顿数学指南(第二卷) (Timothy Gowers 著)
第IV部分 数学的各个分支 IV.1 代数数 IV.2 解析数论 IV.3 计算数论 IV.4 代数几何 IV.5 算术几何 IV.6 代数拓扑 IV.7 微分拓扑 IV.8 模空间 IV.9 表示理 ...