mirror of
https://github.com/qianguyihao/Web.git
synced 2024-11-01 13:34:46 +08:00
72 lines
2.7 KiB
JavaScript
72 lines
2.7 KiB
JavaScript
|
|
|||
|
|
## 单线程
|
|||
|
|
|
|||
|
|
JavaScript 的执行环境是**单线程**。即同一时间，只能处理一个任务。
|
|||
|
|
|
|||
|
|
具体来说，所谓单线程，是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个。所有的任务都**需要排队**。
|
|||
|
|
|
|||
|
|
JS为何要被设计为单线程呢？原因如下：
|
|||
|
|
|
|||
|
|
- 首先是历史原因，在最初设计 JS 这门语言时，多进程、多线程的架构并不流行，硬件支持并不好。
|
|||
|
|
|
|||
|
|
- 其次是因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。
|
|||
|
|
|
|||
|
|
- 而且，如果多个线程同时操作同一个 DOM，在多线程不加锁的情况下，会产生冲突，最终会导致 DOM 渲染的结果不符预期。
|
|||
|
|
|
|||
|
|
所以，为了避免这些复杂问题的出现，JS被设计成了单线程语言。
|
|||
|
|
|
|||
|
|
## 同步任务和异步任务
|
|||
|
|
|
|||
|
|
|
|||
|
|
如果当前正在执行的任务很耗时，它就会**阻塞**其他正在排队的任务。为了解决这个问题，JS在设计之初，将任务分成了两类：同步任务、异步任务。
|
|||
|
|
|
|||
|
|
- 同步任务：在**主线程**上排队执行的任务。只有前一个任务执行完毕，才能执行下一个任务。
|
|||
|
|
|
|||
|
|
- 异步任务：不进入主线程、而是进入**任务队列**（task queue）的任务。只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 事件循环
|
|||
|
|
|
|||
|
|
这里少一个图
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 多次异步调用的顺序
|
|||
|
|
|
|||
|
|
- 多次异步调用的结果，顺序可能不同步。
|
|||
|
|
|
|||
|
|
- 异步调用的结果如果**存在依赖**，则需要通过回调函数进行嵌套。
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 前端使用异步的场景
|
|||
|
|
|
|||
|
|
什么时候需要**等待**，就什么时候用异步。
|
|||
|
|
|
|||
|
|
- 定时任务：setTimeout（定时炸弹）、setInterval（循环执行）
|
|||
|
|
|
|||
|
|
- 事件绑定（比如说，按钮绑定点击事件之后，用户爱点不点。我们不可能卡在按钮那里，什么都不做。所以，应该用异步）
|
|||
|
|
|
|||
|
|
- 网络请求：ajax请求、网络图片加载
|
|||
|
|
|
|||
|
|
- ES6中的Promise
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 接口调用的方式
|
|||
|
|
|
|||
|
|
js 中常见的接口调用方式，有以下几种：
|
|||
|
|
|
|||
|
|
- 原生 ajax、基于 jQuery 的 ajax
|
|||
|
|
- Promise
|
|||
|
|
- Fetch
|
|||
|
|
- axios
|
|||
|
|
|
|||
|
|
|
|||
|
|
下一篇文章，我们重点讲一下接口调用里的**Promise**。
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 参考链接
|
|||
|
|
|
|||
|
|
- [JS-同步任务，异步任务，微任务，和宏任务](https://github.com/PleaseStartYourPerformance/javaScript/issues/34)
|
|||
|
|
|
|||
|
|
- [JS同步异步宏任务微任务](https://juejin.cn/post/6875605533127081992)、[JavaScript中事件循环的理解](https://zhuanlan.zhihu.com/p/364475433)、[javascript事件循环机制](https://github.com/reng99/blogs/issues/34)
|