JavaScript 运行原理详解：从浏览器内核到 V8 引擎

要理解JavaScript的运行机制，首先需要掌握浏览器内核的工作原理。

浏览器内核

不同浏览器采用不同的内核，以下是常见内核及其对应的浏览器：

• Gecko：早期由Netscape和Mozilla Firefox使用；
• Trident：由微软开发，用于IE4至IE11，但Edge已转向Blink；
• Webkit：苹果基于KHTML开发的开源引擎，用于Safari，早期Chrome也使用；
• Blink：Webkit的分支，由Google开发，目前应用于Chrome、Edge和Opera等浏览器；

浏览器内核即排版引擎，其工作流程如下：

当HTML解析遇到JavaScript标签时，会暂停HTML解析，转而加载并执行JavaScript代码；

为什么不直接异步加载执行JavaScript，而是要在此处阻塞？

因为浏览器希望将HTML解析生成的DOM与JavaScript操作后的DOM合并，以生成最终的DOM树，避免频繁重建DOM树；

JavaScript代码由谁执行？答案是JavaScript引擎。

JavaScript 引擎

为什么需要JavaScript引擎？

• 无论JavaScript代码交给浏览器还是Node.js执行，最终都需要由CPU执行；
• 但CPU只能识别机器语言（指令集）；
• 因此需要JavaScript引擎将JavaScript代码翻译为CPU指令来执行；

常见的JavaScript引擎有哪些？

• SpiderMonkey：首款JavaScript引擎，由JavaScript作者Brendan Eich开发；
• Chakra：微软开发，用于IE浏览器；
• JavaScriptCore：WebKit中的JavaScript引擎，由Apple开发；
• V8：Google开发的强大JavaScript引擎，助力Chrome在众多浏览器中脱颖而出；

V8 引擎

• V8是用C++编写的Google开源高性能JavaScript和WebAssembly引擎，用于Chrome和Node.js等；
• 它实现ECMAScript和WebAssembly，运行于Windows 7或更高版本、macOS 10.12+以及使用x64、IA-32、ARM或MIPS处理器的Linux系统；
• V8可独立运行，也可嵌入任何C++应用程序中；

V8引擎执行JavaScript代码的原理如下：

Parse模块将JavaScript代码转换为AST（抽象语法树），因为解释器不直接识别JavaScript代码；

• 如果函数未被调用，则不会转换为AST；
• Parse的V8官方文档：https://v8.dev/blog/scanner

Ignition是一个解释器，将AST转换为ByteCode（字节码）；

• 同时收集TurboFan优化所需信息（如函数参数类型，以便进行真实运算）；
• 若函数仅调用一次，Ignition会解释执行ByteCode；
• Ignition的V8官方文档：https://v8.dev/blog/ignition-interpreter

TurboFan是一个编译器，可将字节码编译为CPU可直接执行的机器码；

• 若函数被多次调用，会被标记为热点函数，经TurboFan转换为优化的机器码，提升执行性能；
• 但机器码也可能还原为ByteCode，若后续执行中类型发生变化（如sum函数原执行number类型，后变为string类型），之前优化的机器码无法正确处理运算，便会逆向转换为字节码；
• TurboFan的V8官方文档：https://v8.dev/blog/turbofan-jit

上述即为JavaScript代码的执行过程；

学习，记录，共勉！

到此这篇关于JavaScript运行原理的文章就介绍到这了，更多相关内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！