1 JavaScript执行过程
2.1 JavaScript引擎运行机制
在前面几章中，已经初次渲染完浏览器的页面，接下来主要分析JS引擎的一些运行机制。
2.1.1 事件循环、任务队列
事件循环与任务队列是JS中比较重要的两个概念，这两个概念在ES5和ES6两个标准中有不同的实现。
ES5：
事件循环：
① 所有同步任务都在主线程（JS引擎）上执行，形成一个执行栈（函数调用栈）（execution context stack）；
② 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务满足了条件， 有了运行结果，就在"任务队列"之中放置一个事件；
③ 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行；
④ 主线程不断重复上面的第三步，这个过程也称为 Event Loop（事件循环）。
ES6：
在ES3和更早的版本中，JavaScript本身还没有异步执行代码的能力，这也就意味着，宿主环境（浏览器/node）传递给JavaScript引擎一段代码，引擎就把代码直接顺次执行了，这个任务也就是宿主发起的任务，但是在ES5之后，JavaScript引入了Promise，这样，不需要浏览器/node的安排，JavaScript引擎本身也可以发起任务了；
我们将宿主发起的任务称为宏观任务（macrotask），把JavaScript引擎发起的任务称为微观任务（microtask）；
宏观任务：（主代码块，setTimeout()，setInterval()等）
① 可以理解为每次执行栈执行的事件就是一个宏观任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）
② 每一个宏观任务都会从头到尾将本身的事件执行完毕，不会执行其它，在执行期间产生的微观任务会被保存到微观任务队列。
③ 在HTML规范：event-loop-processing-model里叙述了一次事件循环的处理过程，JS引擎在处理了macroTask和microTask之后，会进行一次Update the rendering，其中细节比较多，总的来说会进行一次UI的重新渲染，在setTimeout()这些异步任务之前。
微观任务：（Promise()，process.nextTick()等）
① 可以理解为在当前宏观任务执行结束后立即执行的任务，在下一次Event Loop（包括主线程读取"任务队列"）之前，所以它的响应速度是要比异步任务更快的；
事件循环： ★
① 执行一个宏任务（栈中没有就从任务队列中获取）；
② 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中；
③ 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）；
④ 当前宏任务与微任务执行完毕，开始检查渲染，然后GUI线程接管渲染；
④ 渲染完毕后，JS引擎线程继续接管，开始下一个宏任务（从任务队列中获取）。
例子：
var r = new Promise(function(resolve, reject) {
console.log("a");
resolve();
});
setTimeout(() => console.log("d"), 0);
setTimeout(function() {
console.log("e");
}, 0);
r.then(() => console.log("c"));
console.log("b");
Promise()里面的函数和console.log("b");直接执行，两个setTimeout()会加入任务队列，而Promise.then()回调是一个异步的执行过程，是微观任务，会在Promise()里面的函数和console.log("b");之后执行，所以整个代码块运行结果为abcde。
Promiss：
Promise()是JavaScript语言提供的一种标准化的异步管理方式：
function sleep(duration) {
return new Promise(function(resolve, reject) {
console.log("b");
setTimeout(resolve(), duration);
})
}
console.log("a");
sleep(5000).then(() => console.log("c"));
整个代码块运行结果为abc，resolve()对应Promise.then()回调。
2.1.2 异步任务
对于异步任务的学习，推荐《深入掌握 ECMAScript 6 异步编程》
开发中常见的异步操作有：
① 网络请求，如 ajax，request；
② IO 操作，如 fs.readFile，DB的CRUD；
③ 定时函数，如 setTimeout，setInterval；
④ 事件监听。
回调函数：函数中的参数如果是另一个函数的话，那么这个作为参数的函数就是回调函数
function a(callback) { //4、找到函数a()，执行。 //11、第二次执行函数a()。
console.log("我是parent函数a！"); //5、输出。 //12、输出。
console.log("调用回调函数"); //6、输出。 //13、输出。
callback(); //7、执行传递过来的函数b()。 //14、执行传递过来的函数c()。
}
function b() { //8、找到函数b()
console.log("我是回调函数b"); //9、输出，完成函数a()回调函数b()的执行。
}
function c() { //15、找到函数c()。
console.log("我是回调函数c"); //16、输出。
}
function test() { //2、找到函数test()，执行函数。
a(b); //3、执行函数a(b)。
a(c); //10、执行函数a(c)。
}
test(); //1、执行函数test()。
Generator 函数：该函数可以暂停执行，而且函数体内外可以数据交换，还可以使用try ... catch来处理错误
var fetch = require('node-fetch');
function* gen() {
var url = 'https://api.github.com/users/github';
var result = yield fetch(url);
console.log(result.bio);
}
var g = gen();
var result = g.next();
result.value.then(function(data) {
return data.json();
}).then(function(data) {
g.next(data);
});
co 函数：Generator 函数只要传入 co 函数，就会自动执行，不需要写.next()，co 函数还可以返回一个 Promise 对象，因此可以用 then 方法添加回调函数
var fs = require('fs');
var readFile = function(fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) reject(error);
resolve(data);
});
});
};
var gen = function*() {
var f1 = yield readFile('/etc/fstab');
var f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
var co = require('co');
co(gen).then(function() {
console.log('Generator 函数执行完成');
});
async 函数：把上面的例子写成 async 函数，其实async 函数就是将 Generator 函数的星号替换成 async，将 yield 替换成 await，仅此而已
var fs = require('fs');
var readFile = function(fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) reject(error);
resolve(data);
});
});
};
var asyncReadFile = async function() {
var f1 = await readFile('/etc/fstab');
var f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
console.log('async 函数执行完成');
};
asyncReadFile();
使用async 函数实现红绿灯：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>红绿灯</title>
<style>
#traffic-light {
margin:0 auto
height: 50px;
width: 50px;
background: green;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="traffic-light"></div>
<script>
function sleep(duration) {
return new Promise(function(resolve) {
setTimeout(resolve, duration);
})
}
async function changeColor(duration, color) {
document.getElementById("traffic-light").style.background = color;
await sleep(duration);
}
async function main() {
while (true) {
await changeColor(3000, "green");
await changeColor(1000, "yellow");
await changeColor(2000, "red");
}
}
main()
</script>
</body>
</html>
自此，事件循环和宏微任务部分结束。
2.1.3 函数的执行过程
函数是更细的执行粒度，一段代码块可能包含多个函数；
闭包的定义：如果一个函数使用了它范围外面的变量，那么这个函数+这个变量就叫做闭包。
var local = 1
function bar() {
console.log(local);
}
在JS中，函数等同于闭包，闭包是 JS 函数作用域的副产品。换句话说，正是由于 JS 的函数内部可以使用函数外部的变量，所以上面的代码正好符合了闭包的定义。
闭包是一个模式，不单单是用来访问私有变量的。
2.1.3.1 执行上下文
JavaScript标准把一段代码（包括函数），执行所需的所有信息定义为：“执行上下文”：
执行上下文在ES3中，包含三个部分：
① scope：作用域，也常常被叫做作用域链；
② variable object：变量对象，用于存储变量的对象；
③ this value：this值。
在ES5中，我们改进了命名方式，把执行上下文最初的三个部分改为下面这个样子：
① lexical environment：词法环境，当获取变量时使用；
② variable environment：变量环境，当声明变量时使用；
③ this value：this值。
在ES2018中，执行上下文又变成了这个样子，this值被归入lexical environment，但是增加了不少内容：
① lexical environment：词法环境，当获取变量或者this值时使用；
② variable environment：变量环境，当声明变量时使用；
③ code evaluation state：用于恢复代码执行位置；
④ Function：执行的任务是函数时使用，表示正在被执行的函数；
⑤ ScriptOrModule：执行的任务是脚本或者模块时使用，表示正在被执行的代码；
⑥ Realm：使用的基础库和内置对象实例；
⑦ Generator：仅生成器上下文有这个属性，表示当前生成器。
2.1.3.2 函数里不带var/let/const的变量
2.1.3.3 函数（函数体）
2.1.4 函数中语句的执行过程
