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

隨着前端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就把你變成了兩個程序員 —— 一個處理那些你不須要關心的東西，另外一個能夠集中精力在問題自己上。這是一個很震人的改變，一個你應該很快就能習慣能喜歡上的改變。