admin 发表于 2022-7-3 10:49:23

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

本篇文章通过图文为你介绍了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有点类似
页: [1]
查看完整版本: 图文看懂JavaScritpt引擎V8与JS执行过程