第一章 权衡的艺术
框架设计里到都体现了权衡的艺术
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 在创建页面时的性能对比
列名 1 | innerHTML | Virtual DOM |
---|---|---|
语法 | const html = <div><span>...</span></div> div.innerHTML = html | 数据 3 |
公式 | 数据 6 |