返回顶部
首页 > 资讯 > 前端开发 > VUE >JavaScript引擎的详细介绍
  • 542
分享到

JavaScript引擎的详细介绍

2024-04-02 19:04:59 542人浏览 独家记忆
摘要

这篇文章主要介绍“javascript引擎的详细介绍”,在日常操作中,相信很多人在JavaScript引擎的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaSc

这篇文章主要介绍“javascript引擎的详细介绍”,在日常操作中,相信很多人在JavaScript引擎的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript引擎的详细介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

JavaScript 引擎

这是本文将要探索的主要内容,它负责使计算机理解我们编写的 js 代码。JavaScript 引擎是一种用于将我们的代码转换为机器可读语言的引擎。如果没有 JavaScript 引擎,您编写的代码对计算机来说简直是一堆“胡言乱语”。不仅仅是 JavaScript ,其他所有编程语言都需要一个类似的引擎,来将这些“胡言乱语”转换成对计算机有意义的语言。

目前有多种 JavaScript 引擎在可供使用。您可以在 Wikipedia 上查阅所有可用的 JavaScript 引擎。它们也被称为 ECMAScript 引擎,这样叫的具体原因会在下文中提及。 下面是一些我们日常可能会用到的 JavaScript 引擎:

  1. Chakra, Microsoft IE/Edge


  2. SpiderMonkey, FireFox


  3. V8, Chrome

除此之外的其它引擎,可以自行搜索了解。接下来,我们将深入研究这些引擎,以了解它们是如何翻译 JavaScript 文件的。

JavaScript 引擎的内里

我们已经知道了引擎是必须的,由此可能不禁会想:

是谁发明了 JavaScript 引擎?

答案是,任何人都可以。它只是分析我们的代码并将其翻译的另一种语言的工具。V8 是最受欢迎的 JavaScript 引擎之一,也是 Chrome 和 nodejs 使用的引擎。它是用 c++(一种底层语言)编写的。但是如果每个人都创造一个引擎,那场面就不是可控范围内的了。

因此,为了给这些引擎确立一个规范,ECMA 的标准诞生了,该标准主要提供如何编写引擎和 JavaScript 所有功能的规范。这就是新功能能在 ECMAScript 6、7、8 上实现的原因。同时,引擎也进行了更新以支持这些新功能。 于是,我们便可以在开发过程中检查了浏览器中 JS 高级功能的可用性。

下面我们对 V8 引擎进行进一步的探索,因为基本概念在所有引擎中是一致的。

JavaScript引擎的详细介绍

上图就是 JS Engine 内部的工作流程。我们输入的代码将通过以下阶段:

  1. Parser


  2. AST


  3. Interpreter 生成 ByteCode


  4. Profiler


  5. Compiler 生成优化后的代码

别被上面的流程给唬住了,在几分钟后您将了解它们是协同运作的。

在进一步深入这些阶段之前,您需要先了解 Interpreter 和 Compiler 的区别。

Interpreter VS Compiler

通常,将代码转换成机器可读语言的方法有两种。 我们将要讨论的概念不仅适用于 JavaScript ,而且适用于大多数编程语言,例如 python,Java 等。

  1. Interpreter 逐行读取代码并立即执行。


  2. Compiler 读取您的整个代码,进行一些优化,然后生成优化后的代码。

让我们来看下面这个例子。

function add(a, b) {  
 return a+b  
}  
for(let i = 0; i < 1000; i++) {  
 add(1 + 1)  
}

上面的示例循环调用了 add 函数1000次,该函数将两个数字相加并返回总和。

  1. 1、Interpreter 接收上面的代码后,它将逐行读取并立即执行代码,直到循环结束。 它的工作仅仅是实时地将代码转换为我们的计算机可以理解的内容。


  2. 2、如果这段代码接受者是 Compiler,它会先完整地读取整个程序,对我们要执行的代码进行分析,并生成电脑可以读懂的机器语言。过程如同获取 X(我们的JS文件)并生成 Y(机器语言)一样。如果我们使用 Interpreter 执行 Y,则会获得与执行 X 相同的结果。

JavaScript引擎的详细介绍

从上图中可以看出,ByteCode 只是中间码,计算机仍需要对其进行翻译才能执行。 但是 Interpreter 和 Compiler 都将源代码转换为机器语言,它们唯一的区别在于转换的过程不尽相同。

  1. Interpreter 逐行将源代码转换为等效的机器代码。


  2. Compiler 在一开始就将所有源代码转换为机器代码。

当您阅读完上面的推荐文章后,您可能已经了解到 Babel 实际上是一个 JS Compiler ,它可以接收您编写的新版本 JS 代码并向下编译为与浏览器兼容的 JS 代码(旧版本的 JS 代码)。

Interpreter 和 Compiler 的优缺点

  1. 1、Interpreter 的优点是无需等待编译即可立即执行代码。这对在浏览器中运行 JS 提供了极大的便利,因为所有用户都不想浪费时间在等待代码编译这件事上。但是,当有大量的 JS 代码需要执行时会运行地比较慢。还记得上面例子中的那一小段代码吗?代码中执行了1000次函数调用。函数 add 被调用了1000次,但他的输出保持不变。但是 Interpreter 还是逐行执行,会显得比较慢。


  2. 2、在同样的情况下,Compiler 可以通过用2代替循环(因为 add 函数每次都是执行1 + 1)来进行一些优化。Compiler 最终给出的优化代码可以在更短的时间内执行完成。


  3. 综上所述,Interpreter 可以立即开始执行代码,但不会进行优化。 Compiler 虽然需要花费一些时间来编译代码,但是会生成对执行时更优的代码。

好的,Interpreter 和 Compiler 必要知识我们已经了解了。现在让我们回到主题——JS 引擎。

因此,考虑到编译器和解释器的优缺点,如果我们同时利用两者的优点,该怎么办? 这就是 JIT(Just In Time) Compiler 的用武之地。它是 Interpreter 和 Compiler 的结合,现在大多数浏览器都在更快,更高效地实现此功能。同时 V8 引擎也使用此功能。

JavaScript引擎的详细介绍

在这个过程中,

  1. 1、Parser 是一种通过各种 JavaScript 关键字来识别,分析和分类程序各个部分的解析器。它可以区分代码是一个方法还是一个变量。


  2. 2、然后,AST(抽象语法树) 基于 Parser 的分类构造树状结构。您可以使用 AST Explorer 查看该树的结构。


  3. 3、随后将 AST 提供给 Interpreter 生成 ByteCode。如上文所述,ByteCode 不是最底层的代码,但可以被执行。在此阶段,浏览器借助 V8 引擎执行 ByteCode 进行工作,因此用户无需等待。


  4. 4、同时,Profiler 将查找可以被优化的代码,然后将它们传递给 Compiler。Compiler 生成优化代码的同时,浏览器暂时用 ByteCode 执行操作。并且,一旦 Compiler 生成了优化代码,优化代码则将完全替换掉临时的 ByteCode。


  5. 5、 通过这种方式,我们可以充分利用 Interpreter 和 Compiler 的优点。Interpreter 执行代码的同时,Profiler 寻找可以被优化的代码,Compiler 则创建优化的代码。然后,将 ByteCode 码替换为优化后的较为底层的代码,例如机器代码。

这仅意味着性能将在逐渐提高,同时不会有阻塞执行的时间。

关于 ByteCode

作为机器代码,ByteCode 不能被所有计算机理解及执行。它仍然需要像虚拟机或像 Javascript V8 引擎这样的中间件才能将其转换为机器可读的语言。 这就是为什么我们的浏览器可以在上述5个阶段中借助 JavaScript 引擎在 Interpreter 中执行 ByteCode 的原因。

所以您可以会有另一个问题,

JavaScript 是一门解释型语言吗?

JavaScript 是但不完全是一门解释型语言。Brendan Eich 最初是在 JavaScript 的早期阶段创建 JavaScript 引擎 “ SpiderMonkey” 的。该引擎有一个 Interpreter 来告诉浏览器该怎么执行代码。 但是现在我们的引擎不仅包括了 Interpreter,还有 Compiler。 我们的代码不仅可以被转换成 ByteCode,还可以被编译输出优化后的代码。 因此,从技术上讲,这完全取决于引擎是如何实现的。

到此,关于“JavaScript引擎的详细介绍”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: JavaScript引擎的详细介绍

本文链接: https://lsjlt.com/news/80527.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript引擎的详细介绍
    这篇文章主要介绍“JavaScript引擎的详细介绍”,在日常操作中,相信很多人在JavaScript引擎的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaSc...
    99+
    2024-04-02
  • Java规则引擎easy-rules详细介绍
    目录简介开始使用引入依赖定义规则使用注解定义规则使用RuleBuilder定义规则组合规则规则优先级Rules API定义事实定义规则引擎创建规则引擎规则引擎参数定义规则监听器定义规...
    99+
    2024-04-02
  • 【MySQL进阶教程】 存储引擎详细介绍
    前言 本文为 【MySQL进阶教程】 存储引擎 相关知识介绍,下边具体将对MySQL体系结构,存储引擎介绍,存储引擎特点(包含:InnoDB、MyISAM、Memory的特点及对比),存储引擎选择等...
    99+
    2023-08-31
    mysql java 数据库
  • Mysql引擎介绍
    Mysql引擎介绍Innodb存储引擎支持事务,在OLTP方面支持行级锁、外键;通过多版本并发控制MVCC来获得高并发性,并实现SQL的4种隔离级别(默认repeatable);提供insert buffe...
    99+
    2024-04-02
  • javascript this详细介绍
    this的值是在运行时确定的  JS中的this究竟代表什么,这是在程序运行时根据上下文环境确定,可以分为以下几种情况。  1. 全局作用域中的this  在全局作用域中,this指向window对象。    1  2  3  4  5  ...
    99+
    2023-06-03
  • MySQL索引的详细介绍
    这篇文章主要介绍MySQL索引的详细介绍,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、什么是索引?  在关系数据库中,索引是一种单独的、物理的对数据库表中一列或多列的值进行排序的...
    99+
    2024-04-02
  • JavaScript函数的详细介绍
    本篇内容主要讲解“JavaScript函数的详细介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript函数的详细介绍”吧!一、函数语法一个Jav...
    99+
    2024-04-02
  • JavaScript 中的引用类型Date 和RegExp的详细介绍
    目录引用类型 & 引用值的理解Date 引用类型Date.parse()方法Date.UTC()方法继承的方法RegExpRegExp 实例方法exec()test()继承的...
    99+
    2024-04-02
  • JavaScript的function函数详细介绍
    通过函数来封装任意多条语句,而且可以在任何地方、任何时间调用执行。 而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的。返回值return,...
    99+
    2024-04-02
  • JAVA虚拟机(JVM)详细介绍(六)——字节码执行引擎
    JVM中的执行引擎在执行java代码的时候,一般有解释执行(通过解释器执行)和编译执行(通过即时编译器产生本地代码执行)两种选择。栈帧定义:栈帧是用于支持虚拟机进行方法调用和方法执行的数据结构,它位于虚拟机栈里面。作用:每个方法从调用开始到...
    99+
    2014-07-03
    java教程 JVM
  • Javascript继承机制的详细介绍
    这篇文章主要介绍“Javascript继承机制的详细介绍”,在日常操作中,相信很多人在Javascript继承机制的详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ja...
    99+
    2024-04-02
  • JavaScript中DOM节点的详细介绍
    本篇内容主要讲解“JavaScript中DOM节点的详细介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中DOM节点的详细介绍”吧!使用H...
    99+
    2024-04-02
  • MySQL 5.5存储引擎介绍
    存储引擎是MySQL组件,用于处理不同类型的表的SQL操作。 InnoDB存储引擎 默认和应用最广泛的存储引擎。支持事务,具有crash-recovery特性;支持行级锁;支持主键和外键。 Inno...
    99+
    2024-04-02
  • MySQL数据库索引的详细介绍
    这篇文章主要讲解了“MySQL数据库索引的详细介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“MySQL数据库索引的详细介绍”吧!01、前言看了很多关于索...
    99+
    2024-04-02
  • JavaScript执行机制详细介绍
    目录1.进程与线程的概念 2.浏览器原理 3.同步与异步 4.执行栈与任务队列 5.事件循环(Event-Loop) 6.定时器 前言: 不论是工作还是面试,我们可能都经常会碰到需...
    99+
    2024-04-02
  • MySQL Innodb索引机制详细介绍
    1、什么是索引 索引是存储引擎用于快速找到记录的一种数据结构。 2、索引有哪些数据结构 顺序查找结构:这种查找效率很低,复杂度为O(n)。大数据量的时候查询效率很低。 ...
    99+
    2024-04-02
  • MySQL存储引擎的功能介绍
    这篇文章主要介绍“MySQL存储引擎的功能介绍”,在日常操作中,相信很多人在MySQL存储引擎的功能介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”MySQL存储引擎的功能...
    99+
    2024-04-02
  • javascript中全局函数的详细介绍
    本篇内容主要讲解“javascript中全局函数的详细介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中全局函数的详细介绍”吧! ...
    99+
    2024-04-02
  • javascript中排序算法的详细介绍
    这篇文章给大家分享的是有关javascript中排序算法的详细介绍的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。排序算法是面试中的高频考察点,我们需要熟练掌握。本文整理了最经典、最常用的排序算法并且搭配了动图和视...
    99+
    2023-06-14
  • Javascript数组的 forEach 方法详细介绍
    目录前言使用forEach注意事项前言 在JavaScript 中数组的遍历 有很多中方法, 其中有一种 使用 foreach 来遍历数组。 mdn官方文档 语法: arr.forE...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作