百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

程序员的 JavaScript 代码该如何让计算机搞懂?

xsobi 2024-12-27 17:28 18 浏览

出自程序员之手的 JavaScript 代码,该如何变成计算机所能理解的机器语言呢?本文将带你走进 JavaScript 引擎内部,一探究竟。

作者 | Lydia Hallie

译者 | 弯月,责编 | 屠敏

以下为译文:

JavaScript 很酷(这一点不用我说),但一台机器究竟是怎样理解我们编写的代码呢?作为JavaScript 开发者,我们通常不需要处理编译器的东西。但是,了解 JavaScript 引擎的基础知识,知道它如何将人类能看懂的JS代码变成机器能理解的东西,是绝对是有好处的!

注意:这篇文章主要根据 Node.js 和基于 Chromium 的浏览器使用的V8引擎撰写。

当HTML解析器遇到代码中的script标签时,就会从网络、缓存或者已安装的service worker里加载源代码。这一步的结果就是脚本内容,以字节流的形式返回,这个字节流需要解码器来处理!字节流解码器会在字节流下载的时候进行解码。

字节流解码器根据流中的字节数据来创建符号(token)。例如,0066解码成f,0075解码成u,006e解码成n,0063解码成c,0074解码成t,0069解码成i,006f解码成o,006e解码成n,然后是一个空格。似乎你写了一个function!这是JavaScript的保留关键字,因此就会创建一个符号,然后发给解析器(以及预解析器,我的GIF图里没有说,但我会稍后解释)。字节流中的其余内容也会类似处理。

引擎有两个解析器:一个是预解析器(pre-parser),另一个是解析器(parser)。预解析器只负责尽早检查符号,找出其中的语法错误。这样可以减少在代码中发现错误所需的时间。否则这些错误就要由解析器负责发现了!

如果没有错误,解析器就会根据它从字节流解码器收到的符号创建节点,然后使用这些节点创建一颗抽象语法树,简称AST。

接下来就是解释器(interpreter)出场了!解释器会遍历整个AST,根据AST的内容生成字节码。字节码生成完成后,就会删除AST以释放更多的内存。这样就得到了机器能够运行的代码!

虽然字节码很快,但它还可以更快。字节码在运行的时候会生成信息。它可以检测到哪些行为会更频繁发生,哪些类型的数据会更经常被使用。如果某个函数被调用了许多次,那么就可以通过优化加快速度!

字节码会连同生成的类型反馈一起发送到优化编译器(optimizing compiler)。优化编译器会处理负责处理字节码和类型反馈,然后生成高度优化过的机器码。

JavaScript 是一个动态类型语言,这意味着数据类型经常会变化。如果 JavaScript 引擎每次都必须检查值的类型,那就会非常慢。

然而,JavaScript 的引擎使用了一种叫做内联缓存(inline caching)的方法。它会在内存中缓存代码,期待着以后会用同样的行为返回同样的值!比如,一个函数被调用100次,到目前为止每次都返回同样的值。那么引擎就会假设该函数在第101次调用时依然会返回同样的值。

我们假设有一个函数sum,到目前为止每次调用都使用两个数值作为参数:

上面的调用会返回3!下次被调用时,引擎就会假设我们依然会用两个数值进行调用。

如果这个假设正确,那就不需要进行动态查找,可以直接使用内存中保存的值。否则,如果假设错误,就会进行反优化,将代码从优化过的机器码恢复成原始的字节码。

例如,假设下次调用时传递了一个字符串而不是数值。由于 JavaScript 是动态类型,这样做不会产生任何错误!

这意味着数字2会被强制转换成字符串,然后函数会返回字符串"12"。因此引擎会去执行字节码,然后更新类型反馈。

希望这篇文章对你有帮助性!当然,引擎还有许多其他方面我没有讨论到(如JS heap,call stack等),也许以后会讨论!如果你对JavaScript的内部原理有兴趣,我强烈建议你自己做一些研究,V8是开源的,关于其工作原理的文档也非常好!

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

本文为 CSDN 翻译,转载请注明来源出处。

【End】

【成就一亿技术人】各位撸代码的大佬们,CSDN重磅推出升级版原力计划。只要是原创,只要你首发,现在,都拥有上首页的幸运可能。我们衷心地希望,这一代程序员网红就是你,详情戳海报~~

相关推荐

大模型技术:详解LangGraph,从基础到高级

图片来自DALL-E3LangChain是构建由Lardge语言模型提供支持的应用程序的领先框架之一。借助LangChain表达语言(LCEL),定义和执行分步操作序列(也称为链)变得更加简...

SQL知识大全三):SQL中的字符串处理和条件查询

点击上方蓝字关注我们今天是SQL系列的第三讲,我们会讲解条件查询,文本处理,百分比,行数限制,格式化以及子查询。条件查询IF条件查询#if的语法IF(expr1,expr2,expr3)#示例S...

聊聊Spring AI Alibaba的PdfTablesParser

序本文主要研究一下SpringAIAlibaba的PdfTablesParserPdfTablesParsercommunity/document-parsers/spring-ai-alibab...

SpringBoot数据库管理 - 用Liquibase对数据库管理和迁移?

Liquibase是一个用于用于跟踪、管理和应用数据库变化的开源工具,通过日志文件(changelog)的形式记录数据库的变更(changeset),然后执行日志文件中的修改,将数据库更新或回滚(ro...

MySQL合集-单机容器化

MySQL单机容器化mkdir-p/opt/mysql/{data,etc}cpmy.cnf/opt/mysql/etc#dockersearchmysqldockerpullm...

差异基因分析不会做?最简单的火山图做法,一秒学会

最近很多刚了解生信的同学问喵学姐:看了一些文献,文献里的各种图怎么看呀,完全看不懂。今天喵学姐就来给大家讲一讲我们平时做的最基础的差异分析——火山图火山图(Volcanoplot)是散点图的一种,它...

每分钟写入6亿条数据,携程监控系统Dashboard存储升级实践

一、背景概述框架Dashboard是一款携程内部历史悠久的自研监控产品,其定位是企业级Metrics监控场景,主要提供用户自定义Metrics接入,并基于此提供实时数据分析和视图展现的面板服务,提供...

高效开发库:C++ POCO库开发者使用指南

目录POCO库简介POCO库的特点POCO库的模块分类POCO库的应用场景各模块功能详解与代码示例1.POCO库简介POCO(PortableComponents)是一个开源的C++类库,旨在为开...

Oracle中JDBC处理PreparedStatement处理Char问题浅析

最近碰到一个奇怪的问题,同样的Java代码,在不同的数据库执行,结果集却不同?代码片段如下:表的定义:SAMPLE_TABLE(IDINTEGER,NAMECH...

mp4封装格式各box类型讲解及IBP帧计算

mp4封装格式各box类型讲解及IBP帧计算目录;总结送学习大纲零基础到实战boxftypboxmoovboxmvhdbox(MovieHeaderBox)trakbox(Track...

「猪译馆」ASFV在不同基质中的存活时间(一)

作者Author欧洲食品安全署EuropeanFoodSafetyAuthority(EFSA),AndreaGervelmeyer欧盟委员会委托欧洲食品安全署对非洲猪瘟病毒在不同基质中...

视频封装格式:MP4格式详解

1.MP4格式概述1.1简介MP4或称MPEG-4第14部分(MPEG-4Part14)是一种标准的数字多媒体容器格式。扩展名为.mp4。虽然被官方标准定义的唯一扩展名是.mp4,但第三方通...

音视频八股文(10)-- mp4结构

介绍mp4文件格式又被称为MPEG-4Part14,出自MPEG-4标准第14部分。它是一种多媒体格式容器,广泛用于包装视频和音频数据流、海报、字幕和元数据等。(顺便一提,目前流行的视频编码格式...

大数据ClickHouse进阶(九):ClickHouse的From和Sample子句

#头条创作挑战赛#ClickHouse的From和Sample子句一、From子句From子句表示从何处读取数据,支持2种形式,由于From比较简单,这里不再举例,2种使用方式如下:SELECTcl...

一文读懂MP4封装格式

简介MP4或称MPEG-4第14部分(MPEG-4Part14)是一种标准的数字多媒体容器格式。扩展名为.mp4。虽然被官方标准定义的唯一扩展名是.mp4,但第三方通常会使用各种扩展名来指示文件的...