6、JavaScript 高级特性：JSX 与虚拟 DOM 深度解析

JavaScript 高级特性：JSX 与虚拟 DOM 深度解析

1. JavaScript 引擎与运行时

JavaScript 引擎具备即时编译能力，能够依据实时信息（如变量类型和高频执行的代码路径）进行优化。部分引擎采用多阶段编译策略，先进行快速的非优化编译以迅速启动执行，再针对高频执行的代码段进行更优编译。这种动态编译方式让 JavaScript 引擎在各类应用中表现出色。

运行时通常与引擎交互，为特定环境提供更多上下文辅助和特性。目前最流行的 JavaScript 运行时当属常见的 Web 浏览器，例如 Google Chrome，它搭载了 Chromium 运行时与引擎交互。在服务器端，我们使用 Node.js 运行时，其同样采用了 V8 引擎。此外，还有 Cloudflare 的 Workers、Bun 和 Deno 等运行时。

运行时为 JavaScript 引擎提供上下文，例如浏览器运行时附带的 window 对象和 document 对象。Node.js 没有全局的 window 对象，因为它是不同的运行时，提供的上下文也不同。

2. 使用 JSX 扩展 JavaScript 语法

2.1 JSX 工作原理

要扩展 JavaScript 语法，有两种途径：一是创建能理解新语法的不同引擎；二是在代码到达引擎之前处理新语法。前者几乎不可行，因为创建和维护引擎需要大量精力，且要让其广泛应用可能需要数年甚至数十年，还需说服浏览器厂商和其他利益相关者采用。

后者更为快捷。我们可以创建自己的词法分析器和解析器来理解扩展语言，将代码文本字符串解析后，不生成传统的机器代码，而是生成所有现有引