前端进阶JS运行原理

news2024/9/21 0:34:17

JS运行原理

深入了解V8引擎原理

浏览器内核是由两部分组成的,以webkit为例:

  • WebCore:负责HTML解析、布局、渲染等等相关的工作;
  • JavaScriptCore:解析、执行JavaScript代码;

image-20230224183949294

官方对V8引擎的定义:

  • V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎,它用于Chrome和Node.js等
  • 它实现ECMAScript和WebAssembly,并在Windows 7或更高版本,macOS 10.12+和使用x64,IA-32,ARM或MIPS处理
    器的Linux系统上运行。
  • V8可以独立运行,也可以嵌入到任何C ++应用程序中。

image-20230224184029597

V8引擎的架构很复杂 ,我们可以先了解它庞大引擎的一些模块

  • Parse模块会将JavaScript代码转换成AST(抽象语法树),这是因为解释器并不直接认识JavaScript代码
    • 如果函数没有被调用,那么是不会被转换成AST
    • Parse的V8官方文档:https://v8.dev/blog/scanner
  • Ignition是一个解释器,会将AST转换成ByteCode(字节码)
    • 同时会收集TurboFan优化所需要的信息(比如函数参数的类型信息,有了类型才能进行真实的运算)
    • 如果函数只调用一次,Ignition会解释执行ByteCode
    • Ignition的V8官方文档:https://v8.dev/blog/ignition-interpreter
  • TurboFan是一个编译器,可以将字节码编译为CPU可以直接执行的机器码
    • 如果一个函数被多次调用,那么就会被标记为热点函数,它会被TurboFan转换成优化的机器码,提高代码的执行性能
    • 机器码实际上也会被还原为ByteCode,这是因为如果后续执行函数的过程中,类型发生了变化(比如sum函数原来执
      行的是number类型,后来执行变成了string类型),之前优化的机器码并不能正确的处理运算,就会逆向的转换成字节码
    • TurboFan的V8官方文档:https://v8.dev/blog/turbofan-jit

V8架构解析图 来自官方

image-20230224184421893

image-20230224184508091

解析代码的步骤:

  1. 获得到代码之后 V8用流输入通过词法分析,分析成token
  2. 解析/预解析 来生成一个一个执行节点
  3. 生成 AST 树
  4. 转成字节码 如果有热点方法就会走turbofan编译器优化成机械码提升性能

全局代码执行过程

js引擎会在执行代码之前,会在堆内存中创建一个全局对象:Global Object(GO)

  • 该对象 所有的作用域(scope)都可以访问
  • 里面会包含Date、Array、String、Number、setTimeout、setInterval等等
  • 其中还有一个window属性指向自己

js引擎内部有一个执行上下文栈(Execution Context Stack,简称ECS),它是用于执行代码的调用栈,

他执行的式全局代码块,它的作用就是:

  • 为了执行代码构建一个 Global Execution Context GEC 全局上下文
  • 将这个构建的上下文加入到执行栈中 也就是将 GEC 放入 ECS中

GEC被放入到ECS中里面包含两部分内容:

  • 在代码执行前,在parser转成AST的过程中,会将全局定义的变量、函数等加入到GlobalObject中,但是并不会赋值
  • 在代码执行中,对变量赋值,或者执行其他的函数;

每一个执行上下文会关联一个VO(Variable Object,变量对象),变量和函数声明会被添加到这个VO对象中,当全局代码被执行的时候,VO就是GO对象了

全局上下文三个关键:

  • VO(go)
  • 作用域链
  • This

执行以下代码过程

    var message = "Global Message"
    function foo() {
        var message = "Foo Message"
    }
    var num1 = 10
    var num2 = 20
    var res = num1 + num2
    console.log(res);

全局代码执行前

image-20230225230158035

执行代码后

image-20230225231518618

函数代码执行过程

在执行的过程中执行到一个函数时,就会根据函数体创建一个函数执行上下文(Functional Execution Context,简称FEC),并且压入到EC Stack中

  • 当进入一个函数执行上下文时,会创建一个AO对象(Activation Object)
  • 这个AO对象会使用arguments作为初始化,并且初始值是传入的参数
  • 这个AO对象会作为执行上下文的VO来存放变量的初始化

如下函数执行过程

执行前

image-20230225231940365

执行后

image-20230225232044143

流程为:

  • 执行前创建FEC 也就是函数执行上下文
  • 创建 AO 对象 name为函数名
  • 创建作用域链
  • 生成函数对象存放代码
  • thisbing(暂无)
  • 之后从上到下执行代码
  • 执行完成后将name 变为 undefined

作用域和作用域链

当进入到一个执行上下文时,执行上下文也会关联一个作用域链(Scope Chain)

  • 作用域链是一个对象列表,用于变量标识符的求值
  • 当进入一个执行上下文时,这个作用域链被创建,并且根据代码类型,添加一系列的对象

PS : 作用域会提升 在本身vo没有情况下 会去上层寻找,我们先输出后声明会输出undefined, 这里也印证了

作用域提升小练习

var n = 100
function foo(){
    n=200
}
foo()
console.log(n)

N =200

顺序内存查找图如下 :

  • 全局代码创建函数 找到 n放入到函数vo中 之后调用foo()
  • 在函数调用后找到GO中的n复制
  • 函数结束,之后输出n

image-20230226165920435

作用域链也是我们JS闭包的一个重点, js中闭包就是通过作用域链的方式来完成变量可以跨作用域访问的,为我们加快提升了开发的效率 也省去很多麻烦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/377977.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

docker部署zabbix6.2.7+grafana

目录 1、下载docker 2、下载相关镜像文件 3、创建一个供zabbix系统使用的网络环境 4、创建一个供mysql数据库存放文件的目录 5、启动mysql容器 6、为zabbix-server创建一个持久卷 7、启动zabbix-server容器 8、创建语言存放目录 9、启动zabbix-web容器 10、启动zabbix…

探析集团企业 1+N 模式,重新定义集团型CRM

目录 一、客户经营、运营监控 二、流程驱动、业务成长 三、规则规范 业务治理 什么是集团型CRM【1N】?本文中我们可以把集团看作为“1”,其他分公司或组织看作为“N”。本篇我们主要分析集团CRM业务定位。 我们从企业集团总部的职能定位确定集团CRM…

攻不下dfs不参加比赛(七)

标题 为什么练dfs题目总结重点为什么练dfs 相信学过数据结构的朋友都知道dfs(深度优先搜索)是里面相当重要的一种搜索算法,可能直接说大家感受不到有条件的大家可以去看看一些算法比赛。这些比赛中每一届或多或少都会牵扯到dfs,可能提到dfs大家都知道但是我们为了避免眼高手…

数据结构(Java)---队列

1.简介 队列是一种操作受限的线性表,和栈类似,队列的限制主要是运行在表的一端进行插入操作,而在表的另一端进行删除的操作(栈的操作受限是只能在一端进行插入和删除)。队列中进行插入的一端称为队尾 ,删除…

【JavaWeb】Servlet基础

文章目录1.Tomcat服务器安装注意事项2.编写WebApp3.BS系统角色和协议4.模拟Servlet4.1模拟sun公司4.2模拟Tomcat服务器4.3模拟WebApp开发者5.开发一个带有Servlet的WebApp5.1创建一个名为crm的项目5.2 在项目中创建一个名为WEB-INF的文件(必须)5.3在WEB-…

JAVA开发(java类加载过程)

1、java语言的平台无关性。 因为java语言可以跑在java虚拟机上,所以只要能装java虚拟机的地方就能跑java程序。java语言以后缀名 .java为文件扩展名。通过java编译器javac编译成字节码文件.class 。java字节码文件通过java虚拟机解析运行。所以java语言可以说是编译…

解决windows安装wxPython安装失败、速度过慢及PyCharm上wx包爆红问题

网上关于wxPython安装失败,安装速度过慢,以及安装成功后PyCharm中import wx仍然爆红的文章有很多,也特别杂,解决起来特别困难,今天在这里对问题的处理进行一个整合,希望能帮助到大家。 安装wxPython这里运用…

模拟微信聊天-课后程序(JAVA基础案例教程-黑马程序员编著-第八章-课后作业)

【案例9-1】 模拟微信聊天 【案例介绍】 1.案例描述 在如今,微信聊天已经人们生活中必不可少的重要组成部分,人们的交流很多都是通过微信来进行的。本案例要求:将多线程与UDP通信相关知识结合,模拟实现微信聊天小程序。通过监…

华为OD机试题【翻转单词顺序】用 C++ 进行编码 (2023.Q1)

最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单) 文章目录 最近更新的博客使用说明翻转单词顺序题目输入输出示例一输入输出示例二输入输出说明示例三输入输出说明示例四

解决跑pytorch代码报错AttributeError: module ‘distutils‘ has no attribute ‘version‘

跑pytorch代码报错AttributeError: module ‘distutils’ has no attribute ‘version’ Traceback (most recent call last): File “D:/pycharm_envir/gaozhiyuan/Segmentation/pytorch_segmentation/deeplabv3-plus-pytorch-main/train.py”, line 16, in from utils.callb…

【C++修炼之路】22.哈希

每一个不曾起舞的日子都是对生命的辜负 哈希一.哈希概念及性质1.1 哈希概念1.2 哈希冲突1.3 哈希函数二.哈希冲突解决2.1 闭散列/开放定址法2.2 开散列/哈希桶三.开放定址法代码3.1 插入Insert3.2 查找Find3.3 删除Erase3.4 映射的改良&完整代码四.开散列代码4.1 插入Inser…

Linux之init.d、rc.d文件夹说明

备注:Ubuntu没有rc.d文件夹,原因看问题四 Linux的几个重要文件 rc.d,init.d文件夹的说明 今天在研究mysql的安装的时候,最后一步要创建一个软连接,使得mysql服务可以自启动,代码如下: ln -s…

扒系统CR8记录

目录 终极改造目标 过程记录 参考 为了将一套在线安装的系统,在不了解其架构、各模块细节的基础上,进行扒弄清楚,作以下记录。 终极改造目标 最终的目标,就是只通过CreMedia8_20230207.tar.gz解压 install 就把业务包安装了&…

CorelDRAW2023新功能有哪些?最新版cdr下载安装教程

使用 CorelDRAW2023,随时随都能进行设计创作。在 Windows或Mac上使用专为此平台设计的直观界面,以自己的风格尽情自由创作。同全球数百万信赖CorelDRAW Graphics Suite 的艺术家、设计者及小型企业主一样,大胆展现真我,创作出众的…

IAP初探

IAP(In-Application Programming)在应用编程,浅显易懂,按照字面意思即是在程序不关闭情况下,对应用进行再次写入程序,对程序的写入需要传输数据,而传输数据的前提是通信, IAP对代码进行更新可以简要分为以…

【ElasticSearch系列-01】初识以及安装elasticSearch

elasticSearch入门和安装一,elasticSearch入门1,什么是elasticSearch2,elasticSearch的底层优点2.1,全文检索2.2,倒排索引2.2.1,正排索引2.2.2,倒排索引2.2.3,倒排索引解决的问题2.2…

Linux | 2. 用户管理

如有错误,恳请指出。 1. 设置文件权限 权限设置如下: root表示文件所有者,stud1表示文件所属组。其他用户无法访问。更改指令是chown。 更改目录文件所属组:chown .lab lossfound/更改目录文件所有者:chown lab loss…

mac安装 Termius

1.下载安装包 链接: https://pan.baidu.com/s/1f5xmvYnVehCkMUD291SbsA?pwdy43k 提取码: y43k 2.打开系统偏好设置 -> 安全性与隐私 -> 通用,勾选“任何来源” 显示文件损坏的情况下执行下面操作 3.打开terminal终端 3.1 输入:sudo spctl --m…

windows10使用wsl2安装docker

配环境很麻烦,想利用docker的镜像环境跑一下代码整个安装过程的原理是:windows使用docker,必须先安装一个linux虚拟机,才可运行docker,而采用wsl2安装虚拟机是目前最好的方法第一步 windows安装wsl2控制面板->程序-…

数据结构-考研难点代码突破(C++实现树型查找 - B树插入与遍历,B+树基本概念)

数据结构(C)[B树(B-树)插入与中序遍历,效率分析]、B树、B*树、B树系列应用 文章目录1. B树B树的插入与删除流程2. B树(MySQL)3. B树与B树对比4. C实现B树插入,中序遍历1. B树 B树类…