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. input标签(按钮)

    按钮: <input type="button" name="..." value="..." /> <input typ ...

  2. P2279 消防局的设立(贪心+dp)

    题目链接:传送门 题目大意: 给定一棵树(N个基地N-1条边): 用半径为2的消防局覆盖这N个基地,问最小的消防局数量. (树上距离为k的最小覆盖问题) 思路: 每次贪心地找到不被覆盖的最深的一个节点 ...

  3. js 调用 手机 相机摄像机麦克风

    https://www.cnblogs.com/avon/p/5996368.html

  4. (12)模板语言-with

    with的用处 当一个变量特别特别长,可以用with给这个变量重命名 views.py from django.shortcuts import render,HttpResponse def ind ...

  5. (0)前端总结(HTML + CSS + JQ)

    HTML 1.<meta charset="UTF-8">  #设置页面编码,这个设置英文则现在国内浏览器会弹出是否要转换中文 2.<title>我的第一个 ...

  6. Apache Kafka 源码剖析

    Getting Start 下载 http://kafka.apache.org/ 优点和应用场景 Kafka消息驱动,符合发布-订阅模式,优点和应用范围都共通 发布-订阅模式优点 解耦合 : 两个应 ...

  7. 《DSP using MATLAB》Problem 5.34

    第1小题 代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  8. Ajax异步请求原理的分析

    我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事情都做不了.这就 ...

  9. 有关O_APPEND标志和lseek()的使用

    编程之路刚刚开始,错误难免,希望大家能够指出. O_APPEND表示以每次写操作都写入文件的末尾.lseek()可以调整文件读写位置. <<Linux/UNIX系统编程手册>> ...

  10. UVA10294 Arif in Dhaka (First Love Part 2)

    题意 PDF 分析 用n颗宝石串成项链和手镯, 每颗宝石的颜色可以t种颜色中的一种,当A类项链经过旋转得B类项链时,A和B属于一类项链, 而手镯不仅可以旋转还可以翻转,当A类手镯经过翻转得得到B类手镯 ...