1、单线程的JavaScript

咱们都晓得，js是一门单线程语言，何为单线程？就是在同一时间，只能做一件事

为什么js要这么设计呢？js的主要用途就是操作DOM，与用户进行操作，所以如果js有两个线程，这时一个线程在某个节点上批改内容，另一个线程也在该节点上批改该内容，那js要以谁为准呢？

所以js的单线程当然是为了高效平安

为了进步利用多核CPU的计算能力，HTML5提出Web Worker规范，容许js脚本创立多个线程，然而子线程齐全受主线程管制且不得操作DOM。所以这个新规范并没有扭转js单线程的实质

2、同步工作和异步工作

js的单线程就意味着所有工作都须要排队，前一个工作完结，才会执行下一个工作。然而IO设施很慢，当须要读取数据时，这时候CPU就会停下来期待IO操作，更要命的是即便该CPU再忙，其它CPU也不会帮忙，大家你看我我看你，这就特地影响用户体验了

所以为了解决阻塞式IO带来的不好的体验，js规定了，这时候主线程齐全能够不论IO设施，将其挂起处于期待中的工作，而后持续运行前面的工作，等到IO设施运行后果进去后，再回过头来，把挂起的工作继续执行上来。这就是异步操作。

于是，所有的工作能够分成两种，一种是同步工作，一种是异步工作

  • 同步工作：在主线程上执行工作，这个前一个工作执行完之后，能力执行下一个工作；如果前一个工作没有执行完，那么线程会始终期待上来，直到该工作执行完才会继续执行
  • 异步工作：工作不进入主线程，而是进入“音讯队列”，主线程不会始终期待上来，而是继续执行上面的工作，当只有音讯队列告诉主线程，某个异步工作能够执行了，该工作才会进入主线程执行

当初咱们来看一下异步工作的执行机制：

  1. 所有同步工作都在主线程上执行，造成一个 执行栈

<img src="https://pic4.zhimg.com/80/v2-1778c62c1eaa529a5457eb6839547794_720w.png" alt="img" style="zoom:80%;" />

  1. 主线程之外，还存在一个 音讯队列，只有异步工作有了运行后果，就在 音讯队列中搁置一个事件，并告诉主线程
  2. 一旦 执行栈中的所有同步工作执行结束，零碎就会读取 音讯队列，相应的事件就完结了期待的状态，进入主线程，开始执行

主线程会一直的执行下面的三个步骤，只有主线程空了，就会去读取 音讯队列，这就是 JavaScript的执行机制

3、音讯队列和事件循环

音讯队列就是队列，也是遵循先进先出的准则。IO线程每实现一项工作，就会将该工作增加到音讯队列中

所以先进入的工作会优先被主线程读取，只有执行栈一清空，即同步工作已执行结束，音讯队列中的工作就会顺次进入主线程。然而有一种非凡状况，那就是定时器，定时器工夫没到，是不会被增加到主线程的

当初咱们晓得异步操作后音讯队列会告诉主线程，能够来取事件执行了，那么问题来了，这个告诉机制是怎么实现的呢？

答案就是事件循环

事件循环（Event Loop）：事件循环是指主线程反复从音讯队列中取音讯、执行音讯的过程

而这里的事件就是咱们相熟的回调函数，该回调函数是在注册异步工作的时候增加的

所以，工作线程将事件增加到音讯队列中，主线程通过事件循环去读取事件。而实际上，主线程只会做一件事，就是从工作对列中读取音讯、执行音讯，再读取、再执行，直到音讯队列为空。并且每次主线程只有在将以后的音讯执行结束之后，才会去取下一个音讯

上面咱们用一张图来更好的示意这个过程：

<img src="https://pic1.zhimg.com/80/v2-651442e7e305c14c118a29e78e700d3d_720w.png" alt="img" style="zoom: 67%;" />

主线程在运行的时候，会产生堆（heap）和 栈（stack），栈中的代码会调用内部的API，它们在 音讯队列中退出各种事件，只有栈中的代码执行结束，主线程就会去读取 音讯队列，顺次执行那些事件所对应的回调函数

4、定时器

咱们先来看一下同步回调

function callback() {    console.log('我是同步回调');}function bar(fn) {    console.log(123);    fn();    console.log(456);}bar(callback);// 123// 我是同步回调// 456

callback 函数作为参数传给了bar函数，在bar函数中的callback 就是回调函数，而且是同步回调

咱们再来看看异步回调的例子：

function foo() {    console.log('我是异步回调');}function bar(fn) {    console.log(123);    setTimeout(fn, 1000);    console.log(456);}bar(foo);// 123// 456// 我是异步回调

setTimeout在bar函数执行完结后延时1s后再执行，这种回调函数在主函数内部执行的过程就称为异步回调

显然，setTimeout()定时器是一个异步工作，零碎会先执行执行栈中的同步工作，再回过头来执行 音讯队列中的事件

即便定时器的延时工夫为0

function foo() {    console.log('我是异步回调');}function bar(fn) {    console.log(123);    setTimeout(fn, 0);    console.log(456);}bar(foo);// 123// 456// 我是异步回调

因为setTimeout实质就是异步工作，无论如何它都会被挂起，js先执行同步工作后，发现音讯队列中的工作能够执行了（setTimeout延时工夫到），就再去执行它

值得注意的是：

  • 定时器事件尽管是增加到 工作队列中了，然而也得等它定时实现之后，才会去指定它
  • 如果此时它曾经位于队列的首位了，然而定时工夫还未完结，此时，它也不会被执行，前面事件会先执行

另外，异步回调是指回调函数函数在主函数内部执行，个别有两种形式：

  1. 第一种：把异步工作增加到音讯队列尾部
  2. 第二种：把异步工作增加到微工作队列中，这样就能够在当前任务的开端处执行微工作了