JavaScript执行顺序分析

前言

上星期面试被问到了事件执行顺序的问题，想起来以前看《深刻浅出Node.js》时看到这一章就忽略了，此次来分析一下JavaScript的事件执行顺序。废话少说，正题开始。

单线程JavaScript

首先咱们要知道JavaScript是一门单线程解释型语言。这就意味着在同一个时间下，咱们只能执行一条命令。之因此它是一门单线程语言，和它的用途有关。
JavaScript设计出来的初衷是为了加强浏览器与用户的交互，尤为是表单的交互，而以后的Ajax技术也是为了使表单的交互更加人性化而发明出来的。由于JavaScript是一门解释型的语言，而解释器内嵌于浏览器，这个解释器是单线程的。
之因此不设计成多线程是由于渲染网页的时候多线程容易引发死锁或者资源冲突等问题。可是浏览器自己是多线程的，好比解释运行JavaScript的同时还在加载网络资源。

Why doesn't JavaScript support multithreading?

<!-- more -->

事件循环

单线程就意味着若是你要运行不少命令，那么这些命令须要排序，通常状况下，这些命令是从上到下排序执行（由于解释器是从文件顶部开始）。好比如下代码是按照顺序执行的。

console.log("1");
console.log("2");
console.log("3");
//1
//2
//3

---

可是咱们还有知道在JavaScript里有异步编程的说法，好比Ajax，setTimeout，setInterval或者ES6中的Promise，async，await。

那么什么是同步和异步呢？

一条命令的执行在计算机里的意思就是它此时在使用CPU等资源，那么由于想要得到CPU资源的命令有不少，而CPU执行命令也须要时间去运算得到结果，因而就有了同步异步的概念。

同步就是在发出一个CPU请求时，在没有获得结果以前，该CPU请求就不返回。可是一旦调用返回，就获得返回值了。

异步表示CPU请求在发出以后，这个调用就直接返回了，因此没有返回结果。在运行结束后，须要经过一系列手段来得到返回值

---

这时候就要引入进程和线程的概念。

进程与线程

进程

概念：进程是一个具备必定独立功能的程序在一个数据集上的一次动态执行的过程，是操做系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。

线程

因为进程对于CPU的使用是轮流的，那么就存在进程的切换，可是因为如今的程序都比较大，切换的开销很大会浪费CPU的资源，因而就发明了线程，把一个大的进程分解成多个线程共同执行。

区别

• 进程是操做系统分配资源的最小单位，线程是程序执行的最小单位。
• 一个进程由一个或多个线程组成，线程是一个进程中代码的不一样执行路线；
• 进程之间相互独立，但同一进程下的各个线程之间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)。
• 调度和切换：线程上下文切换比进程上下文切换要快得多。

举个例子

假如我是鸣人，我想吃不少拉面，若是我一我的吃10碗的话，那我就是一个进程一个线程完成吃拉面这件事情。
可是若是我用9个分身和我一块儿吃10碗拉面，那我就是一个进程用9个线程去完成吃拉面这件事情。
而多进程这表示名人在一乐拉面里面吃拉面的同时，好色仙人在偷看妹子洗澡~ ~。好色仙人是单进程单线程去偷看的哦！

浏览器的线程

浏览器的内核是多线程的，在内核控制下各线程相互配合以保持同步，一个浏览器一般由一下线程组成：

• GUI 渲染线程
• JavaScript引擎线程
• 事件触发线程
• 异步http请求线程
• EventLoop轮询的处理线程

这些线程的做用：

• UI线程用于渲染页面
• js线程用于执行js任务
• 浏览器事件触发线程用于控制交互，响应用户
• http线程用于处理请求，ajax是委托给浏览器新开一个http线程
• EventLoop处理线程用于轮询消息队列

JavaScript事件循环和消息队列（浏览器环境）

由于JavaScript是单线程的，而浏览器是多线程的，因此为了执行不一样的同步异步的代码，JavaScript运行的环境采用里事件循环和消息队列来达到目的。
每一个线程的任务执行顺序都是FIFO(先进先出)
在JavaScript运行的环境中，有一个负责程序自己的运行，做为主线程；另外一个负责主线程与其余线程的通讯，被称为Event Loop 线程。
每当主线程遇到异步的任务，把他们移入到Event Loop 线程，而后主线程继续运行，等到主线程彻底运行完以后，再去Event Loop 线程拿结果。
而每一个异步任务都包含着与它相关联的信息，好比运行状态，回调函数等。

由此咱们能够知道，同步任务和异步任务会被分发到不一样的线程去执行。
如今咱们就能够分析一下一下代码的运行结果了。

setTimeout(()=>{console.log("我才是第一");},0);
console.log("我是第一");

1. 由于setTimeout是异步的事件，因此主线程把它调入Event Loop线程进行注册。
2. 主线程继续执行console.log("我是第一");
3. 主线程执行完毕，从Event Loop 线程读取回调函数。再执行console.log("我才是第一");;

setTimeout 和 setInterval

setTimeout

这里值得一提的是，setTimeout(callback,0)指的是主线程中的同步任务运行完了以后马上由Event Loop 线程调入主线程。
而计时是在调入Event Loop线程注册时开始的，此时setTimeout的回调函数执行时间与主线程运行结束的时间相关。
关于setTimeout要补充的是，即使主线程为空，0毫秒实际上也是达不到的。根据HTML的标准，最低是4毫秒。

setInterval

须要注意的是，此函数是每隔一段时间将回调函数放入Event Loop线程。
一旦setInterval的回调函数fn执行时间超过了延迟时间ms，那么就彻底看不出来有时间间隔了

micro-task（微任务） 与 macro-task（宏任务）

Event Loop线程中包含任务队列（用来对不一样优先级的异步事件进行排序），而任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。

• macro-task大概包括：script(总体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
• micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)
• setTimeout/Promise等咱们称之为任务源。而进入任务队列的是他们指定的具体执行任务（回调函数）。

来自不一样的任务源的任务会进入到不一样的任务队列中，而不一样的任务队列执行过程以下：
执行过程以下：
JavaScript引擎首先从macro-task中取出第一个任务，
执行完毕后，将micro-task中的全部任务取出，按顺序所有执行；
而后再从macro-task中取下一个，
执行完毕后，再次将micro-task中的所有取出；
循环往复，直到两个队列中的任务都取完。

举个大例子

console.log("start");
var promise = new Promise((resolve) => {
    console.log("promise start..");
    resolve("promise");
}); //3
promise.then((val) => console.log(val));
setTimeout(()=>{console.log("setTime1")},0);
console.log("test end...")

这里咱们按顺序来分析。

第一轮

1. 总体script代码做为一个宏任务进入主线程，运行console.log("start");。
2. 而后遇到Promises直接运行console.log("promise start..")。
3. 而后遇到promise.then，存入到micro-task队列中。
4. 而后遇到setTimeout,存入到macro-task队列中。
5. 于而后运行console.log("test end...");
6. 在这一轮中，宏任务运行结束，运行micro-task队列中的 promise.then，输出promise

第二轮

1. 取出macro-task队列中的setTimeout，运行console.log("setTime1");

结果

输出的顺序就是

// start
// promise start
// test end...
// promise
//setTime1

留一个案例大家去分析

async function testSometing() {
    console.log("执行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("执行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve) => {
    console.log("promise start..");
    resolve("promise");
}); //3
promise.then((val) => console.log(val));
setTimeout(()=>{console.log("setTime1")},3000);
console.log("test end...")

感谢如下文章

• 前端基础进阶（十二）：深刻核心，详解事件循环机制
• [[JavaScript] Macrotask Queue和Microtask Queue](http://www.jianshu.com/p/3ed9...
• JavaScript运行机制（堆、栈、消息队列）
• JavaScript 运行机制详解：再谈Event Loop
• 这一次，完全弄懂 JavaScript 执行机制