程序员的 JavaScript 代码该如何让计算机搞懂?
xsobi 2024-12-27 17:28 22 浏览
出自程序员之手的 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重磅推出升级版原力计划。只要是原创,只要你首发,现在,都拥有上首页的幸运可能。我们衷心地希望,这一代程序员网红就是你,详情戳海报~~
相关推荐
- Y-3 2015 春季全新鞋款 Toggle Boost
-
运动时尚品牌Y-3今季可说是来势汹汹,继早前曝光的BoostQR、ResponseTRBoost和HayworthGuard三双鞋款之后,此番又带来另一双全新跑鞋ToggleBo...
- 优化分支冲突的关键策略
-
引言在团队协作开发中,有时候会出现多个人同时在一个代码仓库中进行开发。如果这时候采用了分支模式(而不是主干模式)的话,很容易造成分支合并冲突。这种冲突不仅会降低协作效率,同时会影响开发积极性。本文将介...
- From Mate70 to HarmonyOS NEXT: Huawei's pursuit of technological independence
-
byLuKeyanHuaweiofficiallylaunchedtheMate70seriesonNovember26,withpricesstartingat5,4...
- Flutter GetX 硬核分享:Rx 扩展方法实践指南
-
在当今Flutter众多的状态管理方案当中,GetX凭借着自身简洁且高效的响应式编程模型,赢得了广大开发者的热烈欢迎和高度认可。GetX的这种编程模型,不仅大大简化了代码的编写过程,降低了开发...
- 《巫师3:狂猎》全版本控制台代码全收录与进阶使用指南
-
【终极秘典】全版本控制台代码全收录与进阶使用指南(含DLC扩展/隐藏功能/跨平台适配方案)一、核心权限激活:跨平台控制台启动协议文件配置方案通用路径:PC端:\TheWitcher3Wild...
- 资深 UI 设计师搞定按钮和选框的14个秘诀
-
编剧导语:在UI界面中,我们可以看到各种开关按钮之类的组件,怎样更好的使用它们是一个值得思考的问题。这篇文章来自资深设计师TarasBakusevych,他在表单和控件设计领域造诣精深。这篇文章梳...
- 装13还是实用?400元如何买SSD固态硬盘
-
SSD固态硬盘以其有效提高电脑整体性能的特性,受到消费者亲睐。DIY玩家不在电脑装上一块SSD,都不好意思说电脑DIY。高端玩家有充足的预算,选择面大。工薪阶层、大学生装机,手里仅有400元,购买一块...
- 电气绘图常见元件符号汇总
-
根据工作经验,汇总了一些常见的电气符号,可以帮助电气从业人员绘图、识图等,有需求的朋友可以保存1符号英文全称中文名称示例**2RResistor电阻R1,R23CCapacitor电容C1,C24...
- “告别 Neovim!为什么我投奔了刚开源的 Zed 编辑器?”
-
Zed是一款专为团队协作设计的代码编辑器,由Atom编辑器的原作者主导开发。Zed的核心目标是为开发者提供一个高效、流畅、且直观的编程环境,特别强调实时协作和团队合作。该编辑器由Rust语...
- 一分钟了解一个汽车品牌:雪铁龙
-
雪铁龙,这个来自浪漫之都法国的汽车品牌,创立于1915年,至今已有百余年历史。它由安德烈·雪铁龙先生创立,车标以人字形齿轮为灵感,象征着品牌对技术与创新的执着追求。在发展历程中,雪铁龙始终秉持创新精...
- jquery1.9以上版本.toggle()的替代实现方法
-
像大多数前端开发者一样,青衿也经常会用到交互效果的往复切换,比如折叠面板的展开和折叠,动画效果的循环,点击效果的切换等等。刚刚接触jQuery的时候青衿都是使用.toggle()方法。jquery的....
- Google确认Windows 11上的Chrome Gemini将迎来重大AI升级
-
Google终于正式宣布计划在Windows11(以及Windows10)的Chrome浏览器中推出Gemini功能。我们之前一直在报道GeminiLive与GoogleCh...
- “一行代码让iPhone瞬间「变砖」!”发现iOS致命漏洞,开发者喜提12.7万元赏金
-
【CSDN编者按】一行看似普通的系统通知代码,居然能让一部iPhone反复重启、卡死在恢复界面、彻底“变砖”?在本篇文章中,作者展示了一个几乎无需交互的iOS漏洞利用方法——攻击者只需诱导用...
- 【2.UI元素】4.Toggle
-
4.Toggle4.1ToggleToggle(开关)是在开和关两个状态下切换,开是勾选了IsOn选项,关是不勾选IsOn选项。Toggle的构成如下图所示:其中:Background...
- 救命sos!这是谁发明的透明加密软件!没想到用起来这么方便!
-
公司里的重要文件满天飞,你却不知道哪个环节出了岔子,结果机密资料就这么“嗖”地一下飞到了竞争对手的邮箱里?哎呀,那可真叫人心急如焚,恨不得立马找个地缝钻进去!不过,今天我可要给大家安利一个超级神器——...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- characterencodingfilter (33)
- getmonth (34)
- label换行 (33)
- android studio 3 0 (34)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- xmlhttp (35)
- mysql更改密码 (34)
- 权限777 (33)
- htmlposition (33)
- 学校网站模板 (34)
- textarea换行 (34)
- 轮播 (34)
- asp net三层架构 (38)
- bash (34)