简介

单线程

单线程是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个,不妨叫它主线程。

所谓单线程,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成再执行后面一个任务。

这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。

但实际上还存在其他线程。例如:处理AJAX请求的线程,处理DOM事件的线程、定时器线程、读写文件的线程(在Node.js中)等等。这些线程可能存在于JS引擎之内,也可能存在于JS引擎之外,统称工作线程

同步和异步

虽然 Javascipt 语言是“单线程”执行环境,但在执行模式下,分成同步和异步两种模式,其中我们更多的使用回调函数的方式来进行异步操作

  • 同步模式:任务按排列顺序执行;
  • 异步模式:其实就是延迟处理。异步是通过异步函数实现的,如setTimeout()。

异步过程:主线程发起一个异步请求,相应的工作线程接受请求并告知主线程已经收到(异步函数返回);主线程可以继续执行后面的代码,同时主线程执行异步任务;工作线程完成工作后,通知主线程;主线程收到通知后,执行一定的动作(调用回调函数)。

异步操作的应用场景

  • 定时器: setTimeout 与 setInterval
  • 生成器: generator
  • 请求: XMLHTTPRequest 与 Fetch

举例:

var start = new Date();
setTimeout(function() {
  var current = new Date();
  var dvalue = current - start;
  console.log(dvalue + 'ms');
}, 500);
while(new Date() - start < 1000) {}

因为 setTimeoutsetInterval 的计时精度问题,不同的浏览器里得到的数值可能稍微有出入。但是这个数值肯定大于等于1000ms。

在这个例子里,js按顺序往下执行时,遇到setTimeout()函数,setTimeout()函数直接返回,里面的回调函数被放入到事件队列里。js接着往下执行while循环。当时间差>=1000时,跳出循环,执行完毕。此时js才会去处理队列里的事件。如果有适合“触发”(就像1000ms之前设定好的延迟500ms的延时事件)的事件,则调用该事件的处理函数。事件处理器返回后,我们又回到队列处。

消息队列和事件循环

异步过程中,工作线程在异步操作完成后需要通知主线程。那么这个通知机制是怎样实现的呢? 是利用消息队列和事件循环。

工作线程将消息放到消息队列,主线程通过事件循环过程去取消息。

  • 消息队列:消息队列是一个先进先出的队列,它里面存放着各种消息。
  • 事件循环:事件循环是指主线程重复从消息队列中取消息,执行的过程。

实际上,主线程只会做一件事情,就是从消息队列里面取消息、执行消息、再取消息、再执行。当消息队列为空时,就回等待直到消息队列变成非空。而且主线程只有在将当前的消息执行完成后,才会去取下一个消息。这种机制就叫做事件循环机制,取一个消息的并执行的过程叫做一次循环。

JS的异步发展史

  • 回调函数
  • Promise
  • 生成器与迭代器
  • async/await

简单归纳就是:JS天生异步

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress