理解JavaScript中的事件轮询
原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html
为什么JavaScript是单线程
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?
JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程再某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。
为了利用多核CPU的计算能力,HTML5提出Web Worker标准,运行JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
任务队列
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。多线程可以将任务放到不同的线程中去处理。CPU的调度单位是线程,它会在不同的线程之间切换,任务是隶属于线程的。
如果一个线程中,任务排队是因为计算量大,CPU忙不过来,倒也算了。但是很多时候CPU处理一个线程时是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等结果出来,任务才能往下执行。
JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回头,把挂起的任务继续执行下去。
于是,所有任务可以分成两种,一种是同步任务,另一种是异步任务。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入“任务队列”的任务,只有“任务队列”通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
注:在理解上面的内容时,不要将CPU处理其他进程(比如QQ等)考虑进来,上面内容是针对CPU处理一个线程来说的。在一个单线程中(比如一个页面加载过程中的js处理),会包含许多任务。在任务很多的情况下,想要不被阻塞,采用的方案是异步任务+事件轮询。多线程是将任务分到不同的线程中去,各个线程内部采用的是同步任务。
事件和回调函数
“任务队列”是事件队列(也可以理解成消息队列),表示相关的异步任务可以进入“执行栈”了。主线程读取“任务队列”,这个过程是循环不断的。
“任务队列”中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入“任务队列”,等待主线程读取。
异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。
Event Loop
主线程从“任务队列”中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件轮询)。

上图中,主线程运行的时候,产生堆(heap)和栈(stack)。只要栈中的代码执行完毕,主线程就会去读取“任务队列”,依次执行那些事件所对应的回调函数。
任务队列中的任务,是“回调函数”指定的,然后通过事件触发添加进去的,是一种异步任务。而在页面初始化时,主线程执行的任务是同步任务。
需要注意的是,setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。
Node.js的Event Loop
Node.js也是单线程的Event Loop,但是它的运行机制不同于浏览器环境。

根据上图,Node.js的运行机制如下。
- V8引擎解析JavaScript脚本
- 解析后的代码,调用Node API
- libuv库负责Node API的执行。它将不同的任务分配给不同的线程,形成一个Event Loop,以异步的方式将任务的执行结果返回给V8引擎。
- V8引擎再将结果返回给用户
除了setTimeout和setInterval这两个方法,Node.js还提供了另外两个与“任务队列”有关的方法:process.nextTick和setImmediate。它们可以帮助我们加深对“任务队列”的理解。
process.nextTick方法可以在当前“执行栈”的尾部,下一次Event Loop(主线程读取“任务队列”)之前,触发回调函数。也就是说,它指定的任务总是发生在所有一般任务之前。
setImmediate方法则是在当前“任务队列”的尾部添加事件,也就是说,它指定的任务总是在下一次Event Loop时执行,这与setTimeout很像。
理解JavaScript中的事件轮询的更多相关文章
- 理解Nodejs中的事件轮询机制
我在看<了不起的Nodejs>一书,阻塞与非阻塞IO那一章我来回看了N遍,然后...还是没太看懂..于是我找到了这篇日志,写的是真的有点好啊..潸然泪下.. 原文:http://www.r ...
- 理解Node.js的事件轮询
前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...
- node.js中的事件轮询Event Loop
任务队列/事件队列 "任务队列"是一个事件的队列,IO设备完成一项任务,就在"任务队列"中添加一个事件,表示相关的异步任务可以进入"执行栈" ...
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- 再次理解javascript中的事件
一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 + 事件冒泡接收事件的顺序:
- 理解JavaScript中的事件流
原文地址:http://my.oschina.net/sevenhdu/blog/332014 目录[-] 事件冒泡 事件捕获 DOM事件流 当浏览器发展到第四代时(IE4和Netscape Comm ...
- 理解JavaScript中的事件路由冒泡过程及委托代理机制
当我用纯CSS实现这个以后.我开始用JavaScript和样式类来完善功能. 然后,我有一些想法,我想使用Delegated Events (事件委托)但是我不想有任何依赖,插入任何库,包括jQuer ...
- 理解javascript中的事件模型
javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一. DOM0级事件模型 DOM0级事件模型是早期的事件 ...
随机推荐
- 算法课堂笔记13—Online Algorithm
今天的算法课是学习离线算法,在计算机科学中,一个在线算法是指它可以以序列化的方式一个个的处理输入,也就是说在开始时并不需要已经知道所有的输入.相对的,对于一个离线算法,在开始时就需要知道问题的所有输入 ...
- JSP常见指令
JSP常见指令 标签: jspincludeservletjavaappletarchive 2011-11-07 20:07 13193人阅读 评论(3) 收藏 举报 版权声明:本文为博主原创文章, ...
- 与您共享Linux Kernel 4.8分支首个维护版本
导读 Linux Kernel 4.8正式版于10月2日由Linus Torvalds发布,带来了包括AMDGPU OverDrive支持.NVIDIA Pascal支持.AMDGPU PowerPl ...
- git在本地仓库直接使用rm彻底删除文件,服务端还是存在
本地仓库:A和B 服务器:C 今天在本地仓库A希望删除一个文件test,于是执行以下命令: 1 2 3 4 $ sudo rm test $ git add . $ git commit -m &qu ...
- 二模 (16) day1&day2
第一题:题目大意: 数列a[0]=a[1]=1, a[n]=a[n-2]*a[n-1]*n,求a[n]的因子个数 mod 1000000007. n<=1000000 解题过程: 1.递推式还 ...
- Visual Studio 2008打开vs2010解决方案的方法
一个朋友遇到了个问题:用visual studio 2008软件,无法打开一个asp.net网站的sln解决方案.如下图,原因是此解决方案由vs2010生成的,必须由vs2010运行程序打开. 这样一 ...
- Spark随笔(二):深入学习
一.如何选择粗粒度和细粒度 从底层往上引申来理解粗粒度与细粒度. 一层:一个类,具有三个属性值.为了查询这个类的所有实例,细粒度查询的程度为属性值,即依次查询每个实例化对象的属性值,查询三次:粗粒度按 ...
- H.264简介
H.264/MPEG-4 AVC (H.264) 是1995年自MPEG-2视频压缩标准发布以后最新的, 最有前途的视频压缩标准. H.264是由ITU-U和ISO/IEC联合开发组共同开发的最新国际 ...
- 2016年12月11日 php面向对象
面向对象 1.类(由众多对象中抽象出来的) 2.对象(一切皆对象,由类实例化出来的). 类: 求圆的面积 面向过程的方式 1.将圆抽象为一个类 2.实例化对象 class Qiu { var $ban ...
- 解决 xx.h has been modified since the precompiled header 系统头文件被修改
fatal error: file '/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Dev ...