前端
后端
AI
随笔
前端
后端
AI
随笔

什么是运行时和编译时？

简单来说，运行时是指代码在浏览器或其他环境中实际执行的阶段，而编译时是指代码在运行之前被处理或转换的阶段。

框架设计时，可以选择纯运行时、纯编译时，或两者的结合，每种方式都有其独特的特性和适用场景。

纯运行时框架：灵活但受限

先来看一个纯运行时框架的例子。假设我们设计了一个简单的框架，提供一个 Render 函数，用户通过传入一个树形结构的数据对象来渲染 DOM 元素。数据对象可能长这样：

const obj = {
  tag: 'div',
  children: [
    { tag: 'span', children: 'hello world' }
  ]
}

Render 函数的实现如下：

function Render(obj, root) {
  const el = document.createElement(obj.tag)
  if (typeof obj.children === 'string') {
    const text = document.createTextNode(obj.children)
    el.appendChild(text)
  } else if (obj.children) {
    obj.children.forEach(child => Render(child, el))
  }
  root.appendChild(el)
}

使用时，用户只需调用：

Render(obj, document.body)

浏览器就会渲染出一个 <div><span>hello world</span></div> 的结构。这种方式简单直观，用户直接提供数据对象，无需额外学习复杂的语法或工具，框架在运行时动态解析并生成 DOM。

优点：

  • 简单易用：用户无需了解编译过程，直接提供数据对象即可。
  • 灵活性高：支持动态生成的数据结构，适合需要高度动态化的场景。
  • 开发速度快：没有编译步骤，开发和调试更直接。

缺点：

  • 性能有限：运行时解析数据对象需要额外的计算开销，尤其在复杂结构或频繁更新时。
  • 无法优化：因为没有编译阶段，框架无法提前分析哪些内容是静态的，哪些会动态变化，错失了优化机会。
  • 用户体验受限：如示例中，用户需要手写树形结构，繁琐且不够直观。

如果用户提出“能不能用类似 HTML 的语法来描述结构？”纯运行时框架就显得力不从心了，因为它无法直接处理 HTML 字符串。这时，我们需要引入编译时。

运行时 + 编译时：兼顾灵活与优化

为了满足用户的需求，我们可以引入一个 Compiler 函数，将 HTML 字符串编译成树形数据对象，再交给 Render 函数处理。假设用户提供以下 HTML 字符串：

const html = `
  <div>
    <span>hello world</span>
  </div>
`

Compiler 函数会将其转换为：

const obj = {
  tag: 'div',
  children: [
    { tag: 'span', children: 'hello world' }
  ]
}

用户的使用方式变为：

const obj = Compiler(html)
Render(obj, document.body)

这样，框架就变成了运行时 + 编译时的架构。用户既可以直接提供树形数据对象（运行时），也可以提供 HTML 字符串（编译时），框架会先编译成数据对象再渲染。

进一步优化，我们可以在构建阶段就运行 Compiler，将 HTML 字符串提前编译为数据对象，运行时直接使用编译结果，从而减少运行时的性能开销。这种方式称为构建时编译，对性能更友好。

优点：

  • 灵活性强：支持多种输入方式，用户既可以用数据对象，也可以用 HTML 字符串。
  • 优化空间大：编译阶段可以分析代码，识别静态内容和动态内容，为运行时提供优化信息。例如，标记哪些节点是静态的，减少不必要的 DOM 操作。
  • 用户体验好：HTML 语法更直观，符合开发者习惯。

缺点：

  • 复杂度增加：需要维护编译器和运行时两部分，开发成本更高。
  • 运行时编译开销：如果编译在运行时进行，可能会影响初次渲染性能。
  • 学习成本：用户需要了解编译相关的工作流。

Vue.js 3 就是运行时 + 编译时架构的典型代表。它通过编译器将模板转换为渲染函数，同时保留运行时能力，支持动态渲染。Vue.js 3 在编译阶段进行大量优化，比如静态节点提升、事件缓存等，使得性能接近纯编译时框架，同时保持了灵活性。

纯编译时框架：性能优先，灵活性受限

如果我们更进一步，将 HTML 字符串直接编译为命令式 JavaScript 代码呢？例如，将：

<div><span>hello world</span></div>

编译为：

const el = document.createElement('div')
const span = document.createElement('span')
span.appendChild(document.createTextNode('hello world'))
el.appendChild(span)
document.body.appendChild(el)

这种方式完全不需要 Render 函数，编译器直接生成可执行的 JavaScript 代码，运行时只需执行这些代码即可。这就是纯编译时框架。

优点：

  • 性能极佳：没有运行时解析的开销，直接生成高效的命令式代码。
  • 可深度优化：编译器可以分析代码，生成最优的 DOM 操作逻辑。
  • 代码体积小：无需运行时库，减少了打包体积。

缺点：

  • 灵活性低：用户必须通过编译器生成代码，无法动态提供数据对象。
  • 开发复杂：编译器需要处理所有可能的模板语法，开发和维护成本高。
  • 调试困难：生成的命令式代码可读性差，调试时难以追溯到原始模板。

Svelte 是纯编译时框架的代表，它将模板直接编译为高效的 JavaScript 代码，运行时几乎没有额外开销。但由于缺乏运行时支持，动态场景下的灵活性不如 Vue.js 3。

如何选择合适的架构？

选择纯运行时、纯编译时还是运行时 + 编译时，取决于框架的目标和使用场景：

  1. 纯运行时适合快速原型开发或高度动态的场景，比如实时生成内容的编辑器。它的实现简单，适合小型项目，但性能和扩展性有限。
  2. 运行时 + 编译时适合需要兼顾灵活性和性能的大型项目。Vue.js 3 的成功证明了这种架构可以在性能和开发体验之间找到平衡，适合大多数 Web 应用。
  3. 纯编译时适合对性能要求极高的场景，比如移动端或低性能设备上的应用。Svelte 的设计理念就体现了这一点，但它牺牲了部分灵活性。

在实际开发中，运行时 + 编译时的架构往往是更通用的选择。它通过编译优化提升性能，同时保留运行时的动态能力，适应多种场景。例如，Vue.js 3 在编译时通过静态分析标记不变的节点，运行时跳过这些节点的更新，从而大幅提升性能。

目录