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

admin

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

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

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

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

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

首先hmtl会被解析为dom树；
然后css会被解析为cssom规则树；
根据dom树和cssom规则树构建渲染树。
浏览器根据渲染数据进行布局（回流），此阶段浏览器计算各节点在页面中确切位置和大小，也称自动重排。
布局后进行绘制，将内容显示在屏幕上。
渲染引擎不会等所有html解析完成后再去，构建render tree，而是解析完一部分就显示一部分。以提高用户体验。

V8引擎的执行
V8引擎解析过程概述

BLinK内核遇到js代码后，会以流的形式传递给v8，然其开始工作：

首先接收到流后，会有扫描器Scanner对其进行词法分析将代码转化为tokens；
然后解析器parser将其转换为AST抽象语法树。
再由解释器ignition（图中闪电部分）生成字节码再进行执行。
Parser再探：
Parser解析的时并不会进行全量解析（全部解析1.耗时间；2.解析后的字节码需放入内存耗内存），而是有延迟解析的策略，也就是一种按需解析给方案，( 理解：首先会Perpaser会解析出所需的最少限度的内容，比如内部有未调用的函数，则解析出函数声明，当调用时则paser对该函数进行完整的解析 )。

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

V8内存模型
V8的内存主要分为堆和栈两部分，用以执行代码，和JVM有点类似