Skip to content

第一章 权衡的艺术

框架设计里到都体现了权衡的艺术

1.1 声明式 vs 命令式

  • 命令式: 更加关注过程。自然语言能够与代码产生一一对应的关系,代码本身描述的是”做事的过程“。
js
/**
 * 获取id为app的元素
 * 它的内容为hello world
 * 为其绑定单击事件
 * 点击时弹出ok的提示
 * */

$('app') // 获取id为app的元素
  .text('hello world') // 它的内容为hello world
  .on('click', () => alert('ok')) // 定单击事件, 点击时弹出ok的提示
  • 声明式: 更加关注结果。至于实现的过程,由框架实现。
html
<!-- 
 * 获取id为app的元素
 * 它的内容为hello world
 * 为其绑定单击事件
 * 点击时弹出ok的提示 
-->
<div @click="alert('ok')">hello world</div>

结论

  • 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗

  • 理论上命令式的代码可以做到极致的性能优化,声明式代码的性能不优于命令式代码的性能

1.2 虚拟 DOM 的意义

理论上

虚拟DOM 的更新技术性能理论上不可能比原生 JavaScript 操作 DOM 更高

在实际开发过程中,很难写出绝对优化的命令式代码,尤其是当项目体量变大时,命令式代码的性能问题就显得尤为突出。

所以如何能让开发者更加容易开发出易维护、易扩展的应用又能保证应用程序的性能下限,这就是 虚拟DOM 需要处理的问题

性能消耗对比

innerHTML vs Virtual DOM 在创建页面时的性能对比

列名 1innerHTMLVirtual DOM
语法const html = <div><span>...</span></div>
div.innerHTML = html
数据 3
公式数据 6

innerHTML vs Virtual DOM 在更新页面时的性能对比

1.3 运行时与编译时