如今算法是新锐前端框架成功的重要因素

随着前端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就把你变成了两个程序员 —— 一个处理那些你不须要关心的东西，另外一个能够集中精力在问题自己上。这是一个很震人的改变，一个你应该很快就能习惯能喜欢上的改变。