javascript事件循环event loop的简单模型解释与应用分析

本文实例讲述了javascript事件循环event loop的简单模型解释与应用.分享给大家供大家参考，具体如下：

js是单线程的，但是event loop的出现，使得js拥有可以处理高并发的性能。那么怎么理解event loop呢？网上百度一堆文章，什么heap，stack，micro queue，macro queue，让初学者直接懵掉。这里采用很通俗的理解方式介绍下event loop.

event loop顾名思义是事件循环，既然是循环，那循环的是什么呢？

对于一个js文件，

1，执行当前执行上下文（初次是全局作用域）的所有同步任务，有异步任务的透出

2，执行任务队列里第一个异步任务，

3，执行当前异步任务执行上下文的所有同步任务，有异步任务透出

从上面的执行顺序可以清楚的看到循环执行的是什么，event loop循环中的循环任务是指：

执行某个执行上下文的所有同步任务，透出异步任务

看一个简单实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>event-loop-test</title>
</head>
<body>
  <script>
    setTimeout(function(){
      console.log('测试定时事件循环')
      new Promise(function(resolve,reject){
        resolve('内层数据')
      }).then(function(data){
        console.log(data)
      })
      console.log('测试测试测试111')
      for(var i = 0; i<5000; i++){
        console.log('异步任务中的耗时同步任务')
      }
      setTimeout(function(){
        console.log(22222)  //这里透出的异步任务会在testPromise之后，在上面的for循环执行过后，testPromise已经透出异步任务，放到队列中
      },0)
    },0)
    for(var i = 0; i<5000; i++){
      console.log('测试event loop')
    }
    for(var i = 0; i<5000; i++){
      console.log('测试event loop2')
    }
    var testPromise = new Promise(function(resolve,reject){
      console.log('直接测试promiseneibu')
      setTimeout(function(){
        resolve('promise测试')
        console.log('promise内部的console')
      },10)
    })
    testPromise.then(function(data){
      console.log(data)
    })
    console.log('我是直接运行的')
  </script>
</body>
</html>

由上面的实例和分析可以得出：

任务队列中的异步任务透出和循环层级是没有关系的，任务队列中的异步任务是根据透出先后顺序排列的

建立一个简单模型：

也可以理解为：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 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

  • 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

  • javascript中的event loop事件循环详解

    前言 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是

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

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

  • 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事件循环机制

    实例分析js事件循环机制

    本文通过实例给大家详细分析了JS中事件循环机制的原理和用法,以下是全部内容: var start = new Date() setTimeout(function () { var end = new Date console.log('Time elapsed:', end - start, 'ms') }, 500) while (new Date() - start < 1000) { } 有其他语言能完成预期的功能吗?Java, 在Java.util.Timer中,对于定时任务的解决方案

  • 前端js中的事件循环eventloop机制详解

    前言 我们知道 js 是单线程执行的,那么异步的代码 js 是怎么处理的呢?例如下面的代码是如何进行输出的: console.log(1); setTimeout(function() { console.log(2); }, 0); new Promise(function(resolve) { console.log(3); resolve(Date.now()); }).then(function() { console.log(4); }); console.log(5); setTim

  • JavaScript中EventLoop介绍

    JavaScript中EventLoop介绍

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

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

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

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

  • 深入理解Node.js 事件循环和回调函数

    深入理解Node.js 事件循环和回调函数

    本文详细的介绍了Node.js 事件循环和Node.js回调函数,废话不多说了,具体看下面把.  一.Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高.Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发.Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现.Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观

  • 详解nodejs异步I/O和事件循环

    事件驱动模型 现在我们来看看nodejs中的事件驱动和异步I/O是如何实现的. nodejs是单线程(single thread)运行的,通过一个事件循环(event-loop)来循环取出消息队列(event-queue)中的消息进行处理,处理过程基本上就是去调用该消息对应的回调函数.消息队列就是当一个事件状态发生变化时,就将一个消息压入队列中. nodejs的时间驱动模型一般要注意下面几个点: 因为是单线程的,所以当顺序执行js文件中的代码的时候,事件循环是被暂停的. 当js文件执行完以后,事

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

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

随机推荐