2017 JavaScript 主流框架性能總結

update: 更新了圖表

前言

做爲一名JavaScript開發者，你也許已經接觸到了衆多框架，甚至在衆多框架之中你已經熟練掌握了一兩個。以前我偏心框架，它下降了個人開發難度。可是在經歷了那麼多優秀的前端的概念變革，從Virtual-DOM到狀態管理，我也在想，對於框架的自己，它們的性能到底如何，對於不一樣類型的操做的開銷又是怎樣的，本文將對主流框架進行性能比對，而且總結之間的性能差別。

使用環境：MacBook Pro 15 (2,5 GHz i7, 16 GB RAM, OSX 10.13.1, Chrome 62.0.3202.94 (64-bit))

將要上場的框架們

• vanillajs - 主神的存在，無處不在，無所不能的框架，大量運用於各類主流網站的開發
• react - 臉書的兒子，對外一直宣稱本身的沒滿歲，在你們認爲它沒但願長到一歲的時候，一會兒長到了十五歲
• angularJS - 谷歌爸爸的長子，雖然還在維護，可是由於弟弟們的誕生，熱度大不如前
• angular - 谷歌爸爸在生了長子後，以爲這屆兒子不行，我要再造幾個，如今編號第五的老四剛剛誕生
• vue - 來自東方的神祕力量，框架的後起之秀，不過老是會和以上的框架們比較，構成了前端娛樂圈主要戲碼

在使用KEY的狀況下

把DOM元素和數據聯繫的時候，數據變化，key也會更新。

（數據表示：平均ms±誤差ms(相對於最快的倍數)）

測試項目	vanillajs	vue-v2.5.3	angular-v5.0.0	react-v16.1.0	angular-v1.6.3
建立行： 在頁面載入以後建立1000行內容。	137.8±9.9(1.0)	169.2±3.6(1.2)	185.7±7.8(1.3)	201.2±12.1(1.5)	222.9±8.1(1.6)
更新行： 更新全部1000行的內容。	155.7±5.4(1.0)	161.8±3.9(1.0)	179.3±6.5(1.2)	169.0±4.3(1.1)	232.3±8.7(1.5)
部分更新： 更新一萬行的表格中十的倍數行的內容	76.5±4.8(1.0)	168.1±7.4(2.3)	73.5±4.9(1.0)	90.9±3.3(1.2)	87.1±5.3(1.2)
選擇行： 鼠標點擊一行高亮的時間	10.8±3.5(1.0)	9.8±2.5(1.0)	7.6±4.0(1.0)	12.4±4.1(1.0)	10.0±4.7(1.0)
交換行： 交換一千行的表格中的兩行	18.3±4.6(1.0)	19.0±2.8(1.0)	118.5±2.8(6.5)	121.8±4.2(6.7)	125.9±5.3(6.9)
刪除行： 刪除一行內容	43.1±1.6(1.0)	52.5±1.8(1.2)	46.1±2.6(1.1)	51.5±2.0(1.2)	48.6±2.5(1.1)
建立多行： 建立10000行內容	1,374.5±33.3(1.0)	1,521.4±55.7(1.1)	1,682.0±53.1(1.2)	2,033.7±32.0(1.5)	2,112.0±77.7(1.5)
附加行： 在10000行的表格後附加上1000行	217.4±7.3(1.0)	338.4±10.3(1.6)	257.6±11.1(1.2)	271.8±9.9(1.3)	371.6±60.4(1.7)
清空行： 清空一萬行的表格的內容	177.1±10.2(1.0)	240.9±11.4(1.4)	360.3±16.4(2.0)	224.4±6.0(1.3)	517.8±62.0(2.9)

在開銷比較大的表格操做上，交換行的開銷是各個框架的重災區，可是由於底層diff算法深度不一樣的關係，vue在此項表現上比較好，在事件處理機制上，框架表現出了對於事件的優化，而react由於大量附加事件邏輯的關係，表現略遜一籌。總的操做性能比上，以vanillajs爲基準，依次爲vue(1.27)，angularJS(1.47)，react(1.49)，angular(1.77)。

啓動時間

測試項目	vanillajs	vue-v2.5.3	angular-v5.0.0	react-v16.1.0	angular-v1.6.3
當CPU和網絡狀況都很空閒的時候的啓動時間	38.8±2.9(1.0)	55.4±1.6(1.4)	97.4±3.5(2.5)	58.4±1.1(1.5)	96.9±23.9(2.5)
載入框架全部腳本所須要的時間	4.0±0.3(1.0)	20.8±0.7(1.3)	45.9±1.6(2.9)	22.1±0.6(1.4)	56.8±18.4(3.6)
主線程（樣式,佈局等)的花銷時間	162.1±2.6(1.0)	174.2±2.5(1.1)	216.8±4.6(1.3)	176.9±2.3(1.1)	224.0±52.1(1.4)
通過網絡傳輸全部資源的總大小（byte）	163,967.0(1.0)	227,410.0(1.4)	304,139.0(1.9)	263,076.0(1.6)	337,157.0(2.1)

在啓動時間方面，明顯vue和react更加快，angular兄弟由於自己框架比較龐大，因此腳本在載入，啓動時間，腳本大小等都不如其餘的框架。

內存佔用

測試項目	vanillajs	vue-v2.5.3	angular-v5.0.0	react-v16.1.0	angular-v1.6.3
頁面加載後的內存佔用	3.0±0.1(1.0)	3.6±0.1(1.2)	6.7±0.1(2.2)	3.7±0.1(1.2)	4.3±0.1(1.4)
增長1000行後的內存佔用	3.7±0.1(1.0)	7.2±0.0(2.0)	10.5±0.0(2.9)	7.6±0.0(2.1)	11.9±0.0(3.2)
更新1000行中10的倍數行的內存佔用	3.7±0.1(1.0)	7.3±0.0(2.0)	10.6±0.0(2.9)	8.5±0.0(2.3)	11.9±0.0(3.2)
替換1000行內容5次後的內存佔用	3.6±0.1(1.0)	7.3±0.0(2.0)	10.8±0.0(3.1)	9.0±0.0(2.5)	12.4±0.0(3.5)
建立1000行內容5次後的內存佔用	3.2±0.0(1.0)	3.8±0.0(1.2)	7.1±0.0(2.2)	4.7±0.0(1.5)	4.7±0.0(1.5)

在內存佔用上，angular兄弟依然都是偏大的，可是angularJS的增加趨勢仍是算比較低的，而angular的增加趨勢也比較大了，vue的增加趨勢也比較穩定，可是react在大量替換和更新操做上，開銷增加較大，穩定性不強。

總結

能夠看出，在各個方面vanillajs都是勝出的，想要獲得更好的性能優化，不單單是選擇框架。還須要思考怎樣更好的使用vanillajs，貼近瀏覽器來思考操做，從框架更新原理來思考邏輯，才能獲得更好的性能。

數據來源：js-framework-benchmark