匠人学院 JR Academy学AI来匠人
匠人学院 JR Academy学AI来匠人

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-airwallex.png/image/layout/pay-alipay.png
EN

关于公司

关于我们元宇宙课堂新闻资讯匠人工作成为导师匠人导师联系我们匠人商店J3.Club

匠人资源

工作内推匠人活动1对1私教行业白皮书线上学习平台面试中心分享面试经验Internship会员中心

AI 工具

AI 工具箱考证匠 Cert Master求职匠 Job Hunter牛小匠 UniMate AI

AI 学习方向

全部学习方向AI EngineerContext EngineeringVibe CodingPrompt MasterAI BuilderAI 产品经理Python 入门

AI 应用提效

AI 办公提效AI 数据分析AI 财务AI 内容创作AI 视觉创作前端开发Hermes AgentOpenClaw 本地智能体

大学资源

墨尔本大学昆士兰大学新南威尔士大学悉尼大学莫那什大学阿德莱德大学RMITQUTUTS

少儿 AI 教育

Airbotix 少儿 AI 编程澳洲家长实用资料库NAPLAN 成绩单怎么看My School 学校数据指南悉尼私校学费 2026少儿编程课程与训练营

移民服务

澳洲移民技术移民189/190/491雇主担保482/186/494投资移民188/888英国移民美国移民加拿大移民

企业合作

P3职业孵化器Enterprise (EN)企业培训实习合作招聘合作申请合作

求职代理

岗位代投职位监控LinkedIn代运营LinkedIn人脉代加了解P3项目

匠人支持

FAQsTerms & ConditionsPrivacy PolicyCancellation & Refund PolicySite map

Top Categories

Web全栈班DevOps项目班数据工程全栈班数据分析项目班编程入门班Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 2, 171 La Trobe St, Melbourne VIC 3000
四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号
Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au0421-672-555

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2026 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572

首页/资源中心/文章详情
JR Academy · Blog职业洞察

JavaScript 运行机制详解:再谈Event Loop

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。

发布日期2020-06-22
阅读时长1 分钟
作者Ann Ann

快速导航

  • 一、为什么JavaScript是单线程?
  • 二、任务队列
  • 三、事件和回调函数
  • 四、Event Loop
  • 五、定时器
  • 六、Node.js的Event Loop

一、为什么JavaScript是单线程?

JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。

JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是规定子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。

二、任务队列

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。

JavaScript语言的设计者意识到,这时CPU完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。

于是,JavaScript就有了两种执行方式:一种是CPU按顺序执行,等着IO设备返回结果,这叫做同步执行;另一种是CPU跳过等待时间长的任务,先处理后面的任务,这叫做异步执行。程序员自主选择,采用哪种执行方式。

具体来说,异步执行的运行机制如下。(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)

(1)所有任务都在主线程上执行,形成一个执行栈(execution context stack)。

(2)主线程之外,还存在一个“任务队列“(task queue)。系统把异步任务放到“任务队列“之中,然后继续执行后续的任务。

(3)一旦“执行栈“中的所有任务执行完毕,系统就会检查“任务队列“。如果此时异步任务已经结束了等待状态,就会从“任务队列“进入执行栈,继续执行。

(4)不断重复上一步。

下图就是主线程和任务队列的示意图。

只要主线程空了,就会去检查“任务队列“,这就是JavaScript的运行机制。这个过程会不断重复。

三、事件和回调函数

“任务队列“实质上是一个事件的队列(也可以理解成消息的队列),IO设备完成一项任务,就在“任务队列“中添加一个事件,表示相关的异步任务可以进入“执行栈“了。主线程检查“任务队列“,就是检查里面有哪些事件。

异步任务必须指定回调函数(callback),当异步任务从“任务队列“回到执行栈,回调函数就会执行。

“任务队列“中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入“任务队列“,等待主线程读取。

四、Event Loop

主线程从“任务队列“中读取事件,这个过程是循环不断的,所以又称为Event Loop(事件循环)。

为了更好地理解Event Loop,请看下图(转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》)。

主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在“任务队列“中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去检查“任务队列“,看看哪些事件已经完成了,并执行对应的回调函数。

请看下面这个例子。

    var req = new XMLHttpRequest();
    req.open('GET', url);    
    req.onload = function (){};    
    req.onerror = function (){};    
    req.send();

上面代码中的req.send方法是Ajax操作向服务器发送数据,它是一个异步任务,意味着只有当前脚本的所有代码执行完,系统才会去“任务队列“检查是否有返回结果。所以,它与下面的写法等价。

    var req = new XMLHttpRequest();
    req.open('GET', url);    
    req.send();
    req.onload = function (){};    
    req.onerror = function (){};   

也就是说,指定回调函数的部分(onload和onerror),在send()方法的前面或后面无关紧要,因为它们属于当前脚本,系统总是执行完它们,才会去检查“任务队列“。

五、定时器

除了执行异步任务,“任务队列“还有一个作用,就是可以人为加入事件,指定某些代码在多少时间之后执行,相当于推迟执行。这叫做“定时器“(timer)功能,即定时执行代码。

定时器功能主要由setTimeout()和setInterval()这两个函数来完成,它们的内部运行机制完全一样,区别在于前者指定的代码是一次性执行,后者则为反复执行。以下主要讨论setTimeout()。

setTimeout()接受两个参数,第一个是回调函数,第二个是推迟执行的毫秒数。

console.log(1);

setTimeout(function(){
	console.log(2);
},1000);

console.log(3);

上面代码的执行结果是1,3,2,因为setTimeout()将第二行推迟到1000毫秒之后执行。

如果将setTimeout()的第二个参数设为0,就表示当前代码执行完,立即执行指定的回调函数。

setTimeout(function(){
	console.log(1);
}, 0);

console.log(2);

上面代码的执行结果总是2,1,因为只有在执行完第二行以后,系统才会去执行“任务队列“中的回调函数。有些浏览器规定了setTimeout()的第二个参数的最小值,比如Firefox规定不得低于4毫秒,如果低于这个值,就会自动调整。

另外,对于那些DOM的变动(尤其是涉及页面重新渲染的部分),通常不会立即执行,而是每16毫秒重绘一次。这时使用requestAnimFrame()的效果要好于setTimeout()。

需要注意的是,setTimeout()只是将事件插入了“任务队列“,必须等到当前代码执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。

六、Node.js的Event Loop

Node.js也是单线程的Event Loop,但是它的运行机制不同于浏览器环境。

请看下面的示意图(作者@BusyRich)。

根据上图,Node.js的运行机制如下。

(1)V8引擎解析JavaScript脚本。

(2)解析后的代码,调用Node API。

(3)libuv库负责Node API的执行。它将不同的任务分配给不同的线程,形成一个Event Loop(事件循环),以异步的方式将任务的执行结果返回给V8引擎。

(4)V8引擎再将结果返回给用户。

Node.js有一个process.nextTick()方法,可以将指定事件推迟到event loop的下一次执行,也就是当前的执行栈清空之后立即执行。

function foo() {
    console.error(1);
}

process.nextTick(foo);
console.log(2);
// 2
// 1

process.nextTick(foo)的作用,与setTimeout(foo, 0)很相似,但是执行效率高得多(参见比较结果)

News
作者Ann Ann
一键分享或复制链接
Ann Ann
Reviewer: Ann Ann

Founder of JR Academy

查看该作者的更多文章 →

相关学习资源

  • 前端学习路径
← 上一篇理解OAuth 2.0下一篇 →Commit message 和 Change log 编写指南

相关文章推荐

什么!一站式BusinessAnalyst训练营+实习又来了?快来抢占职场先机!

2024-08-30

精彩回顾|AI与创新激情碰撞!悉尼JR&AtlassianAI主题活动完美收官!

2024-08-26

官宣!澳洲政府颁布新规!留学生或将被限制入境,485确定免费延长2年!

2024-08-21

平心而论,我在澳洲没见过这么好的数据分析班!

2024-08-20

澳洲数据分析+任何专业=王炸!

2024-08-20

年薪可达10万澳币?这“十大”工作成为华人梦中情职!就业季来袭,墨尔本职业博览会强势开启,500+岗位为你职业生涯保驾护航!

2024-08-14
查看全部文章 →
JR Academy
全球华人学习 AI 第一站
✓15000+ 学员
✓50+ 课程
✓AI 驱动学习平台
训练营免费资源AI学习职业辅导
精选推荐
AI 职业影响地图
测测你的职业风险等级,查看转型路径与学习方向
热门工具
AI & 数据训练营
系统化课程 + 真实项目实战,快速提升竞争力
热门课程
1v1 就业辅导
资深导师一对一指导,简历优化 + 面试准备
就业保障
企业内训定制
AI 技能培训方案,助力团队升级
企业服务
热门标签
Vibe CodingAI 编程CursorClaude求职攻略Prompt前端开发后端开发
订阅更新

获取最新 AI 学习资源、技术教程和求职攻略,直接送达邮箱。

我们尊重您的隐私,不会发送垃圾邮件