JavaScript Event Loop相关原理解析

1.单线程模型

单线程模型指的是，JavaScript只能在一个线程上运行，也就是说只能同时指向一个任务，其他任务都必须在后面排队等待。注意：虽然JavaScript只在一个线程上运行，但并不代码JavaScript引擎只有一个线程。事实上，JavaScript引擎有多个线程，单个脚本只能在一个线程上运行（主线程），其他线程都是在后台配合。

JavaScript为什么要采用单线程，而不是多线程？

不想让浏览器变得复杂（避免复杂性），因为多线程需要共享资源、且可能修改彼此运行的结果。

该模式会导致的问题？

如果单个任务耗时长，会拖延整个程序的执行，可能导致浏览器无响应（假死）

JavaScript是如何解决这个问题的？

因为单线程的原因，CPU很多时候都闲着的，并且因为IO操作（输入输出）很慢（比如Ajax操作从网络读取数据），这时CPU可以完全不管IO操作，挂起等待中的任务，先运行排在后面的任务。等到IO操作返回了结果，再回过头，把挂起的任务继续执行下去。这种机制就是JavaScript内部采用的“事件循环”机制（Event Loop）

2.同步任务和异步任务

程序里面所有的任务，可以分成两类：同步任务（synchronous）和异步任务（asynchronous)

同步任务：没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。

异步任务：被引擎放一边、不进行主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了（比如Ajax操作从服务器得到了结果），那么该任务（通过回调函数的形式）才能进入主线程执行。排在异步任务后面的代码，不用等到异步任务结束就会马上运行，也就是说，异步任务不具有“堵塞”效应

3.任务队列和事件循环

JavaScript运行时，除了一个正在运行的主线程（又称为“调用栈(call stack)”），引擎还提供了一个任务队列（task queue），里面是各种需要处理当前程序处理的异步任务。（实际上，根据异步任务的类型，存在多个任务队列，后面再详讲）

1.主线程会去执行所有的同步任务。

2.等到同步任务全部执行完，查看任务队列中的异步任务，将满足条件的重新进入主线程开始执行，这时候就变成同步任务。

3.等任务执行完，下一个异步任务再进入主线程开始执行。

4.引擎不停检查（“事件循环”），一旦任务队列清空，程序就结束执行。

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

赞 (0)

相关推荐

  • 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节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线

  • 前端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

  • 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的简单模型解释与应用分析

    本文实例讲述了javascript事件循环event loop的简单模型解释与应用.分享给大家供大家参考,具体如下: js是单线程的,但是event loop的出现,使得js拥有可以处理高并发的性能.那么怎么理解event loop呢?网上百度一堆文章,什么heap,stack,micro queue,macro queue,让初学者直接懵掉.这里采用很通俗的理解方式介绍下event loop. event loop顾名思义是事件循环,既然是循环,那循环的是什么呢? 对于一个js文件, 1,执行

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

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

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

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

  • JavaScript Event Loop相关原理解析

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

  • JavaScript单线程和任务队列原理解析

    这篇文章主要介绍了JavaScript单线程和任务队列原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.JavaScript为什么设计为单线程? JavaScript语言的一大特点就是单线程,换言之就是同一个时间只能做一件事. for(var j = 0; j < 5; j++) { console.log(j); } console.log('end'); 上面的代码,只有for循环执行完毕,才会执行end: JavaScript的

  • JavaScript函数式编程Thunk原理解析

    目录 引言 举个栗子 代码演进 改造成异步 toThunk 工具函数 引言 本篇带来 Thunk 理解,这也是本瓜最津津乐道的 JS 函数式编程中延迟处理的思想核心之一! 什么是 Thunk ? 简单理解:在计算机编程中,Thunk 就是一种实现延迟执行的手段. 举个栗子 我要计算 99 的 9 次方,然后再把它打印出来,你会怎么写? 大聪明肯定是直接一句话: console.log(Math.pow(99, 9)) // 913517247483640800 有点想法的同学肯定想封装一个函数,

  • JavaScript对象原型链原理解析

    这篇文章主要介绍了JavaScript对象原型链原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto.class.extensible属性,其中,proto属性指向对象的原型. 对象的属性也有writable.enumerable.configurable.value和get/set的配置方法. 对象的创建方式有三种: 一.使用字面量直接创建. 二.基于原型链创建. 分析上图,要点如

  • JavaScript this指向相关原理及实例解析

    记得初学 JavaScript 时,其中 this 的指向问题曾让我头疼不已,我还曾私自将其与闭包.原型(原型链)并称 JS 武林中的三大魔头.如果你要想在 JS 武林中称霸一方,必须将这三大魔头击倒.个人认为在这三大魔头中,this 指向问题的武功最菜(难度最低).俗话说柿子捡软的捏,那我们就先从 this 指向问题下手. 先记住攻克 this 指向问题的口诀(前辈们的总结):哪个对象调用函数,函数里的 this 就默认指向哪个对象(注意 this 只能指向对象).这里说"默认指向"

  • Javascript执行流程细节原理解析

    Javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等,这些概念正是JS引擎工作的核心组件.这篇文章的目的不是孤立的为你讲解每一个概念,而是通过一个简单的DEMO来展开分析,全局讲解JS引擎从定义到执行的每一个细节,以及这些概念在其中所扮演的角色. var x = 1; //定义一个全局变量 x function A(y){ var x = 2; //

  • Javascript模拟实现new原理解析

    new是JS中的一个关键字,用来将构造函数实例化的一个运算符.例子: function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log("I'm " + this.name); } var cat = new Animal('Tom'); console.log(cat.name); // Tom console.log(cat.__proto__ === An

  • JavaScript Window浏览器对象模型原理解析

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚无正式标准. 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性. Window 对象 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局

  • Python类的继承super相关原理解析

    看了网上许多关于super.mro.C3的介绍感觉没有一份很容易初学者理解的文档,直接看C3算法的话,比较难理解,也没必要,如果掌握一套规律的话,会轻松许多.我将网上这些博主的文章进行一个梳理总结,最后形成一套实用的关于super.mro.C3的理解介绍. 1.super super()是一种将子类与父类联系起来的一种方法,子类通过继承父类,可以使用父类的方法和属性,也可以自己定义属于自己的方法和属性.super方法主要用在多继承中,在单继承时直接调用父类方法即可 下面这个是SGD源码的一部分,

  • Spring sentinel哨兵模式相关原理解析

    1. sentinel作用 1. 当用Redis做主从方案时,假如master宕机,Redis本身无法自动进行主备切换 2. 而Redis-sentinel本身也是一个独立运行的进程,它能监控多个master-slave集群,发现master宕机后能进行自动切换. 2. sentinel原理 1. sentinel负责持续监控主节点的健康,当主节挂掉时,自动选择一个最优的从节点切换成主节点 2. 从节点来连接集群时会首先连接sentinel,通过sentinel来查询主节点的地址 3. 当主节点

随机推荐