您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript 究竟是如何工作的?

时间:2019-06-05 10:33:04  来源:  作者:

前言

什么是 V8?JAVAScript运行的背后发生了什么?

如果你是一个 JS 开发者或者是正在学习这门语言的学生,很大概率上你会遇到双字母词”V8”。在这篇文章中,我将会为你简述不同的 JS 引擎并深入探究 V8 引擎的工作机制。文章的第二部分涵盖了内存管理的概念,不久后将发布。

这篇文章是由 Bit (GitHub) 带来的。作为一个共享组件的平台,Bit 帮助每个人构建模块化的 JavaScript 应用程序,在项目和团队之间轻松地共享组件,同时实现更好&更快的构建。试试看。

1.编程语言是如何工作的?

在开始讲解 JavaScript 之前,我们首先要理解任意一门编程语言的基本工作方式。电脑是由微处理器构成的,我们通过书写代码来命令这台小巧但功能强大的机器。但是微处理器能理解什么语言?它们无法理解 Java,Python 等语言,而只懂机器码。

用机器语言或汇编语言编写企业级代码是不可行的,因此我们需要像 Java,Python 这样配带一个解释器或者编译器用于将其转换为机器码的高级语言。

1.1编译器和解释器

编译器/解释器可以用它处理的语言或任何其他语言来编写。

解释器: 一行一行地快速读取和翻译文件。这就是 JavaScript 最初的工作原理。

编译器: 编译器提前运行并创建一个文件,其中包含了输入文件的机器码转换。

有两种途径可以将 JavaScript 代码转换为机器码。编译代码时,机器对代码开始运行前将要发生的事情有更好的理解,这将加快稍后的执行速度。不过,在这个过程之前需要花费时间。

另一方面,解释代码时,执行是立即的,因此要更快,但是缺乏优化导致它在大型应用程序下运行缓慢。

创建 ECMAScript 引擎的人很聪明,他们集二者之长开发了 JIT(Just-in-time) 编译器。JavaScript 同时被编译和解释,但实际实现和顺序取决于引擎。我们将会看到 V8 团队采用的是什么策略。

2.从 JavaScript 到机器码

就 JavaScript 而言,有一个引擎将其转换为机器码。和其他语言类似,引擎可以用任何语言来开发,因此这样的引擎不止一个。

  • V8 是谷歌针对 Chorme 浏览器的引擎实现。
  • SpiderMonkey 是第一个引擎,针对网景浏览器开发,现用于驱动 FireFox。
  • JavaScriptCore 是苹果针对 Safari 浏览器使用的引擎。

还有很多,如果你想知道 Internet Explorer 背后的引擎,查看这个维基百科页面.

2.1 ECMAScript

面对这么多的引擎,你可能会问:我可以开发自己的引擎吗?可以,只要遵循 ECMAScript 标准。

如果我们打算做一个翻译器,那么就必须知道这两门语言的有效字。我们已经知道机器语言中什么是有效的了,但是对于 JavaScript,这是需要进行标准化的。

JavaScript 的标准化工作是由 Ecma 国际组织负责的,相关规范被称为 ECMAScript 或者 ES。因此,当你看到一篇文章/视频提到“ES7 有什么新特性?”时,你就知道它代表的是 ECMAScript 标准中新增的 JS 特性。

3.V8 引擎

3.1 部分历史

谷歌针对浏览器开发了谷歌地图,而这对浏览器的处理能力提出了很高的要求。那时的 JavaScript 实现尚不足以快速地运行地图。谷歌想要吸引更多的用户使用这项服务,从而进行广告销售并牟利。基于这个原因,这项服务必须快速且稳定。因此谷歌自己用 C++ 开发了 V8 引擎并在 2008 年启用,它的速度很快,或者就像一些人说的,它的速度是最快的。

 

JavaScript 究竟是如何工作的?

 

 

3.2 解析和构建树

JavaScript 文件进入引擎后,解析器进行词法解析,它将代码分解成 token 以确定它们的含义。这些 token 组成了AST(抽象语法树)。

JavaScript 究竟是如何工作的?

 

编译器在语义分析中验证语言元素和关键词的正确用法,而 ASTs 在这个过程中扮演着重要的角色。之后,ASTs 被用于生成实际的字节码或者机器码。

JavaScript 究竟是如何工作的?

 

3.3 引擎的核心

 

JavaScript 究竟是如何工作的?

 

 

我们之前谈到,JavaScript 是由 Ignition 这个解释器解释的,同时由 TurboFan 这个 JIT 优化编译器进行编译。

首先,前面步骤生成的 ASTs 传递给解释器,该解释器迅速生成未经过优化的机器码,并且其执行是无延迟的。

Profiler 在代码运行时进行观察,找出可以进行优化的地方。例如,一个‘for’循环跑了 100 次,但是每次迭代产生的结果都是一样的。

使用这个分析器后,任何未优化的代码都将传递给编译器以进行优化,同时生成机器码,它最终会替换掉之前由解释器生成的未优化代码中的对应部分。

随着分析器和编译器不断地更改字节码,JavaScript 的执行性能逐渐提高。

3.4 更多历史

在V8 的 5.9 版本推出之前,它使用两个优化编译器和一个基线编译器。

  • 基线编译器 full-codegen 迅速生成未优化的机器码。
  • 两个优化编译器 Crankshaft 和 TurboFan 用于优化代码。

JavaScript 增加了新的特性后,架构的复杂度上升,维护相同的管道对 V8 团队来说变得更加困难了。如果你想阅读更多相关的旧方法以及转向新管道的原因,可以访问他们的网站

3.5 放眼未来

随着更多进一步提升性能的研究的进行,V8 引擎的工作机制在未来还可能发生变化。此外,随着 Webassembly 逐渐成形,可能会向管道添加额外步骤。

4.结论

ECMAScript 引擎的实现有很多,其中以谷歌的 V8 最为出名。希望这篇文章的简述不仅可以帮助你理解 JavaScript 的工作原理,还能从大体上了解一门编程语言的工作原理。如果你想了解 V8 团队的未来计划或者引擎的细节,这里有一篇很不错的博客。

关于本文

译者:@Chorer

译文:https://chorer.github.io//2019/05/10/Trs-Javascript 究竟是如何工作的?(第一部分)/

作者:@Priyesh Patel

原文:https://blog.bitsrc.io/how-does-javascript-really-work-part-1-7681dd54a36d
 



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Tags: JavaScript  点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  Tags: JavaScript  点击:(20)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Tags: JavaScript  点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  Tags: JavaScript  点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  Tags: JavaScript  点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  Tags: JavaScript  点击:(51)  评论:(0)  加入收藏
1、前言async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法。async和await关键字让我们可以用一种更简...【详细内容】
2021-09-17  Tags: JavaScript  点击:(61)  评论:(0)  加入收藏
为什么要使用 debugger这篇文章将介绍如何使用断点来进行 JavaScript 调试。在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试?我们首先需要认可使用断点的是必要...【详细内容】
2021-08-26  Tags: JavaScript  点击:(66)  评论:(0)  加入收藏
JavaScript 可以做很多好玩的事, 从复杂的框架到处理API,有太多的东西需要学习。但是,它也能让我们只用一行就能做一些了不起的事情。1. 获得一个随机的布尔值(true/false)该函数...【详细内容】
2021-08-19  Tags: JavaScript  点击:(77)  评论:(0)  加入收藏
JavaScript 提供了大量不同的处理数组的方法,这里花几分钟时间介绍 8 个项目中可以用到的数组方法。1. Array.map()使用.map() 方法,可以创建一个基于原始数组的修订版数组。....【详细内容】
2021-08-19  Tags: JavaScript  点击:(95)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条