js单线程的本质 Event Loop解析

怎么判断是浏览器还是node环境？

node中window是未定义；setImmediate是定义的，在浏览器中未定义

timer阶段：这个阶段会执行setTimeout和setInterval

check阶段：执行setImmediate

macro task [task] 宏任务 ：script（页面代码）、setTimeout、setInterval、I/O事件、UI交互事件（点击事件）

micro task [job]　 微任务： Promise、process.nextTick、Promise().then()

宏任务可以有多个队列

微任务只有一个队列

setTimeout任务之间，推迟执行的毫秒数越小，排在队列里面越靠前

在node里面，timers（setTimeout、setInterval）会优先于setImmediate

setTimeout(() => {
  console.log('setTimeout')
},0);  // 大于1000时，会先执行setImmediate
setImmediate（（）=> { console.log('setImmediate')}）
console.log('start');
setTimeout(function (){
  console.log('timeout');
},10);
new Promise((resolve) => {
  console.log('promise');
  resolve()
  setTimeout(() => {
    console.log('Promsie中的setTimeout');
  },0);
}).then(() => {
  console.log('then');
});
console.log('end');

运行机制

1. 在执行栈中执行一个宏任务。

2. 执行过程中遇到微任务，将微任务添加到微任务队列中。

3. 当前宏任务执行完毕，立即执行微任务队列中的任务。

4. 当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。

5. 渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详细分析单线程JS执行问题

    详细分析单线程JS执行问题

    大家在学习javascript的时候很多朋友在执行问题上有疑惑,小编通过本篇文章给大家详细的分析介绍了JS的执行问题,希望能够帮助到你理解. 一.介绍 随着js不断学习,你可能会慢慢的好奇,用了这么久的js,却不知道这js在浏览器怎么被执行的,很尴尬.所以,我查阅很多资料来总结JS的执行过程,也分享出来,和大家一起学习. 本篇主要讲单线程的JS 涉及的名词:JS引擎,单线程,执行栈,执行上下文(execution context) 二.JS引擎 JS引擎是浏览器的重要组成部分,主要用于读取并执行

  • JavaScript中EventLoop介绍

    JavaScript中EventLoop介绍

    想象下,比如浏览器在运行一个复杂的图像转换算法,因为是单线程的,所以此时浏览器进程被阻塞了,不能进行界面渲染,也不能运行其他代码,你的应用界面会失去和用户的交互. 这一般情况下还不会有大问题,但是当浏览器在同时运行多个类似的算法时,这个问题就很严重了. 有一定经验js开发人员大多都理解代码的异步执行,特别是ajax的使用. // ajax(..) is some arbitrary Ajax function given by a library var response = ajax('htt

  • Node.js事件循环（Event Loop）和线程池详解

    Node的"事件循环"(Event Loop)是它能够处理大并发.高吞吐量的核心.这是最神奇的地方,据此Node.js基本上可以理解成"单线程",同时还允许在后台处理任意的操作.这篇文章将阐明事件循环是如何工作的,你也可以感受到它的神奇. 事件驱动编程 理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互,所以使用基于事件

  • 深入浅析Node.js单线程模型

    深入浅析Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这个问题来探讨Node.js的单线程模型: 1.高并发 一般来说,高并发的解决方案就是多线程模型,服务器为每个客户端请求分配一个线程,使用同步I/O,系统通过线程切换来弥补同步I/O调用的时间开销,比如Apache就是这种策略,由于I/O一般都是耗时操作,因此这种策略很难实现高性能,但非常简单,可以实

  • 你必须知道的Javascript知识点之"单线程事件驱动"的使用

    你必须知道的Javascript知识点之"单线程事件驱动"的使用

    复制代码 代码如下: var intervalBody = function(){     console.log('interval'); } var startInterval = function(){     setInterval(intervalBody,1000); } var timeoutBody = function(){     console.log('timeout'); } var startTimeout = function(){     setTimeout(t

  • Node.JS中事件轮询(Event Loop)的解析

    Node.JS中事件轮询(Event Loop)的解析

    当我们知道I/O操作和创建新线程的开销是巨大的! 网站延迟的开销 对于一个网站,后台大多不需要进行复杂的计算,我们的程序大多时间花费在I/O读取上. 看到一个数据:IO操作可以比数据处理慢几个数量级.高端SSD固态硬盘的读取速度可以达到200mb-700mb/s;读取1000字节需要1.4微秒.而在此期间,2GHZ频率的CPU可以执行28000个指令处理周期.而网络数据的IO甚至更慢! NodeJS采用单线程非阻塞的架构解决老大难的IO问题 当采用多线程时,为每一个请求开启一个新的线程(Apac

  • 分析JS单线程异步io回调的特性

    我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪! 起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等. 在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定了一个事件回调函数 doCheck(). 当鼠标点击这个元素的时

  • JavaScript运行机制之事件循环(Event Loop)详解

    JavaScript运行机制之事件循环(Event Loop)详解

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线

  • 理解javascript定时器中的单线程

    理解javascript定时器中的单线程

    一.JavaScript 引擎是单线程的 可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了. <script type="text/javascript"> setTimeout( function(){ while(true){} } , 100); setTimeout( function(){ alert('你好!setTimeout'); } , 200); setInterval( function

  • js单线程的本质 Event Loop解析

    怎么判断是浏览器还是node环境? node中window是未定义:setImmediate是定义的,在浏览器中未定义 timer阶段:这个阶段会执行setTimeout和setInterval check阶段:执行setImmediate macro task [task] 宏任务 :script(页面代码).setTimeout.setInterval.I/O事件.UI交互事件(点击事件) micro task [job] 微任务: Promise.process.nextTick.Prom

  • JS事件循环机制event loop宏任务微任务原理解析

    首先看一段代码 async function (){ await f2() console.log('f1') } async function f2(){ console.log('f2') } console.log('正常1') f1() setTimeout(()=>{ console.log('定时器') }) console.log('正常2') 正确的打印顺序应该是:正常1,f2 ,正常2,f1,定时器 为什么会出现这样打印顺序呢 首先javascript是一门单线程语言,在最新的

  • node.js中对Event Loop事件循环的理解与应用实例分析

    本文实例讲述了node.js中对Event Loop事件循环的理解与应用.分享给大家供大家参考,具体如下: javascript是单线程的,所以任务的执行都需要排队,任务分为两种,一种是同步任务,一种是异步任务. 同步任务是进入主线程上排队执行的任务,上一个任务执行完了,下一个任务才会执行. 异步任务是不进入主线程,而是进入一个 "任务队列" 里,"任务队列" 通知主线程,该异步任务才会进入主线程执行. 任务的运行机制如下: 1.所有同步任务在主线程上执行,形成一个

  • js在浏览器中的event loop事件队列示例详解

    js在浏览器中的event loop事件队列示例详解

    目录 前言 认识一个栈两个队列 执行过程 简单例子 难一点的例子 总结 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其实不是单线程,但是在浏览器中执行时只分配一个线程进行执行. 所以说js执行是单线程的,一次只能进行一项任务,就是一件任务一件任务做,做完一件做下一件. 认识一个栈两个队列 一个调用栈Stack. 一个宏队列,macrotask,也叫tasks. 一个微队列,microtask,也叫jobs. 执行过程 js就是

  • JS前端宏任务微任务及Event Loop使用详解

    JS前端宏任务微任务及Event Loop使用详解

    目录 前言 宏任务 宏任务队列 微任务 微任务队列 Event-Loop 执行顺序 结语 前言 首先我们要了解javascript是一个单线程的脚本语言,也就是说我们在执行代码的过程中不会出现同时进行两个进程(执行两段代码). Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous). 同步:一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去. 异步:进程不需要一直

  • Node.js Event Loop各阶段讲解

    Node.js Event Loop各阶段讲解

    Event Loop阶段描述图 timers timer阶段处理setTimeout于setInterval回调,开始处理的时机与poll阶段有关联. pending callbacks 该阶段执行某些系统操作的回调,比如TCP套接字在连接时收到ECONNREFUSED. 网上有一些将该阶段称为I/O callbacks的文章都是过时错误的,具体可以移步Node.js官方库下面的这个issue: #1118. idle, prepare 内部使用,忽略. poll poll是一个核心阶段,等新I

  • JavaScript Event Loop相关原理解析

    1.单线程模型 单线程模型指的是,JavaScript只能在一个线程上运行,也就是说只能同时指向一个任务,其他任务都必须在后面排队等待.注意:虽然JavaScript只在一个线程上运行,但并不代码JavaScript引擎只有一个线程.事实上,JavaScript引擎有多个线程,单个脚本只能在一个线程上运行(主线程),其他线程都是在后台配合. JavaScript为什么要采用单线程,而不是多线程? 不想让浏览器变得复杂(避免复杂性),因为多线程需要共享资源.且可能修改彼此运行的结果. 该模式会导致

随机推荐