标签：框架 render DOM 前端 编译 运行 children vDom

前端框架的运行时与编译时

本文写于 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 操作，那么我们做的就叫做 “纯编译时”框架。因为在代码运行过程中，我们的框架没有做任何操作。

（完）

标签：框架,render,DOM,前端,编译,运行,children,vDom
来源： https://www.cnblogs.com/xhyccc/p/16349481.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。