权衡的艺术

权衡的艺术

November 15, 2024

1029 views

1229 words

框架设计里到处都体现了权衡的艺术。
</div>

## 1 命令式框架与声明式框架

早期的jq就是命令式框架，比较关注过程。
而声明式框架——vue.js,更加关注的是结果，他帮我们封装了具体的过程实现。
所以，Vue.js内部一定是命令式的，而暴露给用户的一定是声明式。

> 声明式代码的性能不优于命令式代码的性能

简单来说，没有其他方法能比得过命令式代码，它可以做到极致的优化。
如果命令式的性能消耗是A，多出的性能消耗是B。
那么声明式的性能消耗一定是A+B。

这就是可维护性和性能性能之间的权衡。所以框架的设计者的原则就是：在保持可维护性的同时让性能损失最小化。

## 2 虚拟DOM

直接说结论。

单纯的创建页面时候，虚拟DOM有两步

1. 创建js对象
2. 新建所有DOM元素

innerHTML的方法：

1. 渲染html字符串
2. 新建所有DOM元素

而涉及到更新元素时候

虚拟DOM：

1. 创建新的js对象+diff
2. 必要的DOM更新

innerHTML方法：

1. 渲染html字符串
2. 销毁所有的DOM
3. 新建所有的DOM

对于innerHTML方法来说，页面越大，更新的性能消耗就越大。
所以，虚拟DOM是在innerHTML与原生js之间的一个权衡。

## 3 运行时与编译时

设计一个框架的时候，通常有三个选择：纯运行时、运行时+编译时、纯编译时
那么，什么是运行时，什么是编译时呢？

以下就是我自己的理解了。

### 纯运行时

就是由用户（也就是框架使用者）直接提供符合函数功能的数据输入，比如树形的结构，原始的结构对象。

### 运行时+编译时

也就是把高层级的内容（一般认为越接近人越高级）编译成低层级的内容（一般认为越机器近越底层）。为此，需要编写一个compiler程序（函数），来把来自人类的内容，编译成机器能接受的内容。

这样，对于用户，最简单的使用方式就是直接调用compiler程序，然后调用run。
更准确的来讲，这个是运行时编译，也就是代码运行时才执行编译，这样多多少少就会产生一些性能开销，所以有了打包（小声）。
因此我们可以在构建（build）的时候就执行complier，这样运行的时候就不需要编译了。

### 纯编译时

看到这里，为什么不直接使用纯编译时呢，这样连run都不需要了，每次运行的时候通过编译完成之后再看不就好了？这样做也许会丢失灵活性（笑）。而且真实性能往往达不到理论高度（这是硬伤）

当然，后面或许还会看到vue.js这样的运行时+编译时框架，对编译时的优化操作。可以在保留运行时的情况下拥有不亚于纯编译时的框架。

Last modification：November 15, 2024

如果觉得我的内容对你有用，请随意赞赏

权衡的艺术

Alpha • 2024 年 11 月 15 日