前言

前几天，我开始想写前端生态周边之浏览器幕后的文章。其实也是是对于零碎知识进行整合。希望能给大家带来从0-1，而非模块的认识。另外一个初衷也是作为前端的视角到底应该了解浏览器的什么内容。(很多人想深入要看下WebKit源码,V8源码个人感觉稍微有点离谱并不适合每个前端同学去实践会让你感觉到绝望)

今天来到了大家日常接触最多的模块 JS引擎相关的内容；本篇文章的内容包含：

JavaScript运行机制
简单了解一下引擎内部

术语概念 (熟悉的跳过,眼熟的回忆,不懂的认真看完后续有用到)

进程 cpu资源分配的最小单位 ( )
线程线程是cpu调度的最小单位
ECS：执行环境栈，Execution Context Stack

JavaScript运行机制

概述

JS是单线程的脚本语言
JS为什么设计为单线程语言主要的原因是因为与它的用途有关系，作为浏览器脚本语言，JS的主要用途是操作DOM。如果设计多线程，势必会带来操作冲突引发复杂的同步问题；
为了解决单线程排队问题;出现了让你头疼的运行机制包含主线程,任务队列,event-loop。

上图中，主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（onClick，onLoad）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。
执行栈中的代码，总是在读取"任务队列"之前执行。

主线程 (执行栈)

请看下面这个gif图:

当在全局代码中调用一个函数，程序将进入被调用的函数内部，并创建一个新的执行上下文，并将新创建的上下文压入执行栈的顶部。
调用函数内部调用了其他函数会重复第一个步骤(程序进入调用函数内部，创建一个新的执行上下文并把它压入执行栈的顶部)
依次执行从栈顶开始: 执行位于栈顶的执行上下文，一旦当前上下文函数执行结束，它将被从栈顶弹出，并将上下文控制权交给当前的栈;继续执行直到栈空。

任务队列

同步任务指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
异步任务指的是直接进入任务队列,然后等待满足条件(发出通知)然后最终进入主线程执行的任务。

进入全局执行上下文
console.log("start");进入主线程 (压入栈的顶部)
Timer1 执行中进入主线程发现是WEBapi 待timeout时间完成进入队列
Timer2 执行中进入主线程发现是WEBapi 待timeout时间完成进入队列
console.log("end);进入主线程执行

Event Loop

对照上面的动画简单理解为主线程为空时就从任务队列读取待执行的事件(timer1,timer2)进入主线程进行执行。

JS引擎(V8)概述

JavaScript 引擎是一个程序或者执行 JavaScript 代码的解释器。一个JavaScript 引擎可以作为一个单独的解释器实现或者通过某种方式将 JavaScript 编译为字节码的即时编译器。

常说的JavaScript 引擎：

JavaScriptCore 代表浏览器Safari
Rhino 代表浏览器Mozilla Firefox
Chakra 代表浏览器Internet Explorer(IE)
V8 代表浏览器 Chrome 开源，用 C++ 实现的

JS执行内部过程

JS代码转换为AST语法树表示。

// 函数
 function greet() {
   console.log("wlove");
 }
 // AST树 json
 {"type":"Program","start":0,"end":47,"body":[{"type":"FunctionDeclaration","start":0,"end":46,"id":{"type":"Identifier","start":9,"end":14,"name":"greet"},"expression":false,"generator":false,"async":false,"params":[],"body":{"type":"BlockStatement","start":17,"end":46,"body":[{"type":"ExpressionStatement","start":23,"end":44,"expression":{"type":"CallExpression","start":23,"end":43,"callee":{"type":"MemberExpression","start":23,"end":34,"object":{"type":"Identifier","start":23,"end":30,"name":"console"},"property":{"type":"Identifier","start":31,"end":34,"name":"log"},"computed":false,"optional":false},"arguments":[{"type":"Literal","start":35,"end":42,"value":"wlove","raw":"\"wlove\""}],"optional":false}}]}}],"sourceType":"module"}

AST转换为字节码
有了解的同学应该知道之前的V8直接是转换机器码。但是机器码占空间很大，如果v8 缓存机制将所有 js 代码编译成机器码缓存下来，这样会导致缓存占用的内存、磁盘空间很大。而且退出 Chrome 再打开时序列化、反序列化缓存时间成本也很高。
在时间,空间成本都很高的情况下引入了字节码。
字节码解释器TurboFan 内部也存在很多工作内容简单列取几点:
1. 字节码处理程序生成
2. 字节码生成
3. 解释器寄存器分配
4. Context链
5. 异常处理
6. JS代码解释执行
7. ....
JIT (Just In Time) 混合使用编译器和解释器的技术。编译器启动速度慢，执行速度快。解释器的启动速度快，执行速度慢。而JIT技术就是取俩者之长 (Ignition(字节码解释器) + TurboFan (JIT编译器) 的组合;后面的应用也是越来越广 )
虚拟机(垃圾回收,内存管理等)

V8 使用了分代和大数据的内存分配，在回收内存时使用精简整理的算法标记未引用的对象，然后消除没有标记的对象，最后整理和压缩那些还未保存的对象，即可完成垃圾回收。
内存分配:
- 年轻分代：为新创建的对象分配内存空间，经常需要进行垃圾回收。为方便年轻分代中的内容回收，可再将年轻分代分为两半，一半用来分配，另一半在回收时负责将之前还需要保留的对象复制过来。

年老分代：根据需要将年老的对象、指针、代码等数据保存起来，较少地进行垃圾回收。
大对象：为那些需要使用较多内存对象分配内存，当然同样可能包含数据和代码等分配的内存，一个页面只分配一个对象。
内存(垃圾)回收:
1. 年轻分代中的对象垃圾回收主要通过Scavenge算法进行垃圾回收。
2. 因考虑在年老分代中存活对象居多,所以主要采用了Mark-Sweep（标记清除）标记清除和Mark-Compact（标记整理）相结合的方式进行垃圾回收。

代码执行

工作过程编译和运行

V8引擎编译阶段：

主要类如下所示:

Script：Script类包含JS代码,和编译后的本地代码。(此处为编译入口)
Compiler：编译器类:Script类调用编译生成代码包括生成AST,本地代码等。
AstNode：抽象语法树node类(作为节点基类,包含很多子类为后续生成代码做辅助)
AstVisitor：抽象语法树访问类，主要用来遍历异构的抽象语法树；
FullCodeGenerator：访问类可调用来遍历AST来为JS生成本地可执行代码。

编译过程大概为:

Script类调用Compiler类为其生成AST和本地代码。
Compile函数先使用Parser类生成AST，再使用FullCodeGenerator类来生成本地代码。
FullCodeGenerator使用多个后端来生成与平台相匹配的本地汇编代码。

V8引擎运行阶段：