JavaScript高级(一)----v8引擎

 我们常说的浏览器内核指的就是浏览器的排版引擎，排版引擎(layout engine)也称为浏览器引擎（browser engine)、页面渲染引擎（rendering engine）或样板引擎。

浏览器的渲染过程

浏览器会先下载HTML形成DOM树，在中途如果遇见CSS标签就开始下载CSS并解析，结合DOM树和CSS文件生成渲染树，浏览器根据渲染树，将页面绘制在屏幕上。如果在中途碰到JavaScript代码，会停止解析HTML和CSS，去执行JavaScript代码。

webkit内核和JS引擎的关系

WebCore:负责HTML解析、布局、渲染等等相关的工作

JavaScriptCore:解析、执行JavaScript代码

V8引擎如何解析和执行

Parse模块会将JavaScript代码转换成AST(抽象语法树abstract syntax tree)，这是因为解释器不认识JavaScript代码

Ignition是一个解释器，会将AST转换成ByteCode(字节码)

• 同时会收集TurboFan优化所需要的信息(比如函数参数的类型信息，有了类型才能进行真实的运算);
• 如果函数只调用一次，Ignition会执行解释执行ByteCode

TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码

• 如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能
• 机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化(比如sum函数原来执行的是 number类型，后来执行变成了string类型)，之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码（如果有一天JavaScript加入了类型检测，那么TypeScript可能会退出历史的舞台）

V8引擎执行细节:

JavaScript源码是如何被解析(Parse过程)

• Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换
• Scanner会进行词法分析(lexical analysis)，词法分析会将代码转换成tokens;
• 接下来tokens会被转换成AST树，经过Parser和PreParser:
  • Parser就是直接将tokens转成AST树架构
  • PreParser称之为预解析，为什么需要预解析（变量提升）呢?
    • 不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会影响网页的运行效率
    • 所以V8引擎就实现了Lazy Parsing(延迟解析)的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行
• 生成AST树后，会被Ignition转成字节码(bytecode)，之后的过程就是代码的执行过程

JavaScript代码执行过程

• JS在执行代码之前会在堆内存中创建一个全局对象Global Object（初始化全局对象GO）
  • 该对象的Scope所有作用域都可以访问
  • 里面会包含Date、String、Array、setTimeout等等。。。
  • 其中还包含一个window属性指向自己

• js引擎内部有一个执行上下文栈(Execution Context Stack，简称ECS)，它是用于执行代码的调用栈。
  • 那么现在它要执行谁呢?执行的是全局的代码块:
    • 全局的代码块为了执行会构建一个 Global Execution Context(GEC)
    • 全局执行上下文(GEC)会被放入到执行上下文栈(ESC)中执行
• GEC被放入到ECS中里面包含两部分内容
  • 第一部分:在代码执行前，在parser转成AST的过程中，会将全局定义的变量、函数等加入到GlobalObject中但是并不会赋值(变量提升)
  • 第二部分:在代码执行中，对变量赋值，或者执行其他的函数

• GEC被放入到ECS中

  

• GEC开始执行代码

• 执行过程中遇到函数如何执行？

  • 在执行的过程中执行到一个函数时，就会根据函数体创建一个函数执行上下文(Functional Execution Context，简称FEC)，并且压入到EC Stack中。
  • FEC中包含三部分内容:
    • 在解析函数成为AST树结构时，会创建一个Activation Object(AO)
    • 作用域链:由VO(在函数中就是AO对象)和父级VO组成，查找时会一层层查找;
    • this绑定的值

• FEC被放入到ECS中

• FEC开始执行代码：
•