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) |
啟動時間
| 測試專案 | 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) |
總結
可以看出，在各個方面vanillajs都是勝出的，想要得到更好的效能優化，不僅僅是選擇框架。還需要思考怎樣更好的使用vanillajs，貼近瀏覽器來思考操作，從框架更新原理來思考邏輯，才能得到更好的效能。