一、什么是单线程

Javascript语言的一大特点就是单线程，也就是说， 同一个时间只能做一件事。那么，为什么Javascript不能有多个单线程呢？这样可以提高效率。

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

二、任务队列

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

于是，就有了同步任务和异步任务的概念。

2.1 同步任务（synchronous）:

在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。

2.2 异步任务（asynchronous）：

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

2.3 总结：

所有的同步任务都在主线程上执行，形成一个执行栈（exection context stack）
主线程之外，还存在一个任务队列（task queue）.只有异步任务有了一个运行结果，就在“任务队列”之中放置一个事件。
一旦“执行栈“中的所有同步任务执行完毕，系统就会读取”任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束了等待状态，进入了执行栈，开始执行。
主线程会不断的重复上面的第三步(只要主线程空了，就会读取任务队列）。

三. 事件和回调函数

"任务队列"是一个事件的队列（也可以理解成消息的队列），IO设备（比如Ajax操作从网络读取数据）完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列",就是读取里面的那些事件。

“任务队列”中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入“任务队列”，等待主线程读取。

所谓的回调函数（callback），就是那些被主线程挂起来的代码。 异步任务必须指定回调函数， 当主线程开始执行异步任务，就是执行对应的回调函数。

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

四、Event Loop

主线程从“任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又被称为Event Loop(事件循环)。

上图中，主线程运行的时候，产生堆（heap）和栈（stack）,栈中的代码调用各种外部的API，他们在“任务队列”中添加各种事件（click、load、done）.只要栈中的代码执行完毕。主线程就会读取“任务队列”，依次执行那些事件所对应的回调函数。

执行栈中的代码（同步任务），总是在读取“异步任务”之前执行 。

var req = new XMLHttpRequest();
req.open('GET', url);    
req.onload = function (){};    
req.onerror = function (){};    
req.send();

//等价于下面的写法
var req = new XMLHttpRequest();
req.open('GET', url);
req.send();
req.onload = function (){};    
req.onerror = function (){};

因为req.send方法是Ajax操作想服务器发送数据，他是一个异步任务，意味着只有执行栈中所有代码执行完成，系统才会读取任务队列。也就是说回调函数部分（onload和onerror），在send()方法的前面和后面是无关紧要的，因为他们是属于执行栈中的一部分，系统总是执行完它们，才会去读取“任务队列”。

五、宏任务和微任务

Javascript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列来搞定一些代码的执行。整个执行过程，我们称为事件循环过程。一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与micro-task(微任务)，在最新标准中，它们被分别称为task与jobs。

5.1 宏任务

script(整体代码)
setTimeout
setInterval
setImmediate
I/O
UI render

5.2 微任务

process.nextTick
Promise
Async/Await(实际就是promise)
MutationObserver(html5新特性)

五、定时器

除了放置在异步任务的事件，“任务队列” 还可以放置定时事件，即：指定某些代码在多少时间之后执行，这叫做“定时器”（timer）功能，也就是定时执行的代码。

定时器功能主要由setTimeout()和setInterval这两个函数来完成，他们的内部运行机制完成一样，区别在于前者执行的代码是一次性执行，后者则为反复执行。

console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);

总之，setTimeout(fn,o) 的含义是：指定某个任务在主线程最早可得的空闲时间执行，也就是说，只要主线程执行栈中的同步任务全部执行完成，栈为空就马上执行。 它在“任务队列”的尾部添加一个事件，因此要等到同步任务和“任务队列"现有的事件都处理完成，才会被执行。

HTML5标准规定了setTimeout()的第二个参数的最小值不得不低于4毫秒，如果低于这个值会自动增加。

需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

  console.log(1);
  setTimeout(function () { console.log(9); }, 2);
  setTimeout(function () { console.log(2); }, 8);
  setTimeout(function () { console.log(3); }, 2);
  setTimeout(function () { console.log(4); }, 5);
  setTimeout(function () { console.log(7); }, 1000);
  setTimeout(function () { console.log(5); }, 100);

  setTimeout(function () { console.log(6); });
  console.log(8)

  //1 8  6  9 3  4  2 5 7

  console.log(1);
  setTimeout(function () { console.log(9); }, 2);
  setTimeout(function () { console.log(2); }, 8);
  setTimeout(function () { console.log(3); }, 2);
  setTimeout(function () { console.log(4); }, 5);
  setTimeout(function () { console.log(7); }, 1000);
  setTimeout(function () { console.log(10); }, 0);
  setTimeout(function () { console.log(5); }, 100);

  setTimeout(function () { console.log(6); });
  setTimeout(function () { console.log(11); }, 0);
  console.log(8)

  // 1 8 10  6  11 9 3  4 2 5 7

  setTimeout(() => {
    console.log('hello')
  }, 1000)
  var a = 1, b = 2
  setTimeout(() => {
    console.log('hello', a + b)
  }, 3000, a, b)

  //hello     hello 3

setTineout从第三个参数开始的后面的所有参数都是函数表达式的参数。

setTimeout(() => {
    console.log('hello')
  })
setTimeout(() => {
  console.log('hello')
}, 0)

这两个写法是等价的。delay 取默认值 0，意味着“马上”执行，或者尽快执行。

六、综合题

6.1

console.log('script start')

function async1() {
  async2()
  console.log('async1 end')
}
function async2() {
  console.log('async2 end')
}
async1()

setTimeout(function () {
  console.log('setTimeout')
}, 0)

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
.then(function () {
  console.log('promise1')
})
.then(function () {
  console.log('promise2')
})

console.log('script end')

6.2

setTimeout(() => {
    new Promise((resolve, reject) => {
      console.log(1);
      setTimeout(() => resolve(3), 3000);
      console.log(2);
    }).then(x => console.log(x));
  });
  setTimeout(() => {
    new Promise((resolve, reject) => {
      console.log(4);
      setTimeout(() => resolve(5), 1000);
      console.log(6);
    }).then(x => console.log(x));
  });

6.3

参考文档：

ruanyifeng.com/blog/2014/1…

www.ruanyifeng.com/blog/2013/1…

面试必问题—事件循环机制