谈谈 Javascript 的运行机制及对同步异步的理解

最新推荐文章于 2025-01-01 23:47:48 发布

weixin_34206899

最新推荐文章于 2025-01-01 23:47:48 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c8501096fb9a049c160088d

本文深入探讨了JavaScript的单线程特性，解释了同步与异步任务的执行机制，包括事件轮询(EventLoop)原理，以及异步代码如何解决单线程阻塞问题。

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

需要理解同步与异步我们必须从单线程说起
复制代码

什么是单线程？单线程有什么好处？单线程带来了什么问题？

js 本身是单线程的，单线程指的是同一时间段只能做同一件事情，也就是说两段 js 代码不能同时运行。

js 是单线程的原因是为了避免 dom 渲染时被污染

单线程会导致阻塞的问题，比如我们通常把 script 标签放在 body 标签之后，这也是为了解决单线程阻塞带来的页面短时间空白的问题。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。于是就有一个概念，任务队列。如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步

同步指的是代码从上往下执行，只有上一个任务执行完之后才会执行下一个任务，在主线程中运行，并且形成一个执行栈。

同步代码：
```
    console.log(1)
    console.log(2)
    console.log(3)
    
    上面的代码会依次输出 1 2 3
```
复制代码

异步

异步指的是代码不进入主线程的，而是进入一个任务队列，只有在主线程中的代码执行完之后才会执行。

异步所在的问题，会导致回调地狱的出现，不利于代码的封装，可读性差。

异步代码：
```
    console.log(1)
    setTimeout(function() {
        console.log(2)
    }, 0)
    console.log(3)
    
    上面的代码会输出 1 3 2
    得到这样的结果是因为 setTimeout 函数是异步的所以会将回调函数放入异步队列中，等待主线程中的任务执行完之后，在执行回调函数即使延迟时间为0。
```
复制代码

js 的运行机制也就是异步的实现原理

异步的实现原理主要是通过事件轮询也就是Event Loop来实现的具体步骤如下：

1. 同步代码在主线程中从上往下开始执行，形成一个执行栈
2. 异步代码发在异步队列中
3. 当主线程中的代码执行完之后，通过轮询的方式来执行任务队列中的代码
4. 主线程不断重复上第三个步骤
复制代码

转载于:https://juejin.im/post/5c8501096fb9a049c160088d