React 與angular 性能測試對比？

02-05

你好，幫忙看下這個性能測試的例子，我在本地測試了很多次，他們的時間都差不多，而這個例子相差那麼多,這個例子的看的是總時間吧（angular用1.35s，react 320ms），那麼假如我在用chrome的timeline監測reactjs運行時，我等待一會這個時間就會變長啊，而這個實例就是看總時間，這個怎麼感覺不對啊，我在網上搜了沒有關於這個性能測試的例子就找到這一個，給推薦一個react 與原生dom 或與angular對比性能的例子，謝謝。
點擊下面的鏈接是我測試例子地址 ：我使用頁面最後面的代碼測試的，下面有chrome timeline 的對比圖。使用React提高Angular的渲染性能(譯)

TodoMVC Benchmark

Anguar 1.x 的話有很多的性能優化方法，React 的話倒是各種寫法都差不多。

Angular 1.x 性能的話很大程度上看使用者對特定場景的了解和優化（所以當然也要看場景本身）。

另外，Angular 2.0 的性能基本在任何場景都可以吊打 React 和大部分前端框架，有興趣可以了解下。

https://www.youtube.com/watch?v=XQM0K6YG18slist=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7index=33 可以直接從16分開始看，要看完。

angular是深度框架，框架會比較大。angular有自己的路由，數據保存、讀取的方法，因此比較完善。

React是為較輕量級的，如果路由需要React-Router配置，複雜的數據操作最好基於Flux（可以認為是一種模式）去開發，React 提供虛擬Dom，渲染dom只要出發 state的修改既可以完成。react較為輕量，因此沒有封裝好的插件，可以看一下別人開發的插件

推薦一個React組件庫（目前還在完善，來源自項目，基於webpack模塊化開發）

最後說一下用了來個框架後的感覺：用angular後，因為系統越來越複雜，開發到後面整個Control會寫得非常複雜，維護起來非常不方便。

用React呢？即使是系統越來越複雜了，還是可以把複雜的模塊拆分成多個模塊，然後用Import的方法進行引用。

然後就是谷歌內部很少有用Angular開發，而Facebook把React的作為官方的開發框架。所以如果遇到問題，反饋給他們的話相信還是React會處理得比較及時吧！

http://tylors.github.io/js-repaint-perfs/

這周我嘗試了兩個multi-select dropdown，分別是

A - JedWatson/react-select · GitHub

B - AngularJs MultiSelect

測試的數據是4009個選項。

你猜怎麼著，B花兩三秒才完成渲染，A直接把瀏覽器卡死，根本彈不出來。

所以盡信書不如無書。

React 帶來的性能提升不是像把CPU主頻從1.0 升到2.0的那種絕對的提升，但起碼體現在以下方面

1. 能在簡化程序邏輯的同時保持性能，比如說你想添加一個item去一個list里，如果用傳統的方法你要首先定位添加的位置（dom）, 再append, 但用react的方式，你只需在把model update 好就行， render的邏輯無需改變

2. 能讓經驗尚淺的程序猿按比較簡單的Pattern寫出性能可接受的程序，想想為什麼Java要引入GC而不是讓程序猿直接管理內存

在用React第三方控制項時，要留意它到底是個Wrapper還是Pure React component, 如果是前者的話和React沒太大關係

react的性能公認的肯定高於angular的, 但是鑒於現在網站性能瓶頸不在DOM rendering上, 所以選擇什麼front end框架要看項目本身的code base