第一篇 框架设计概览
权衡的艺术
视图层框架通常分为
命令式和声明式
- 命令式框架的一大特点就是
关注过程 - 声明式框架更
注重结果
Vue.js的内部实现一定是命令式的, 而暴露给用户却是声明式的
性能和可维护性的权衡
声明式代码的性能不优于命令式代码的性能
如果把直接修改的性能消耗定义为A, 把找出差异的性能消耗定义为B, 那么:
- 命令式代码的更新性能消耗 = A
- 声明式代码的更新性能消耗 = B + A
既然声明式比命令式多出了查找差异的性能消耗, 那为什么vue.js要选择声明式而不是命令式呢?
声明式代码可维护性更强, 在采用命令式开发的时候, 我们需要维护实现目标的整个过程, 而声明式代码展示的就是我们要的结果, 看上去更加美观, 至于做事的过程我们不需要关心，vue的底层会帮我们去做掉这些东西
那么如何在保持可维护性的同时, 让性能损失最小化呢?
下一节
虚拟DOM的性能到底如何
虚拟DOM的出现, 解决了什么问题?
声明式代码比命令式代码多出一个找出差异的性能损耗，所以为了最小化这一差异化。出现了虚拟dom
虚拟DOM到底是什么呢?
其实就是对html标签进行抽象化的一个树形结构的数据对象
对比一下innerHtml和虚拟dom创建页面的性能:
- innerHTML创建页面的性能：
HTML字符串拼接的计算量 + innerHTML的dom计算 - 虚拟DOM创建页面的性能:
创建JavaScript对象的计算量 + 创建真实DOM的计算量
在创建页面的时候，两者的差异并不大，因为他们都需要新建所有的DOM元素。
接下来, 看看他们更新页面时的性能
- innerHTML更新页面的过程是
重构HTML字符串，在重新设置DOM元素的innerHTML属性。哪怕只更改了一个字，我们也需要重新设置innerHTML。约等于销毁所有的dom元素，然后再重新创建全新的dom元素 - 虚拟dom更新页面：
重新创建js对象（虚拟dom树），然后再比较新旧虚拟dom，找到它的差异，并且更新他。
虚拟dom，它是声明式的，因此心智负担小，可维护性强，性能虽然比不上极致优化的js对象，但是在 保证可维护性 和 保证心智负担 的前提下想当不错。
网友评论