图文看懂JavaScritpt引擎V8与JS执行过程

本篇文章通过图文为你介绍了V8引擎大概的执行过程，你可以了解到代码是从扫描器Scaner变成tokens，从解析器Parser变成AST，从解释器变成字节码等等。以及JavaScript代码在执行的过程中，它在内存的情况是如何变化的，让你从更加底层的角度去理解你的js代码是如何运行的。了解这些后你就能从更加底层的角度去理解var的变量提升，闭包的形成等了。

浏览器原理

浏览器内核与js引擎

浏览器内核又称“排版引擎”，“渲染引擎”，“浏览器引擎”，叫法很多，简单来说干的活就是将代码（HTML,XML,CSS,图片等）解析排版布局后输出到显示器让你看到。

JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。

主流浏览器内核与js引擎：

浏览器 内核 js引擎
Safari WebKit javaScriptCore
Chrome Blink V8
firefox Gecko SpiderMonkey...

浏览器渲染过程概述

输入网址，服务器返回html，浏览器内核开始解析html，遇到link 等之类则会暂停，去下载对应的css或者js。

  1. 首先hmtl会被解析为dom树；
  2. 然后css会被解析为cssom规则树；
  3. 根据dom树和cssom规则树构建渲染树。
  4. 浏览器根据渲染数据进行布局（回流），此阶段浏览器计算各节点在页面中确切位置和大小，也称自动重排。
  5. 布局后进行绘制，将内容显示在屏幕上。

渲染引擎不会等所有html解析完成后再去，构建render tree，而是解析完一部分就显示一部分。以提高用户体验。

V8引擎的执行

V8引擎解析过程概述

图文看懂JavaScritpt引擎V8与JS执行过程
BLinK内核遇到js代码后，会以流的形式传递给v8，然其开始工作：

Parser再探：

Parser解析的时并不会进行全量解析（全部解析1.耗时间；2.解析后的字节码需放入内存耗内存），而是有延迟解析的策略，也就是一种按需解析给方案，( 理解：首先会Perpaser会解析出所需的最少限度的内容，比如内部有未调用的函数，则解析出函数声明，当调用时则paser对该函数进行完整的解析 )。

Ignition再探：

Ignition关注的是减少 V8 的内存开销，会进行执行前的优化工作。它会将AST进行分析将多次调用的函数标记为热点函数 交由TurboFan进行编译生成优化后的机器码（优化，方便快速调用）执行。而单次调用的函数则会被生成字节码再做执行。所以它也会有编译过程的，所以也有人对JS是否是解释型语言有争议。而正如最新的MDN上的文档说的JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，应该是最准确的吧。

V8内存模型

V8的内存主要分为堆和栈两部分，用以执行代码，和JVM有点类似?。
堆： 这是最大的内存块，也是垃圾回收（GC）发生的地方。
栈： 每个V8进程有一个堆内存。这是存储静态数据的地方，包括方法/函数框架、原始值和指向对象的指针。
图文看懂JavaScritpt引擎V8与JS执行过程

当然这只是简化版，实际的情况也会比这复杂得多（如下）：
图文看懂JavaScritpt引擎V8与JS执行过程

GC垃圾回收

JavaScript在内存中的执行过程

执行前准备：

-> 首先，js引擎在执行代码之前会在在堆内存中创建一个全局对象GO（Global Object）：

  1. 该对象在所有作用域可访问
  2. 会有 Date,Math,SetTimeOut,SetInterval,String,Array,Number等
  3. 内置window属性指向它本身

-> 然后，JavaScript引擎会在内部创建执行上下文栈ECS（Execution Context Stack），用于执行代码调用。

开始执行：

-> 首先会创建一个全局执行环境GEC（Global Execution Context），它包含：在paser转成AST的过程中，将全局定义的变量，函数加入到GO中，初始为undefined。（变量作用域提升：全局定义的变量，函数会先入GO再执行）。

并将其入栈到ECS中。然后逐行执行，进行变量赋值，函数执行操作。

-> 在执行到一个函数时会创建函数执行上下文FEC（Fuction Execution Context），并压入执行上下文栈ECS，它包含三部分：

  1. 在解析函数成为AST树结构时，会创建AO（Activation Object）包含：形参，arguments，函数定义(函数代码)，函数指向对象，定义边量；
  2. 作用域链：VO(在函数中就是AO对象) + 父级作用域
  3. this绑定的值。

准备执行【创建GO 创建ECS 解析全局变量，函数（若变量初始为undefined，若函数则创建函数对象进行存储）】-> 执行代码【遇到函数调用 -> 创建其函数的AO对象 -> 创建其函数执行上下文 -> 执行函数内部代码】

注：在最新的ECMA标准中，变量对象VO，该为了变量环境VE，其可以不为对象，只要其能存储环境记录，其包含的内容也有些差异。

结合代码示例进行分析

案例一

var name = "shinna_mashiro";
foo(666);
function foo(num){
    console.log(m);
    var m = 10;
    var n = 20;
    function bar(){
        console.log(name)
    }
    bar()
}

这是通过var声明的变量，而通过let，const声明的变量ECMA262对它们是这么描述的：The variables（let 或 const）are created when their containing Lexical Environment is instantiate but may not be accessed in any way until the variable's LexicalBinding is evaluated. 这些变量会被创建在包含他们的词法环境（VE -> VO）被实例化时，但是是不可以访问的，直到词法绑定被执行。也就是在FEC创建的时候，VE被实例化时就会创建它，但是不能被访问，所以提升不了。（暂时性死区）

图文看懂JavaScritpt引擎V8与JS执行过程
图文看懂JavaScritpt引擎V8与JS执行过程
图文看懂JavaScritpt引擎V8与JS执行过程

案例二闭包

function makeAdder(count){
    return function(num){
        retrun count + num;
    }
}
var add10 = makeAdder(10);
console.log(add10(5));

可以看到在代码执行完后，闭包结构中，会一直还有引用在GO中，所以此时不会对其内存进行回收。
图文看懂JavaScritpt引擎V8与JS执行过程

部分参考及补充：
1.Visualizing memory management in V8 Engine (JavaScript, NodeJS, Deno, WebAssembly)：https://deepu.tech/memory-management-in-v8/
2.全面分析总结JS内存模型：https://segmentfault.com/a/1190000021996331
3.V8引擎详解：https://juejin.cn/post/6844904146798116871
4.JavaScript到底是解释型语言还是编译型语言?：https://segmentfault.com/a/1190000013126460
5.Blazingly fast parsing, part 2: lazy parsing: https://v8.dev/blog/preparser

标签 , ,

发表回复