随着前端MVVM的流行，小型框架现在越来越难存活了！react, angular等打着大公司旗号的框架占了半壁江山，而avalon以其良好兼容性在国内份额不断上升。

前端也与后端一样，遵循马太效应，强者愈强，弱者愈弱。最后只剩下两种框架，不断被人发现BUG的框架与没有人用的框架。MVVM本来就是一种非常复杂的分层架构。计算属性就用了半数的Gof设计模式，双向绑定则绑定6，7种dom事件（像angular，avalon为了兼容IE6，数量达10以上）。但尽管这么复杂，只要使用者察觉不到，用得爽，对业务开发有帮助，就自然会有人用。因此现在国内许多公司，为了维护性，不断将页面形式由jquery为主的架构，转为ng, react, avalon为核心的架构。

框架有人用，就有为它提新需要。有新需求，就有新feature。有新feature，框架就不断膨胀。过去，angular使用脏检测，avalon使用属性劫持来监听数据的变动，从而实现页面智能刷新。但随着人用得多，用得爽，尤其是后台系统，这些框架开始接手一些超大的页面的活儿。上2000个绑定，angular就趴下了，上10000个绑定，avalon也气喘喘了。MVVM遇到性能问题了。

前端通常不会遇到性能问题的，遇到性能问题，说明前端已经发展很高的程度了。知乎上有人把前端的问题抽象成两点：复杂墙与性能墙。

太复杂的东西，我们可以拆分成一个个小块，以分治方法处理。比如说模块化，组件化。

性能问题，后端告诉我们使用大量的缓存算法还有池子，这个avalon1已经使用了。像angular这么牛的框架，当然也有很牛的算法，但还不够牛，于是趴下了。直到react带着虚拟DOM走到我们眼前。

虚拟DOM是什么呢？是一个用普通对象抽述的DOM树吗？这只是一部分。它包含三个内容：vtree, diff, patch。

vtree是生成虚拟DOM，GITHUB上有一些小库，教你如何用VElement, VComment, VText这三个方法创建一个虚拟DOM（当然还有VThunk， VWidget 什么），但这样笨拙的方式，显然没有人用。于是react 打包了一个叫JSX的模板引擎，用于生成虚拟DOM。

diff，就是比较前后虚拟DOM的差异，react等把所有变更归纳成7，8种变化，方便以后针对不同的变化应用不同的刷新函数。这个涉及许多算法，比如普通的DSF遍历算法，最短编辑距离算法(只要是用于比较两个列表的变动)

patch是应用变更于真实DOM，这与SVN版本管理差不多，得到不同点，修改现有版本。但如何知道这个虚拟DOM是对应某个真实DOM呢？是否遍历整个DOM树吗？因此在第二步，我们可以在发生变化的虚拟DOM做一些标记，如记录其位置。二分法等就能跟据索引找到对应的真实DOM。但这有风险，如果用户用了jQuery插件，修改了DOM树结构，真实DOM与虚拟DOM就不一一对应了，因此react 的入侵性与排他性是很强的。像angular, react是保持了要修改的节点，因此用户以后怎么操作DOM树，基本不影响它的运作。

说这里，我们已经提到许多算法名了。在jQuery时代，选择器引擎就是一个从右到左的快速查找算法，它还是基于一些DOM api。像MVVM的许多算法，比如html parser，我们实现一个类JSX的模板，就必须用到的。然后将指令转换为函数，收集里面的VM变量，就需要抽取JS变量，这也要懂点JS parser。以后的创建虚拟DOM树的模板函数，diff, patch更是一堆算法。 前端框架终于到一个比拼算法的新时代了。

算法的好坏，决定了其性能的好坏。就像之前DOM库一样，大家都愿意用速度最快的选择器引擎。天下武功，唯快不破，也是这道理。

avalon也是从注重各种兼容性DOM的hack的发掘，转向优化内部的各种算法。在用户真正执行代码，我们已经用各种算法将用户的代码改造成另一种形式，方便它以后这个新姿态起跑。react为什么这么快？因为在编译过程，JSX等已经做了优化！

前端框架注定越来越复杂，现在读不懂其源码，以后估计也很难读懂。就像你在2010年时不买房一样，现在就很难买房了。门槛会越来越高。经济学家称此现象为阶级固化。虽然社会（框架）的进步，让大家过得很轻松，但进升之路却越来越窄了！算法以后成为前端面试一个重点，因为DOM兼容问题会越来越少，彻底被框架与工程化所屏蔽。

最后安利一下我的框架avalon2。MVVM是一个好东西，切换到 avalon2就把你变成了两个程序员 —— 一个处理那些你不需要关心的东西，另一个可以集中精力在问题本身上。这是一个很震人的改变，一个你应该很快就能习惯能喜欢上的改变。

链接: https://www.fly63.com/article/detial/8572