JS 单线程同步和异步

最新推荐文章于 2025-02-27 09:21:03 发布

s_kzn

最新推荐文章于 2025-02-27 09:21:03 发布

阅读量512

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/m0_61700036/article/details/122279487

版权

本文介绍了JavaScript的单线程特性，阐述了为何选择单线程的原因，并详细讲解了同步任务和异步任务的概念，包括它们的执行机制。通过示例展示了同步任务的执行顺序以及异步任务如setTimeout在任务队列中的处理方式，帮助理解JavaScript的异步执行模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、JS 单线程

1、单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

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

2、为什么是单线程

单线程和异步确实不能同时成为一个语言的特性。js选择了成为单线程的语言，所以它本身不可能是异步的，

但是浏览器只分配给js一个主线程，用来执行那些函数，一次只能执行一个，这些任务形成一个任务队列排队等候执行，前端的某些任务是非常耗时的，（比如网络请求）定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。

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

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

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

如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

二、同步和异步

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

1、同步任务

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

2、异步任务

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。但是，由于存在后文提到的"定时器"功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

"异步模式"编程的4种方法

回调函数
事件监听,任务的执行不取决于代码的顺序，而取决于某个事件是否发生
发布订阅模式，也叫观察者模式
Promises对象

最基础的异步是setTimeout和setInterval函数，我们也可以简单地理解为：可以改变程序正常执行顺序的操作就可以看成是异步操作。如下代码：

for (var i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i)
    }, 1000)
}

输出结果如下：

代码解释：

for 循环是同步执行的，执行了3次，设置了3个定时器，这三个定时器都要等到浏览器打开后依次执行函数的内容:console.log(i)，i 是全局变量，此时已经从0 递增到3；所以最后结果是3个3.

console.log('A');
    setTimeout(function () {
        console.log('B')
    }, 0)
setTimeout(function () {
    console.log('C')
}, 0)
setTimeout(function () {
    console.log('D')
}, 0)
console.log('E');

输出结果如下：

代码解释：

尽管setTimeout的time延迟时间为0，其中的function也会被放入一个队列中，等待下一个机会执行，当前的代码（指不需要加入队列中的程序）必须在该队列的程序完成之前完成，因此结果可能不与预期结果相同。

3、异步机制

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

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。