深入解析JavaScript同步与异步机制及Event Loop原理

前言

原本计划撰写关于co库源码的精读文章，因为该库代码量较小，适合深入剖析。但在准备过程中发现自身存在若干基础概念尚未完全厘清，因此决定转而撰写一系列JavaScript基础教程，整理并分享个人理解。希望这些内容能与你在学习道路上共同进步。首先思考一个常见的面试问题：当被问及JavaScript中的同步与异步时，应如何作答？理解任何概念通常遵循“是什么（What）-为什么（Why）-怎么做（How）”的逻辑框架。

本文旨在解答三个核心问题：JavaScript中同步与异步的具体含义是什么？为什么会产生异步需求？以及如何解决相关问题。

JavaScript起源与定位

一、JavaScript起源

技术的诞生往往与应用场景紧密相关。JavaScript于1995年问世，其初始目标是处理原本由服务器端语言（如Perl）负责的输入验证任务。在JavaScript出现之前，表单数据必须发送至服务器端，才能判断用户是否遗漏必填字段或输入了无效值。Netscape Navigator希望借助JavaScript解决这一交互痛点。起初该语言名为LiveScript，随后Netscape与Sun公司成立开发联盟。为了借势当时Java的热度，Netscape临时将LiveScript更名为JavaScript。因此，从本质上看，JavaScript与Java并无直接关联，这更多是一种营销策略。

如今，JavaScript的功能已远超简单的数据验证，具备了与浏览器窗口及其内容进行全面交互的能力。现代JavaScript已成为一门功能完备的编程语言。

总结：JavaScript最初的用途是实现用户与浏览器的交互。

JavaScript单线程模型解析

二、JS为何是单线程的？

JavaScript采用单线程模型，这与其设计用途密切相关。作为浏览器脚本语言，JavaScript的主要职责是与用户进行交互以及操作DOM（文档对象模型）。这一特性决定了它必须是单线程的，否则将引发复杂的同步冲突。例如，假设JavaScript同时存在两个线程，一个线程在某个DOM节点上添加内容，而另一个线程删除了该节点，浏览器将无法确定应以哪个线程的操作为准。

为了避免此类复杂性，JavaScript从诞生之初就确立了单线程模型，这已成为该语言的核心特征，且未来不会改变。

注：所谓单线程，是指在JavaScript引擎中负责解释和执行JavaScript代码的线程只有一个。

计算机同步与异步概念辨析

三、计算机的同步与异步（重点）

计算机领域中的“同步”（Synchronous）与“异步”（Asynchronous）概念，与我们日常生活中的理解恰好相反，这或许归因于翻译偏差。在日常生活中，“同步”强调步伐一致，如共同逛街、吃饭或睡觉；而“异步”则指各自忙碌，步调不一致且互不干扰。计算机领域的概念是否如此？确实不同。

同步场景类比：异地求学且生活费不足，尝试电话通知家庭转账。拨号后对方持续处于待接听状态（即无法接通、联系中断）。为获取资金，用户持续保持呼叫并等待，可能导致无法及时获得生活费，致使当日既定事务无法完成，造成时间浪费。异步场景类比：电话无人接听时，推断对方可能忙碌，遂发送短信、语音留言或其他方式通知后，转而处理其他紧急事务。此过程无需持续拨号，允许并行执行其他活动。待对方查看留言后给予响应，响应内容可能包含转账也可能不包含。尽管结果不确定，但用户在此期间完成了多项其他事务，或通过与室友临时借款解决资金问题，继续正常的学习生活。

总结：计算机中的同步意味着排队等待。如果你是第101个请求，必须等待前100个请求处理完毕（如报错或结束）后，才能开始处理你的请求。异步则不同，即使你是第101个请求，系统也能兼顾你的处理。

单线程下的异步实现机制

四、js单线程为什么会有'异步'问题

经过前面的铺垫，可能会产生疑问：既然JavaScript是单线程的，它是如何实现异步操作的？AJAX异步发送与回调请求，以及setTimeout看起来似乎涉及多线程？让我们逐步解析。

• js是同步的？

是的，由于是单线程，JavaScript默认只能同步（按顺序排队）执行代码。

• js为什么需要异步?

如果JavaScript中不存在异步机制，代码只能自上而下顺序执行。若上一行代码解析耗时较长，后续代码将被阻塞。

对用户而言，阻塞意味着“卡死”，这将导致极差的用户体验。

• js单线程又是如何实现异步的呢?

通过事件循环（Event Loop）机制来实现“异步”行为。

经典问题：

 console.log('1')
setTimeout(function(){
 console.log('2')
},0)
console.log('3') 
// 1，3，2

也就是说，setTimeout中的函数并未立即执行，而是延迟了一段时间，在满足特定条件后才执行。这类代码被称为异步代码。

因此，我们首先明确JavaScript中的一种任务分类方式：将任务分为同步任务和异步任务。

虽然JavaScript引擎是单线程的，但浏览器内核是多线程的。浏览器内核中不同的异步操作由不同的模块调度执行，异步操作会将相关回调添加到任务队列中。不同的异步操作添加到任务队列的时机各不相同，例如onclick、setTimeout和ajax的处理方式各异。这些异步操作由浏览器内核的WebCore模块执行，WebCore包含三种Web API：DOM Binding、Network和Timer模块。

Event Loop执行流程详解

按照这种分类方式，JavaScript的执行机制如下：

• 首先判断JavaScript代码是同步还是异步。同步代码进入主进程执行，异步代码则进入Event Table（事件表）进行注册。
• 异步任务在Event Table中注册回调函数，当满足触发条件后，该回调函数被推入Event Queue（事件队列）。
• 同步任务进入主线程后持续执行，直到主线程空闲时，才会去Event Queue中检查是否有可执行的异步任务。如果有，则将其推入主进程执行。

以上三步循环执行，这就是Event Loop（事件循环）机制。

总结：同步操作能保证执行顺序的一致性，但容易导致阻塞；异步操作可以解决阻塞问题，但会改变代码的执行顺序。开发者需根据具体需求编写代码。

本文将持续每周更新，您的点赞、收藏和关注是我持续创作的动力。

决定了前方的路怎么走，就不要总回头看，peace&love。

总结

以上就是本文的全部内容，希望这些内容对您的学习或工作具有参考价值。感谢大家对本站的支持。