前言

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

心愿大家在认真浏览的过程中可能纠正我的问题。快来打我脸!

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

1. JavaScript 运行机制
2. 简略理解一下引擎外部

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

1. 过程 cpu 资源分配的最小单位 (过程可蕴含多个过程 这个能够临时不须要了解)
2. 线程 线程是 cpu 调度的最小单位
3. ECS：执行环境栈，Execution Context Stack

JavaScript 运行机制

概述

• JS 是单线程的脚本语言
• JS 为什么设计为单线程语言 次要的起因是因为与它的用处有关系，作为浏览器脚本语言，JS 的主要用途是操作 DOM。如果设计多线程，势必会带来操作抵触引发简单的同步问题；
• 为了解决单线程排队问题; 呈现了让你头疼的运行机制 蕴含主线程, 工作队列,event-loop。

为了更好地了解 Event Loop，请看下图

上图中，主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种内部 API，它们在 ” 工作队列 ” 中退出各种事件（onClick，onLoad）。只有栈中的代码执行结束，主线程就会去读取 ” 工作队列 ”，顺次执行那些事件所对应的回调函数。
执行栈中的代码，总是在读取 ” 工作队列 ” 之前执行。

主线程 (执行栈)

执行栈 (execution context stack) 是 JavaScript 执行事件工作的线程。

请看上面这个 gif 图:

1. 当在全局代码中调用一个函数，程序将进入被调用的函数外部，并创立一个新的执行上下文，并将新创建的上下文压入执行栈的顶部。
2. 调用函数外部调用了其余函数 会反复第一个步骤(程序进入调用函数外部，创立一个新的执行上下文并把它压入执行栈的顶部)
3. 顺次执行从栈顶开始: 执行位于栈顶的执行上下文，一旦以后上下文函数执行完结，它将被从栈顶弹出，并将上下文控制权交给以后的栈; 继续执行直到栈空。

工作队列

工作队列 (task queue) 是进行寄存异步工作运行后果事件 一种是同步工作（synchronous），另一种是异步工作（asynchronous）:

1. 同步工作指的是在主线程上排队执行的工作，只有前一个工作执行结束，能力执行后一个工作。
2. 异步工作指的是间接进入工作队列, 而后期待满足条件 (发出通知) 而后最终进入主线程执行的工作。

请看上面这个 gif 图:

(学过 C ++ 语言都晓得 main 作为主入口。不理解的没关系此处 main 函数可做疏忽)~~

1. 进入全局执行上下文
2. console.log(“start”); 进入主线程 (压入栈的顶部)
3. Timer1 执行中进入主线程发现是 WEBapi 待 timeout 工夫实现进入队列
4. Timer2 执行中进入主线程发现是 WEBapi 待 timeout 工夫实现进入队列

5. console.log(“end); 进入主线程执行

   执行程序为 2-5-4-3

Event Loop

event-loop能够了解为一个解决机制。
主线程工作执行 == 主线程从 ” 工作队列 ” 中读取事件 == 执行 …，这是个循环的过程。这种运行机制称为 Event Loop（事件循环）

对照下面的动画 简略了解为主线程为空时就从工作队列读取待执行的事件 (timer1,timer2) 进入主线程进行执行。

JS 引擎 (V8) 概述

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

常说的 JavaScript 引擎：

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

上面介绍一下 V8 的一些外部实现, 劣势。

JS 执行外部过程

1. 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"}

2. AST 转换为字节码
   有理解的同学应该晓得之前的 V8 间接是转换机器码。然而机器码占空间很大，如果 v8 缓存机制将 所有 js 代码编译成机器码缓存下来，这样会导致缓存占用的内存、磁盘空间很大。而且退出 Chrome 再关上时序列化、反序列化缓存工夫老本也很高。
   在工夫, 空间老本都很高的状况下 引入了字节码。

3. 字节码解释器TurboFan 外部也存在很多工作内容简略列取几点:

   1. 字节码处理程序生成
   2. 字节码生成
   3. 解释器寄存器调配
   4. Context 链
   5. 异样解决
   6. JS 代码解释执行
   7. ….
4. JIT (Just In Time) 混合应用编译器和解释器的技术。编译器启动速度慢，执行速度快。解释器的启动速度快，执行速度慢。而 JIT 技术就是取俩者之长 (Ignition(字节码解释器) + TurboFan (JIT 编译器) 的组合; 前面的利用也是越来越广 )

5. 虚拟机 (垃圾回收, 内存治理等)
   
   V8 应用了分代和大数据的内存调配，在回收内存时应用精简整顿的算法标记未援用的对象，而后打消没有标记的对象，最初整顿和压缩那些还未保留的对象，即可实现垃圾回收。
   内存调配:

   • 年老分代：为新创建的对象分配内存空间，常常须要进行垃圾回收。为不便年老分代中的内容回收，可再将年老分代分为两半，一半用来调配，另一半在回收时负责将之前还须要保留的对象复制过去。

• 年轻分代：依据须要将年轻的对象、指针、代码等数据保存起来，较少地进行垃圾回收。

• 大对象：为那些须要应用较多内存对象分配内存，当然同样可能蕴含数据和代码等调配的内存，一个页面只调配一个对象。

  内存 (垃圾) 回收:

  1. 年老分代中的对象垃圾回收次要通过 Scavenge 算法进行垃圾回收。
  2. 因思考在年轻分代中存活对象居多, 所以次要采纳了 Mark-Sweep（标记革除）标记革除和 Mark-Compact（标记整顿）相结合的形式进行垃圾回收。

6. 代码执行

工作过程编译和运行

V8 引擎编译阶段：

次要类如下所示:

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

编译过程大略为:

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

V8 引擎运行阶段：

次要类如下所示:

1. Script此处为运行入口 编译之后生成的本地代码；
2. Execution：JS 运行过程中的辅组类；蕴含一些函数 如 call 函数;
3. JSFunction：须要执行的 JavaScript 函数示意类；
4. Runtime：运行这些本地代码的辅组类，次要提供运行时所需的辅组函数，如：属性拜访、类型转换、编译、算术、位操作、比拟、正则表达式等；
5. Heap：运行本地代码须要应用的内存堆类；
6. MarkCompactCollector：垃圾回收机制的次要实现类，用来标记、革除和整顿等根本的垃圾回收过程；
7. SweeperThread：负责垃圾回收的线程。

执行过程大略为：

1. V8 当函数被调用会检测是否有本地代码如果有进行调用。
2. V8 当函数被调用会检测是否又本地代码如果没有将会生成本地代码。
3. 执行编译后代码构建 JS 对象须要 Runtime 类来辅组创建对象，并须要从 Heap 类分配内存。
4. 最初将不必的空间进行标记革除和垃圾回收。

当然 V8 外部还有很多例如暗藏类, 扩大机制等等。有趣味能够看一下《WebKit 技术底细》 如果想要读源码举荐从代码量还少的 V8 开始浏览。加油少年。

最初

分享一下最近: 工作很忙很忙(对接内部资源, 整合外部, 做技术摸索研发 …); 生存很忙很忙(有一点就是静止肯定要保持下来..) 而后呢写作也会保持下来(每周 1 - 3 篇)。大家有任何想理解的内容随时留言 只有我晓得的就会立即分享进去帮忙大家。如果不晓得我能够去学。嘿嘿

下一篇待定吧 加油 前程似锦 靓仔靓女！！！

上文图片局部起源网络 侵权请分割删除 谢谢。