一 概念解析：
1 JS编译
JS不是提前编译的，而是在执行前由JS引擎在几微秒内进行编译
编译三部：
1、词法分析 （分析有啥词并整理成词法单元流（由词构成的数组））
2、语法分析（词法单元流整理成抽象语法树（abstract syntax code，AST））
3、代码生成（树整理成机器指令，等待执行）
JS在整个编译过程中的语法分析和代码生成阶段有特定步骤对运行性能进行优化。如：对冗余元素优化等。
这就是JS被称之为动态语言的原因
2 作用域
变量生效的范围被称为作用域。
作用域有两种主要的工作模型：
1、词法作用域，在编译过程的语法分析阶段确定作用域，定义在词法阶段的作用域，词法作用域是由变量、块或函数作用域定义位置来决定的。
2、动态作用域，在执行过程中确定作用域，例如eval可以接受字符串用来欺骗原有作用域，导致JS引擎在编译阶段的性能优化动作失效，并且难以维护。
js中有三种类型作用域：
a.全局作用域（全局变量拥有全局作用域，在JS代码中的任何地方都是有定义的）
b.函数作用域
c.块级作用域（let const tryCatch with eval可以生成块级作用域）
同一作用域内的所有对象以及变量可以被作用域 内的代码访问。
2.1 作用域的由来
ES5 只有全局作用域和函数作用域，没有块级作用域。
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
let和const实际上为 JavaScript 新增了块级作用域。
ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。
// 情况一
if (true) {
function f() {}
}
// 情况二
try {
function f() {}
} catch(e) {
// ...
}
但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。
ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();
}());
// Uncaught TypeError: f is not a function
如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。
- 允许在块级作用域内声明函数。
- 函数声明类似于
var，即会提升到全局作用域或函数作用域的头部。 - 同时，函数声明还会提升到所在的块级作用域的头部。
上面的例子实际运行的代码如下。
// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
var f = undefined;
if (false) {
function f() { console.log('I am inside!'); }
}
f();
}());
// Uncaught TypeError: f is not a function
引用自： ECMAScript 6 入门
3 作用域链
JS中有两种作用域链：
1、静态作用域链：全局、函数或块级的作用域链（执行声明代码时创建此作用域链）
2、动态作用域链：执行上下文的作用域链（在执行过程中生成，初始化为当前作用域的作用域链，使用完毕后执行上下文被销毁）
4 执行上下文（execution context），又叫执行环境：
执行上下文是一个JS的内部对象。
拥有作用域的代码在每次执行时都会创建一个独一无二的执行上下文，代码执行完毕后执行上下文被销毁。
执行上下文的生命周期：
1、创建阶段：
ExecutionContext = {
ThisBinding = <this value>, // 确定this
LexicalEnvironment = { ... }, // 词法环境 存储函数声明和变量（ let 和 const ）绑定
VariableEnvironment = { ... }, // 变量环境 仅用于存储变量（ var ）绑定
}
2、执行阶段，执行代码并赋值
3、执行完毕，销毁执行上下文
5 执行栈：
执行上下文依次放入执行栈中，依次执行；单线程的JS，同一时间只能执行一个方法，这些方法被放在一个栈内等待执行，这个栈就是执行栈。
6 闭包：
闭包是执行代码可以访问执行代码声明位置的作用域
1、函数在定义时作用域以外的地方被调用，此函数在定义时的作用域依然存在且可以被函数访问，这就是闭包。（你不知道的JS）
2、闭包类似于JS的内置对象，闭包的作用域链包含了函数创建位置的执行上下文相同的作用域链，因此在执行上下文的作用域在代码执行完毕后无法被销毁。（高性能JS P25）
在浏览器中验证闭包的描述：
函数在定义作用域内被调用，依然产生了闭包，只不过这个闭包没有被保存下来，执行完毕后直接被销毁。但这不能推翻描述1中的闭包概念，只能说1中描述的是一个更为严格的闭包概念，需要函数在特定位置被调用才能称之为闭包（狭义闭包），有实用价值。而闭包的产生更为常见，只要函数调用自身作用域以外非全局作用域中的值就可以形成闭包（广义闭包）。
浏览器中真实观察到的闭包如下图。
二 JS代码执行过程：
1、引擎编译JS代码
2、主线程顺序执行编译后的JS代码
图中stack是执行栈，heap是存储基本类型的堆，图中少了一个存储引用类型的栈。
3、栈内执行上下文遵循先进后出规则（FILO）。全局执行上下文进栈后，直到程序关闭才会销毁。
JS主线程在执行栈中从上到下执行栈内代码，遇到存在作用域的代码块，会向执行栈中添加对应的执行上下文，进入这个执行上下文继续执行代码，执行完毕后会销毁对应的执行上下文，直到同步代码执行完毕。（执行上下文可能存放到了存储引用类型的栈内）
4、当遇到异步任务时，将异步任务的回调函数放入到事件队列中，继续执行代码；在此过程中回调函数如果引用了函数外作用域内的变量，会将此函数，会形成闭包。
5、当执行栈中的代码执行完毕后，去事件队列中检查是否有可执行的回调函数，存在，将回调函数放入执行栈。这个检查会循环执行，而这个循环检查就是事件循环。
tips：异步任务，例如：定时器、ajax、promise、DOM事件。
三 异步任务的细节：
以上的事件循环过程是一个宏观的表述，不同异步任务的执行优先级有区别。异步任务被分为两类：微任务（micro task）和宏任务（macro task）。
以下事件属于微任务：new Promise()、Object.observe、MurtationObserver
以下事件属于宏任务：setInterval()、setTimeout()、dom事件、I/O、UI rendering、requestAnimationFrame
单次事件循环处理过程中，先处理微任务，所有的微任务都会被处理，然后处理宏任务，只处理一个宏任务。当微任务队列清空后，事件循环会检查是否需要更新UI视图。
参考：
这篇参考文章有有些逻辑无法理解
详解JavaScript中的Event Loop（事件循环）机制
需要参考这篇核对上篇文章
深入理解javascript原型和闭包系列
https://es6.ruanyifeng.com/#docs/let
前端进阶系列
形象化解读js事件循环以及node事件循环和浏览器事件循环的区别
JavaScript事件循环机制及微任务与宏任务
