JavaScript - 事件循环

2018-04-28 本文已影响0人地里有油

前言

JavaScript是一门单线程、非阻塞的脚本语言。

单线程意味着javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。

非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。

那为什么JavaScript是单线程呢？是因为JavaScript最开始的执行环境是在浏览器中，而我们需要进行各种各样的dom操作。如果JavaScript是多线程的，那么当两个线程同时对dom进行一项操作，例如一个向其添加事件，而另一个删除了这个dom，那程序就会出现问题。因此，JavaScript只能用一个主线程来执行代码，这样就保证了程序执行的一致性。

但是，单线程虽然保证了程序执行顺序但是也限制了JavaScript的效率，因此H5中新增了web worker技术。这项技术可以让JavaScript多线程运行。然而，使用web worker技术开的多线程有着诸多限制，例如：所有新线程都受主线程的完全控制，不能独立执行。这意味着这些“线程” 实际上应属于主线程的子线程。另外，这些子线程并没有执行I/O操作的权限，只能为主线程分担一些诸如计算等任务。所以严格来讲这些线程并没有完整的功能，也因此这项技术并非改变了JavaScript语言的单线程本质。

而JavaScript的另一个特点是非阻塞，而非阻塞是因为事件循环机制（event loop）。

本文主要讲的是浏览器环境下的事件循环而非node环境下的，两个环境下的事件循环之间存在差异。

事件循环

先来一段代码：

console.log("start");

setTimeout(function () {
    console.log("setTimeout");
}, 1000);

console.log("end");

//运行后的结果如下：
//start
//end
//setTimeout

在控制台中运行上述代码，我们可以看出先输出“start”和"end",然后大约1秒后输出"setTimeout"。代码并有在1s中之后才输出“end”，而是立即输出。这是因为setTimeout方法是一个异步的函数。也就是说代码中设置了一个异步延时函数时，代码并不会阻塞，只会在浏览器的事件表中进行记录，代码会继续执行下去。但延时的时间结束后，事件表会将setTimeout的回调函数添加至事件队列（task queue）中，事件队列拿到了任何后便将任何压入到执行栈（stack）中，然后执行栈执行任务，输出"setTImeout"。

现在，对上面的代码进行一些修改：

console.log("start");

setTimeout(function () {
    console.log("setTimeout");
}, 0); //这里延时改为了0

console.log("end");

//运行后的结果如下：
//start
//end
//setTimeout

在代码中我们将延时时间改为0，但是输出的结果并没有改变。这是因为setTimeout的回调函数只是被添加到事件队列（stack queue）中，但是不会立即执行。因为当前的执行栈中还有任务没有执行结束，所以setTimeout任务还在排队，直到”end“输出后，当前的执行栈中任务执行完毕，执行栈为空，这时候JS引擎便会检查事件队列，把setTimeout任务压入执行栈中执行。

根据上面的代码我们知道，js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕，主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码，如此反复，这样就形成了一个无限的循环。这个过程被称为“事件循环（Event Loop）”。

image

上图中的stack表示我们所说的执行栈，Web APIs则是代表一些异步事件，而callback queue即事件队列。

进阶：异步中的Microtasks和Macrotasks

异步任务分为两类：macrotasks（宏任务）和microtasks（微任务，ES2015规范中称为Job），所属的API如下：

macrotasks（宏任务）:

setTimeout
setInterval
setImmediate
requestAnimationFrame
I/O
UI渲染

microtasks（微任务）:

process.nextTick
promise
Object.observe
MutationObserver

WHATWG规范：

一个事件循环(event loop)会有一个或多个任务队列(task queue)
task queue 就是 macrotask queue
每一个 event loop 都有一个 microtask queue
task queue == macrotask queue != microtask queue
一个任务 task 可以放入 macrotask queue 也可以放入 microtask queue 中
当一个任务被放入microtask或者macrotask队列后，准备工作就已经结束，这时候可以开始执行任务了。

根据上面的描述，事件循环的运行机制大概可以分为以下几个步骤：

检查事件队列是否为空，如果为空，则继续检查；如果不为空，则执行2；

取出macrotask，压入执行栈；

执行任务；

任务执行完后，检查microtask队列，如果不为空则执行里面的任务。如果为空，这执行5；

检查执行栈，如果执行栈为空，则执行1；如果不为空，则继续检查；

举个例子看是否掌握了：

console.log('start');

setTimeout(function() {
    console.log('setTimeout');
    new Promise(function (resolve) {
        console.log('promise2')
        resolve()
    }).then(function () {
        console.log('then2')
    })
},0);
    
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('then1')
})

console.log('end');

//运行后的结果如下：
//start
//promise1
//end
//then1
//setTimeout
//promise2
//then2

在控制台中运行上述代码，代码开始运行时，从macrotask queue中取出任务执行，然后输出"start"，遇到setTimeout，把setTimeout放入macrotask queue中，继续运行，遇到实例化promise输出"promise1"，然后运行resolve()，然后遇到promise.then，放入到microtask queue中，然后输出"end"，当前macrotask 执行完了，然后取出microtask queue中的任务，输出"then1"。当前microtask执行完后，在macrotask queue取出下一个macrotask，压入执行栈，输出"setTimeout"，然后实例化promise，输出"promise2"，然后遇到promise.then，放入到microtask queue中，当前macrotask 执行完了，然后取出microtask queue中的任务，输出"then2"。然后继续检查macrotask queue，如果不为空，则继续取出macrotask。为空则继续检查。

JavaScript - 事件循环

前言

事件循环

进阶：异步中的Microtasks和Macrotasks

猜你喜欢

热点阅读