OneAPM大講堂 | 誰更快？JavaScript 框架效能評測

文章系國內領先的 ITOM 管理平臺供應商 OneAPM 編譯呈現。

網頁效能是一個豐富且又複雜的話題。在本帖中，我們會將討論的範圍侷限在前端 JavaScript 框架上，探究相對於另外一種框架而言，使用當前的框架會如何影響您的應用程式的效能。我們會特別關注兩點：

(1)某種框架要使用多長的時間來更新使用者介面

(2)為了讓框架正常工作，下載和解析所需要的軟體包所花費的時間

在過去幾年中，我所使用的這些資料一直來源於 Stefan Krause 的 js-framework-benchmark。資源很好，但也有點複雜了。僅關注部分結果應該會更簡單一些，而本文中我們也正是這樣做的。建議您看看 Stefan 所構建的工具，自己先深入瞭解一下這些資料，尤其是如果下面的圖片中沒有你最鐘意的框架的話。這些資源可以從 Stefan 的網站上獲取(他已測試過 40 多個框架)。

另外需要注意的是：

這些只是初步的統計結果，使用時需謹慎(比如，它們可能來自不同的瀏覽器版本)。

請留意這個問題。

窺探數字 第一組要關注的結果是每一種框架需要多長的時間在一個大型表格上進行各種操作，例如建立行，刪除行等等。重要的一點是，這些是有鍵框架的資料結果。以下是來自 Stefan 站點的解釋：

有鍵的實現通過設定鍵值在域資料和 dom 元素之間建立了某種關聯。如果資料變更了，與該鍵關聯的 dom 元素也會被更新。因此，往資料列表裡增添或刪除元素會導致 dom 發生相應的變化。

在下圖中，越大的數字表示框架執行任務越慢。表格底部的“減速幾何平均“是一項總的效能指標，從左至右，依次表明了各個框架的評級。最左端是 vanillajs ，表示無框架的實現，做為一個參考點。

如您所見，這裡我囊括了大部分流行的前端框架，以及一些不太有名，但是非常有趣的框架。 Preact (一個非常流行的框架)和 Inferno 具有與 React 非常類似的應用程式設計介面(API)，所 以我也將他們包含了進來。如果你的團隊正在使用 React 搭建對效能要求很高的應用，那他們或許是不錯的選擇。另外要注意的是，有鍵框架得出的結果通常會比較慢一些，因為框架要完成更多的任務。

在這些最流行的框架中，Vue 看起來相當出色。Angular 和 React 都是顯著偏慢的框架，兩者給出的效能資料也相差無幾。Inferno 的庫是其中的佼佼者。作為題外話，Inferno 的作者 Dominic Gannaway 新近被 Facebook 聘用，參與到 React 團隊中。

現在來看一些無鍵框架的統計結果：

需要注意幾點。首先，這裡列出的框架數量要少一些，因為並非每一種框架都有無鍵的結果。最快的要數 Svelte，這種框架很有趣，採用不同的方式實現，你也應該對其一探究竟。

在開始後續的話題之前，如果不提一提高居榜首的 Surplus (由 Adam Haile 開發)，那未免顯得有些失職。它在有鍵和無鍵的測試結果中都脫穎而出。另外，還有其他一些表現優異的框架包括 petit-dom 和 dio ，我沒有將它們列在上面是因為我想用更多的篇幅討論最受歡迎的那些庫和框架。如果你檢視結果統計表，你很快會被這龐大的統計資料搞得沉重不堪。因此對其做一些修正，讓事情變得可控，以更好地達到我們的目的。

啟動指標 之前的結果關注完全載入頁面以及在大型表格上執行操作時框架的執行速度。下面的一組資料則是從另一個不同的視角來衡量框架的效能——下載，解析和編譯所耗費的時間。

這些統計值可以告訴我們，使用者需要等待多長的時間後載入的頁面才能開始正常工作。通常來講，要下載的 JavaScript 越多，瀏覽器需要解析和編譯的程式碼量越大，所需要的時間就越長。

同樣的，這些統計結果也是分為有鍵的和無鍵的。我們先來看看有鍵的統計結果：

這些用於評級的指標值並不能很方便地說明問題，但通常而言，綠色代表較好，紅色代表遜色。同樣地， Inferno 表現優異，Svelte 和 Preact 也相當出色。在這些最受歡迎的框架中，Vue 表現最好，而 Ember 則墊底榜單，落後於其他的對手。

現在來看看無鍵的統計結果：

在這一組中，Svelte 表現得非常快速且輕量級。其 total byte weight 值甚至比純 vanilla JavaScript 還低。我告訴過你，這是一種非常有趣的框架，沒錯吧!

後續思考 一個月前，在讀了 Addy Osmani 所著的 The Cost of JavaScript 一書後，我腦海裡便萌生了撰寫該文的念頭。他分享的一張圖表給了我啟示。該圖展示了在不同的移動裝置上，一個 250KB 用 gzip 壓縮的(未解壓縮時為 1MB ) JavaScript 包需要花費多長時間完成解析。圖中特別標出了平均裝置的統計值，如下所示：

前端的 JavaScript 框架是一項引人關注的工程技術。它們很複雜，且不容易做好。針對特定的專案使用哪一種框架常常也很難抉擇，其中有許多需要權衡的因素。例如，像 React 這樣的框架具有一個大型的生態系統，通過提供許多第三方的庫和豐富的培訓資料，以及其他一些優勢，可以加速你的專案進度。但如果你的專案是針對 2G 網路使用者的，React 還會是最佳的選擇嗎?答案也許是否定的。

判斷哪一種框架會工作得最好最終都取決於專案需求，以及構建專案的團隊。希望本文所展示的結果能夠給讀者的思考帶來一些源泉。

Browser Insight 是一個基於真實使用者的 Web 前端效能監控平臺，能夠幫大家定位網站效能瓶頸，網站加速效果視覺化；支援瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問 OneAPM 官方技術部落格。

來源：http://blog.oneapm.com/apm-tech/806.html