Ruby's Louvre

每天学习一点点算法

导航

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

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

posted on 2016-06-23 12:02  司徒正美  阅读(6419)  评论(19编辑  收藏  举报