权衡的艺术

命令式和生命式

命令式：关注过程 声明式：关注结果（封装了过程 内部实现命令式）

性能与可维护性的权衡

结论：声明式代码的性能不优于命令式代码的性能

直接修改的性能消耗定义为 A，把找出差异的性能消耗定义为 B

• 命令式代码的更新性能消耗 = A
• 声明式代码的更新性能消耗 = B + A 生命式代码的优势：在采用命令式代码开发的时候，我们需要维护实现目标的整个过程，包括要手动完成 DOM 元素的创建、更新、删除等工作。而声明式代码展示的就是我们要的结果，看上去更加直观

框架的目标：在保持可维护性的同时让性能损失最小化

虚拟dom的性能

声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗 目标：能够最小化找出差异的性能消耗，就可以让声明式代码的性能无限接近命令式代码的性能 性能方面：纯js层面的性能碾压dom操作

• 创建
  • innerHTML：HTML 字符串拼接的计算量 + innerHTML 的 DOM 计算量。
  • 虚拟dom：创建 JavaScript 对象的计算量 + 创建真实 DOM 的计算量。
• 更新
  • innerHTML：重新构建 HTML 字符串，再重新设置 DOM 元素的 innerHTML 属性
  • 虚拟dom：重新创建 JavaScript 对象（虚拟 DOM 树），然后比较新旧虚拟 DOM，找到变化的元素并更新它

运行时和编译时

框架设计层面的运行时、编译时以及运行时 + 编译时
一个框架既可以是纯运行时的，也可以是纯编译时的，还可以是既支持运行时又支持编译时的

• 纯运行时：没有编译的过程，因此我们没办法分析用户提供的内容
• 编译步骤：可以分析用户提供的内容，看看哪些内容未来可能会改变，哪些内容永远不会改变
• 纯编译时：由于不需要任何运行时，而是直接编译成可执行的 JavaScript 代码，因此性能可能会更好，但是这种做法有损灵活性，即用户提供的内容必须编译后才能用