进程、线程、异步

行文纲目
（一）进程、线程
（二）事件驱动
（三）异步与线程的关系

（一）进程、线程
英文    中文       类比
cpu    中央处理器    工厂（电力有限，单一时刻只供一个车间使用）
process  进程（任务）   车间（有各种资源，机床、餐厅、卧室、厕所）
thread   线程（子任务）  工人（可以使用车间资源，来完成各自子任务）

  进程是系统分配的独立资源，是 CPU资源分配的基本单位，进程是由一个或者多个线程组成的。一个cpu任意时刻，只能运行一个进程。
  线程是进程的执行流，是CPU调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。
  互斥锁（Mutual exclusion，缩写 Mutex），保障单一时间内，只有1个线程操作某块共享内存，等这个线程退出，外面线程方可进入。类似mysql中的排它锁。
  信号量（Semaphore），保障单一时间内，最多n个线程操作某块共享内存，释放几个，才可以再进入几个。类似mysql的共享锁。

    操作系统的设计，因此可以归结为三点：
（1）以多进程形式，允许多个任务同时运行；
（2）以多线程形式，允许单个任务分成不同的部分运行；
（3）提供协调机制，一方面防止进程之间和线程之间产生冲突，另一方面允许进程之间和线程之间共享资源。

(参考http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html)

（二）事件驱动

    事件队列（Event Queue）
    异步会进入Event Table，等待回调条件满足时，推入Event Queue，这时，主线程若执行完毕，会将回调拉入主线程执行

    注：如果主线程中的同步代码非常多，执行需要很长时间，会导致异步队列中，达到执行条件的回调无法及时执行，只有主线程任务结束才会执行Event Queue中存在的回调。

    事件循环（Event Loop）
    宏任务和微任务切换执行，不断循环，形成了事件循环。 浏览器执行script的过程如下：

宏任务 Macrotask 有哪些？

HTML parsing、Network events、Mouse events、Keybord events、setTimeout、setInterval

微任务 Microtask 有哪些？

process.nextTick、Promise.then、Promise.catch、Promise.finally、DOM mutations

判断以下代码，在node中的输出结果

// 主线程直接执行
console.log(1);
// 放入宏事件队列中
setTimeout(function() {
    console.log(5);
    new Promise(function(resolve) {
        console.log(6);
        resolve();
    }).then(function() {
        console.log(8)
    })
    process.nextTick(function() {
      console.log(7);
    })
})
// 微任务
process.nextTick(function() {
    console.log(3);
})
// 主线程直接执行
new Promise(function(resolve) {
    console.log(2);
    resolve();
}).then(function() {
    // 微任务
    console.log(4)
})
复制代码

输出顺序就是数字本身。注意：同为微任务，process.nextTick会在Promise.then之前哦
（参考自一篇网络文章，具体记不清了）

（三）异步与线程的关系

function foo() {
    console.log( 'first' );
    setTimeout( ( function(){ console.log( 'second' ); } ), 5);
 
}
 
for (var i = 0; i < 1000000; i++) {
    foo();
}
复制代码

    执行结果会首先全部输出first，然后全部输出second；尽管中间的执行会超过5ms。为什么？

    前面已经提到浏览器是事件驱动的（Event driven），浏览器中很多行为是异步（Asynchronized）的，例如：鼠标点击事件、窗口大小拖拉事件、定时器触发事件、 XMLHttpRequest完成回调等。当一个异步事件发生的时候，它就进入事件队列。浏览器有一个内部大消息循环，Event Loop（事件循环），会轮询大的事件队列并处理事件。例如，浏览器当前正在忙于处理onclick事件，这时另外一个事件发生了（如：window onSize），这个异步事件就被放入事件队列等待处理，只有前面的处理完毕了，空闲了才会执行这个事件。setTimeout也是一样，当调用的时 候，js引擎会启动定时器timer，大约xxms以后执行xxx，当定时器时间到，就把该事件放到主事件队列等待处理（浏览器不忙的时候才会真正执 行）。

    每个浏览器具体实现主事件队列不尽相同，这不谈了。

    浏览器不是单线程的     虽然JS运行在浏览器中，是单线程的，每个window一个JS线程，但浏览器不是单线程的，例如Webkit或是Gecko引擎，都可能有如下线程：

javascript引擎线程
界面渲染线程
浏览器事件触发线程
Http请求线程

    很多童鞋搞不清，如果js是单线程的，那么谁去轮询大的Event loop事件队列？答案是浏览器会有单独的线程去处理这个队列。

    AJAX请求是否真的异步？   其实请求确实是异步的，这请求是由浏览器新开一个线程请求（见前面的浏览器多线程）。当请求的状态变更时，如果先前已设置回调，这异步线程就产生状态变更事件放到 JavaScript引擎的事件处理队列中等待处理。当浏览器空闲的时候队列任务被处理。javascript引擎确实是单线程处理它的任务队列，能理解成就是普通函数和回调函数构成的队列。

    总结一下，Ajax请求确实是异步的，这请求是由浏览器新开一个线程请求，事件回调的时候是放入Event loop单线程事件队列等候处理。

    setTimeout(func, 0)为什么有时候有用？
    写 js多的童鞋可能发现，有时候加一个setTimeout(func, 0)非常有用，为什么？难道是模拟多线程吗？错！前面已经说过了，javascript是JS运行在浏览器中，是单线程的，每个window一个JS线 程，既然是单线程的，setTimeout(func, 0)神奇在哪儿？那就是告诉js引擎，在0ms以后把func放到主事件队列中，等待当前的代码执行完毕再执行，注意：重点是改变了代码流程，把func 的执行放到了等待当前的代码执行完毕再执行。这就是它的神奇之处了。它的用处有三个：

1.让浏览器渲染当前的变化（很多浏览器UI render和js执行是放在一个线程中，线程阻塞会导致界面无法更新渲染）
2.重新评估”script is running too long”警告
3.改变执行顺序

    例如：下面的例子，点击按钮就会显示"calculating...."，如果删除setTimeout就不会。因为reDraw事件被进入事件队列到长时间操作的最后才能被执行，所以无法刷新。

<button id='do'> Do long calc!</button>
<div id='status'></div>
<div id='result'></div>
 
 
$('#do').on('click', function(){
  
  $('#status').text('calculating....'); //此处会触发redraw事件的fired，但会放到队列里执行，直到long()执行完。
  
  // without set timeout, user will never see "calculating...."
  //long();//执行长时间任务，阻塞
   
  // with set timeout, works as expected
  setTimeout(long,50);//用定时器，大约50ms以后执行长时间任务，放入执行队列，但在redraw之后了，根据先进先出原则
  
 })
  
  
  
function long(){
  var result = 0
  for (var i = 0; i<1000; i++){
    for (var j = 0; j<1000; j++){
      for (var k = 0; k<1000; k++){
        result = result + i+j+k
      }
    } 
  }
  $('#status').text('calclation done') // has to be in here for this example. or else it will ALWAYS run instantly. This is the same as passing it a callback 
}
复制代码

（参考https://www.cnblogs.com/yasmi/articles/5064588.html）

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