前端框架的运行时与编译时
本文写于 2022 年 5 月 20 日。
运行时与编译时是前端工程师常常听到的两个词。
比如 Vue 运行时、Angular 运行时、React 运行时……
又比如 svelte 框架，总听到他的宣传说的是“0 运行时”，所以他的工作其实就是在“编译时”了。
这两个词到底是什么意思呢？
虚拟 DOM 的渲染
我们以虚拟 DOM 为例来讲解运行时与编译时。
虚拟 DOM 是 React/Vue 都采用了的一种设计手段，简单来讲它就是将 HTML 的 DOM，用一套 JS 对象来表示。
<div id="app">
<h1>Hello World</h1>
</div>
可以简单的这么表示：
const vDom = {
tag: "div",
id: "app",
children: [
{
tag: "h1",
children: ["Hello World"],
},
],
};
那么我们如何渲染这个对象呢？
可以提供一个 render 函数来做到。
function render(vDom, container) {
const el = document.createElement(vDom.tag);
el.id = vDom.id;
if (!vDom.children || vDom.children.length === 0) {
container.append(el);
return;
}
for (let i = 0; i < vDom.children.length; i++) render(vDom[i], el);
}
我们去遍历这个对象和他的 children 属性以渲染 DOM。（这个写法效率很低，只做示例用）
这就叫做运行时。
我们在代码跑起来之后，才进行的 DOM 渲染。
虚拟 DOM 写起来太麻烦怎么办
接下来问题来了，虚拟 DOM 实在是太难写了。我们这么去写 UI 会写到吐血的。
能不能让我们写普通的 HTML，然后把它变成虚拟 DOM 呢？
当然可以，我们的 Vue 和 React 都提供了这样的工具，所以我们才能愉快的书写 Vue template 和 JSX。
假设这是一个函数名叫 complier。
const vDom = complier(htmlStr);
render(vDom, document.querySelector("#app"));
这样我们就能衔接上之前写的 render 方法。
直到此时，我们依旧是纯运行时框架。但 complier 函数并没有必要放到运行时呀！
我们可以写一个脚本把 complier 的结果直接硬编码到输出文件中。
// 源文件
<template>
<div>
<!-- ... -->
</div>
</template>
<script>
// do something here...
</script>
// 输出文件
const vDom = {
tag: "div",
children: [
// ...
],
};
render(vDom, app);
在浏览器中我们无须源文件，只需要输出文件，就可以运行我们的 render 函数了。
render 函数也能编译？
既然我们可以把 jsx/Vue template 编译成 vDom，那我们能不能直接把 render 函数也给干掉呢？
要知道 render 现在需要进行递归操作，效率是比较差的。
我们要时能把所有的递归操作都干掉，直接编译成一连串的 DOM 操作，岂不美哉？
没错，这样做是可以的。
如果我们把源代码直接编译成一连串的 DOM 操作，那么我们做的就叫做 “纯编译时”框架。因为在代码运行过程中，我们的框架没有做任何操作。
（完）