2017 年底如何比較 Angular 4, React 16, Vue 2 的開發和運行速度？

01-03

運行速度有許多網站都有對比，不過就具體的數值來說，差不多可以認為是沒有比較價值了。各框架在最佳實踐下運行速度都不會成問題，甚至於廣受詬病的Angular1都不見得會有大問題。

不過有些小問題還是要注意一下的。

比如說angular你得避免頻繁觸發的事件被zone託管到。

react的富文本也需要注意一下，託管輸入什麼的我搞不懂，emmmmmm……反正知乎超級卡……（逃跑

開發速度方面。會造成影響的變數相當多。比如說react你想自己搭一套帶ssr、路由懶載入的架子，多半會直接累死，其他家也都差不多。我經歷的項目里，開發速度很大程度取決於選用的是什麼腳手架……

就目前的體感來說，用起來最舒服的算是vue的nuxt了，大部分事情都幫你處理好了。angular的cli工具也不錯。react的社區最活躍工具最多，於是……天秤座人士對react社區表示強烈譴責。（泣

因為恰巧三個框架都用過一點點，所以說一下我的感覺吧，可能不對……

React的單函數組件真的是非常的乾淨，是能讓人感到開心的東西。有些時候從一個項目移到另一個項目都沒有成本的。思路清晰，引用方便，我覺得能提高開發效率。
Redux和Vuex這類的東西，寫起來是有點繁瑣的。但是調試時又是另外一種情況了，打開調試工具，讀一下那些action，非常迅速的就能定位到bug。繁瑣之處可以考慮自己封裝一套decorator之類的，雖然好像各個平台的實現和ES的標準都有些出入，但是真的能提高效率。前端頁面複雜了就是各種狀態值滿天飛，指不定什麼時候就組合出了一套bug……
Angular是規定得最死的一套框架。初學的感覺就是「繁瑣到上天」，但這實際上是個假象……cli很方便，規定得死也就意味著大家寫的代碼看上去風格更統一，這真不是壞事。只要你想認真做項目，前期一點點的學習成本還是值得回票價的。
Vue如果使用單文件組件的話……小心文件大小，超過500行就及時拆分吧，等代碼行數漲到一千以上時就幹啥都晚了……因為Vue的data、computed、method、watch之類的東西是拆分開的，很容易相關聯的數據、函數之類的東西，被打散分散在不同的地方，那種絕望是沒有體驗過同事寫的兩千多行的超大頁面的人無法想像的。（跪
用React的別笑，上面那一條對React的JSX也有效……如果是redux的用戶，你還得考慮做connect的粒度。粒度太粗組件間傳遞數據很麻煩，粒度太細……其實你沒發現context和全局對象是差不多的概念嗎，雖然React對context做了許多限制，但是效果並不覺得好……
組件庫是框架的重要加分項，React優勢很大，可以一波A過去…
用好Typescript可以極大提高你的開發效率，這個不是開玩笑的。尤其是你同時接了幾個項目的維護，想要跪在地上哭嚎「人腦記憶力是有極限的啊！」的時候。這一點上Angular加分應該很大。
總覺得React開發時，編輯器的響應速度更快……也可能是錯覺。

最後一提，其實維護階段很可能會比開發階段更長更持久，談「開發速度」時不把維護算進去是有些不合理的。一個組件、一個模塊能不能從一處摘下來、隨手插到別的地方很輕鬆就跑起來，過一段時間能不能輕鬆讀懂，是不是能避免各種魔法字元串……這些反而是真正開發中比較需要關注的細節……至少對我來說是這樣。

不比較。現在用Angular就說說Angular。

覺得Angular的套路規範，抽象風格類似Java這一套，這個非常契合團隊開發。那天看到一個問題說前端很少人用Model。其實不然，我覺得Angular程序員用Model應該是比較普遍的事情，特別是Java轉來的開發人員。

Angular用TypeScript，當時很多人覺得意外和不解。其實TypeScript就是前端開發領域的「Java」，其特點（Type，Generics）天生契合以團隊規模開發為目標的Angular。所以，Angular選擇TypeScript不是偶然，而且也很慶幸選擇了TypeScript。

接受了Angular的開發模式，自然就滿意其開發效率。但很多時候，開發效率一定要建立在開發規範性之上，這才是真正的開發效率。運行速度？還沒發現不滿足的場景。不去比較，就是這樣。

運行速度的具體比較讓別人回答吧，我想說的是，所謂運行速度問題對這些成熟框架而言都不是最主要問題。

你渲染10000次畫500毫秒，我渲染10000次畫400毫秒，我就是更好的框架嗎？當然不是，從用戶感知角度這點差異根本沒啥影響。

易用性、可維護性、可擴展性是更重要的因素。

即使單單說性能，也不是只看「運行速度」，而是看對性能提高的架構，架構要給感知性能提高的空間。比如React v16的架構增加了非同步渲染（雖然還沒有enable），這就可以在CPU運算能力相同的情況下，提好用戶感知性能。

最後，幾個框架比較交流一下也可以，但沒必要罵戰哪個更牛哪個不好。

對比性能這種事情在今年已經沒有意義了，要不然vanillajs才是世界上最好的前端框架

真想知道的話，推薦一個GitHub項目

krausest/js-framework-benchmark

這裡是Round 6的測試結果Interactive Results

不多不少，vue從1.x寫到2.3，大概有10個項目在跑，曾經死粉vue。

最近發現我的代碼好難維護，重複寫了大量的東西，比如字典比如表單比如防抖....

我重新做了技術選型，react跟vue是一樣的。

那麼只剩下了angular這個曾經被我深惡痛絕堅決鄙視的「反人類框架」了。

說起就要干，堅決一邊看一邊重構了公司後台項目，服務依賴注入管道表單驗證rxjs寫攔截器，能用上的都用上了，ui開始選了material 寫著寫著發現這個用這個組件庫根本寫不下去，好看是好看了。

後來用的ng-zorro，對付著寫下去了。

加黑一個框架好不好用很大部分上取決於他的組件庫屌不屌加黑完了

重構完了之後

體驗就是 ng 學是真他么難學，寫是真特么好寫。

Vue是學起來好學，寫起來還行，改點東西想死。

Angular會幫你做到你能想像的一切。cli大而全真的很棒，完全不用管他，會幫你做好的。

Vue，你拿過來尤大大的demo直接寫，可以，自己配webpack也可以。

寫vue的時候，你想怎麼樣就怎麼樣，怎麼都能跑起來，怎麼都能幹。

Angular 這數據這組件你想用是吧？你要告訴我他怎麼來的，需要啥，改變啥，返回啥。

總結

要說是個人項目vue第一選擇，企業級的還是angular吧。

我覺得一時熱度無所謂，angular會走的更遠。

嗯，作為vue的忠實用戶，我其實覺得框架幫你解決的問題都差不多，就看個人能力了。

作為一個寫了整套vue UI組件庫的人來說，其實大家都沒差。

歡迎多看看我的組件庫，多提提意見。

www.heyui.top

運行速度

如果真要講運行速度，三家其實是差不多的，會有區別但是影響不大。如今這個時代1000元的手機/筆記本電腦都可以暢通跑95%以上的網站（數值我瞎編的），因此運行速度什麼的暫時沒什麼可比價值了。

如果真要比速度，沒人快得過直接操作DOM。對於任何一個框架而言，要解決的痛點絕對不是「性能」，反而是因為速度實在太快了，所以問題就出在「維護性」上。因此，使用框架的目的一定是：性能和維護性的取捨。

開發速度

開發速度這種東西真的因人而異，就c#/java黨來說，或許ng比vue/react要更爽。vue/react熟悉以後，大部分人都覺得後者開發速度要快於ng，因此必須撇開這種偏好來對比一下。

學習成本（僅僅框架）

ng：成本是最高的，設計的概念也非常多，api也多。當然，ng俗稱大而全，那必定是「大而全」。

React：react的學習成本主要在於Jsx，過了這道坎以後，開發速率提升我認為是三個框架中最高的。不過鑒於vue現在也可以寫jsx了，所以這個優勢還有待商榷。不過，react最讓我喜歡的一點就是其api一雙手就能數清楚，學習成本很低下。

vue：開發體驗／核心工具鏈／學習成本，是三個框架里做得我認為最好的，這也難怪vue在2016-2017爆髮式的增長速度。按照 @尤雨溪的說法就是：vue的一套工具鏈是同一個大廚配給的，還帶使用指南，都是官方的解決方案，這一點讓人足夠放心。

就學習成本而言，ng&>&>react略大於vue

社區對比

三大框架中，react的社區最為領先，vue緊跟其後，ng嘛.....不好評價。一個社區的好壞直接決定了使用該框架的開發速度，這個基本毋庸置疑。截止2017年目前的情況

vue：中文社區可以用「火爆」來形容，熱度基本直逼React，國外社區遜色於React，但是也絕對不差。前面也說過，vue一直致力於簡化開發流程，在三大框架中做得最好。
react：打一開始，Fb的態度就是「老子只開發react」，其他的東西社區自己來。我個人覺得這種做法分兩面來談，社區的輪子和解決方案3-4個月就出來一個，及其蛋疼無比，今天說redux繁瑣，馬上來了一個mobx，明天說redux-thunk垃圾，又來了個redux-saga。講真的，煩。
ng：社區相對比較雜亂，感天動地的就是Angular Docs中文文檔終於出來了....

對TS的支持

很有意思的是，使用ts開發會極速加快你的開發效率，尤其是代碼超過1萬行以後，很多蛋疼的東西都是能被ts所避免。

react：flow和ts支持都很不錯，這一點可以加一分

vue：2.5之前的版本可能會有小問題，但是都不深的坑。2.5開始大力支持ts，可見，vue往成熟化又進了一步。

ng：三個框架中，支持ts幾乎是原生的

老實說，三大框架對ts的支持目前來說，都不差，vue稍微遜色這個一丁點兒。所以說，這個還真看不出開發速度的比拼。

小小總結一下

當然，以上是我個人的一些見解。我個人而言偏向React和vue，Vue確實很簡單而且社區很多火爆（還都是中國人，親切。

在新澳圈的開發里，總有這麼一幫傻逼白人黑vue，（這幫二逼部署代碼都是手動複製的！

React偏向其實是因為，其組件化幾乎達到了絕對的純粹，拔插無痛性，後期維護拓展性，做得都是最好的。再則，facebook的全線產品全部壓在react上，這讓react得到的保障，至少在fb出來新框架以前，不可能被顛覆。

運行效率毫無價值

我認為三個框架的速度都已經很快了

都已經符合目前的需要

現在就是拼生態圈的時候了

框架發展提供更好的開發環境

vue使用者舉個手哈

我從一個做後端的，喜歡寫點jquery+bootstrap，然後換到ng1，再切到ng2的時候，真的有一種驚為天人的興奮感，逢人便說換ng2吧，立馬換，立馬換，立馬換。

好景不長，build出來的ng2 web app部署到雲，在手機瀏覽器裡面初次載入需要25秒！！！直接崩潰。。。我也知道有angular universal這回事，但沒時間弄。我選擇上手ng2的時機恰巧是ng2版本管理最混亂的時期，生態也不完整，滿世界找js的ts，真心累啊，而且調整一個小版本就各種庫不兼容，成天都在跟環境作鬥爭。不得已棄用ng2，選擇了H5+CSS。

可webcomponent的封裝，隔離，復用，這麼完美的特性，放棄ng2真的是不甘心不甘心不甘心，經常偷偷到github上看ng的release計劃，總想著再給google一點時間吧，說不定就好了。

直到現在，有了新項目，且ng已經快到5了，於是想用三通技術來做（三通：h5，ios，android）。調查來調查去，有三種選擇：

用React Native，ios和android用一套，h5復用大部分組件，底層渲染各自獨立；花了兩天研究ReactJS，React Redux，React Native。結論是當體驗過ng2+的大而全之後，你會覺得React太簡單，大家也都說，這就是UI框架，只是個View而已，要做點事還得搭建路由和其他一堆。Redux也很煩人，數據傳遞即便封裝好了，仍然很不優雅，不過ng2+也有這個問題，尚不知道有沒有解決辦法。RN的優點是體積小和框架靈活，ReactJS16可以zip壓縮到48kb左右，而ng4.4.5的幾個加起來，zip壓縮後也要超過500kb。但對於app來說，這不算啥，但對h5，就要非常謹慎了，下載時間和初始化渲染時間加起來還是很可觀的。
用Angular4 + NativeScript。這是我最熟的方案，可以做到業務邏輯隔離，組件層次隔離，並且組件高度復用。可是糾結這個production的尺寸大小，項目做完，js打包估計有1MB了，這尺寸，心裡真沒底，有誰用過Angular Universal的吱個聲，能解決初次載入的問題嗎？另外，Angular5過幾天就出來了，號稱體積要縮小，速度要提升。但這體積已經這麼大了，會有多大提升幅度呢？而且用NativeScript + Angular4來做app的，網上找不到太多內容，心裡發虛。。。
Hybrid。兩個原生app+純H5。這個自然是傳統套路，但代碼維護什麼的還是很麻煩的。

借題發揮幾句，歡迎交流。

最後angular是贏家

某種意義上來說，開發速度與維護效率成反比，運行效率與框架結合度成正比。

之前正好做過框架性能測試，順手把跑的數據結果貼一下吧，可能有點過時了，想要更新數據結果的可以自行github克隆下來改改。

測試場景主要是基於兩個開源庫：

js-repaints-perf
js-framework-benchmark

第一個庫是來測試節點重繪速率的，一個50*n的表格，更新1%的節點=&>25%=&>50%=&>100%四個場景做對比。

這個是版本較老了，有興趣的可以更新下版本再測測。

上圖可以看出，v-dom選手全刷新的時候優勢比較明顯，但局部更新的時候和臟檢查 change-tracking拉不開差距。

第二個庫是一個全面的測試場景，包括：

1.新增1k/10k條數據

2. 移除全部數據

3. 隨機替換數據

4. 更新局部數據

5.追加數據

...

有興趣的可以看看下圖，react是15.5.4，vue是2.3.3，angularV4.3.3，測試場景左列都寫明了。

這個測試結果更細化了不同框架間因實現思路不同帶來的不同表現，不過整體來看，各個框架差距真的不大，這麼極端的性能測試都難以拉開質的差距。

最後還是想提一下，前端框架自從mvvm橫空出世到現在，實現思路已經被大家都摸得差不多了，無非在幾個思路中做取捨做組合，不知道啥時候會有新思想引入進來，期待。

在當前的前端需求以及三大框架的成熟度上來看，基本上沒有多大的必要把運行速度作為衡量三大框架的主要指標了，但是開發速度和後期維護成本要看項目具體情況，總結出來一句話：ng是媽，vue是小保姆，react是老婆。

2017年底性能的對比不是放在首位。

就重度依賴vscode的用戶來說，開發速度，react&>angular&>vue,都加上typescript，速度就差不多了