可视化的JavaScript:JavaScript引擎运行原理

JavaScript 很酷,但是 JavaScript 引擎是如何才能理解我们编写的代码呢?作为 JavaScript 开发人员,我们通常不需要自己处理编译器。然而,了解 JavaScript 引擎的基础知识并了解它如何处理 JavaScript 代码,并将其转换成机器能够理解的东西,绝对是个有益无害的事情。

注意:本文主要基于 Node.js 和基于 Chrome 的浏览器使用的 V8 引擎。

HTML解析器遇到带有源代码的script标签。 来自此源的代码从网络,缓存或已安装的服务工作程序中加载。 响应是将请求的脚本作为字节流,由字节流解码器负责。字节流解码器在下载字节流时对其进行解码。

1.gif

字节流解码器从已解码的字节流中创建令牌。例如,0066解码为f, 0075u, 006en, 0063c, 0074t, 0069i, 006fo, 006en,后面跟一个空格。就像 JavaScript 中的function,这是 JavaScript 中的一个保留关键字,它会创建一个标记,并将其发送给解析器。对于字节流的其余部分也是如此。

2.gif

该引擎使用两个解析器:预解析器(pre-parser)解析器(parser)。预解析器只提前检查标记,以查看是否有语法错误。这可以减少发现代码中的错误所需的时间,否则解析器稍后就会发现这些错误。

如果没有错误,解析器将根据从字节流解码器接收到的标记创建节点。使用这些节点,它创建了一个抽象语法树,即AST

3.gif

接下来,轮到解释器(interpreter)了。遍历AST并根据AST包含的信息生成字节码的解释器。一旦字节码完全生成,AST就会被删除,从而清除内存空间。最后,生成的机器码就可以在电脑上运行了。

4.gif

虽然字节码很快,但它可以更快。当这个字节码运行时,将生成信息。它可以检测某些行为是否经常发生,以及所使用数据的类型。也许已经调用一个函数几十次了:现在是时候优化它了,这样它会运行得更快!

字节码与生成的类型反馈一起发送到优化编译器(ptimizing compiler)。 优化的编译器接收字节码和类型反馈,并根据这些信息生成高度优化的机器码。

5.gif

JavaScript 是一种动态类型语言,这意味着数据类型可以不断变化。如果 JavaScript 引擎每次都要检查某个值的数据类型,那么速度会非常慢。

相反,JavaScript 引擎使用一种称为内联缓存(inline caching)的技术。它将代码缓存在内存中,希望将来它会以相同的行为返回相同的值.假设某个函数被调用100次,并且到目前为止总是返回相同的值。它将假设在第101次调用它时也会返回这个值。

假设我们有以下函数sum,(到目前为止)每次都使用数值作为参数来调用它:

6.png

执行结果为 3。 下次调用它时,它将假定我们再次使用两个相同数字对其进行调用。

如果假投,那么就不需要动态查找,只需要使用存储在特定内存槽中的结果,该槽已经有一个引用。否则,如果假设不正确,它将反优化代码并恢复到原始字节码,而不是优化后的机器码。

例如,下一次调用它时,我们传递的是字符串而不是数字。因为 JavaScript 是动态类型的,所以这样做不会有任何错误。

7.png

这意味着数字2将被强制转换成字符串,而函数将返回字符串'12'。它返回执行解释的字节码并更新类型反馈。

我希望这篇文章对你有用!当然,在这篇文章中还没有涉及到引擎的更多部分( JavaScript 堆,调用堆栈,等等),后续会继续分享。如果你对 JavaScript 的内部机制感兴趣,强烈建议自己可以做一些研究,V8 是开源的,并且有一些很棒的文档说明它是如何工作的。

英文原文地址:https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  30人点赞

没有讨论,发表一下自己的看法吧

推荐文章
可视化的JavaScript:作用域(链)

首先,来看看下面的代码:constname="Lydia" constage=21 constcity="SanFrancisco" functiongetPersonInfo(){ constn

可视化的JavaScript:事件循环

首先,事件循环是什么,为什么要理解它?JavaScript是单线程的:一次只能运行一个任务。通常这没什么大不了的,但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中,我们要等待30秒,然后才

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

智能数据可视化的5个步骤

如今,许多企业正在利用模型、数据分析、数据可视化和仪表板等措施实现数据驱动。例如商业领袖注重提升客户体验,技术领导者注重分析速度和网站指标,应用程序团队在其应用程序中嵌入分析程序等等。这意味着更多的开

打造高逼格、可视化的Docker容器监控系统平台

关于Docker技术的文章之前也断断续续写了几篇:Docker容器系列文章|Docker技术入门(一)Docker容器系列文章|Docker技术入门(二)Docker容器系列文章|这20个Docker

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。让我们先从怎样删除数组中的重复项这个简单问题开始。复杂-使用forEach删除重复

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言JavaScript很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中

可视化编程是否真的没有未来?程序员:它有“七宗罪”

今天想聊聊可视化编程(visual-programming)的未来发展,喂喂,咱们这儿还没开始,各位大佬先别急着走啊您……确实,可视化这个概念跟任何技术并称,都是技术前沿、下一个风口、万亿市场的代名词

那个“炫酷狂拽”的数据可视化利器AntV 11.22版全新发布啦

导读AntV是一个数据可视化项目,也是一个团队,蚂蚁金服数据可视化团队,一群有爱有梦的人,怀揣「让人们在数据世界里获得视觉化思考能力」的梦想前行,希望成就智能时代全球领先的数据可视化解决方案,满足与日

2019值得关注的数据可视化工具TOP5

 数据可视化在数据分析过程中的扮演着非常重要的角色。对于数据科学家或数据分析师来说,以更直观、便于查看、甚至更吸引人的视觉效果来呈现数据是很重要的。数据可视化是一个有效的市场工具,通过这种方式,从海量

基于Pandas+ECharts的金融大数据可视化实现方案

前言最近无意中看到一篇文章,介绍的是在IPythonNotebook里实现ECharts的可视化效果。我个人对ECharts一直是推崇有加,是baidu发布的开源项目中我比较喜欢的一个,绝对是良心之作

分享一个可视化开发vue框架下的各类ui的web在线表单设计布局器

新手发帖,第一次不小心刷新了一下就没了本人刚入门vue,偶然间发现这款布局器挺好的,可视化开发element所以分享给大家网站地址:http://lowcode.magicalcoder.c...嵌入

Python可视化 | Seaborn5分钟入门(一)——kdeplot和distplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(二)——barplot&countplot&pointplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(七)——pairplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(三)——boxplot和violinplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(四)——stripplot和swarmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(六)——heatmap热力图

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(五)——lmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Stack Overflow上188万浏览量的提问:Java 到底是值传递还是引用传递?

在逛StackOverflow的时候,发现了一些访问量像阿尔卑斯山一样高的问题,比如说这个:Java到底是值传递还是引用传递?访问量足足有188万+,这不得了啊!说明有很多很多的程序员被这个问题困扰过

MongoDB 存储引擎与内部原理

一、存储引擎(Storage)mongodb3.0默认存储引擎为MMAPV1,还有一个新引擎wiredTiger可选,或许可以提高一定的性能。mongodb中有多个databases,每个databa

阿里提出针对多目标优化的全新算法框架,同时提升电商推荐场景 GMV 和 CTR

在推荐系统中,多目标优化一直是热门话题,阿里巴巴的XiaoLin、HongjieChen等人针对推荐中的多目标优化问题提出了一种基于帕累托效率的优化算法框架,并应用在电商推荐场景中,对GMV和CTR

工程师笔记:我对数据库系统云原生化的一些思考

作者|张敏(于期)阿里云智能高级技术专家划重点我眼中的云原生我认为的云原生关键能力我眼中的云原生化技术手段我对数据库云原生化的思考伴随着云原生技术越来越热门,阿里内部关于CloudNative、Ser