OneAPM大講堂 | 誰更快？JavaScript 框架性能評(píng)測(cè)

BDEEFE 發(fā)布于2019-08-22 14:01 / 1541人閱讀

摘要：表格底部的減速幾何平均是一項(xiàng)總的性能指標(biāo)，從左至右，依次表明了各個(gè)框架的評(píng)級(jí)。最左端是，表示無框架的實(shí)現(xiàn)，做為一個(gè)參考點(diǎn)。和都是顯著偏慢的框架，兩者給出的性能數(shù)據(jù)也相差無幾。

文章系國內(nèi)領(lǐng)先的 ITOM 管理平臺(tái)供應(yīng)商 OneAPM 編譯呈現(xiàn)。

網(wǎng)頁性能是一個(gè)豐富且又復(fù)雜的話題。在本帖中，我們會(huì)將討論的范圍局限在前端 JavaScript 框架上，探究相對(duì)于另外一種框架而言，使用當(dāng)前的框架會(huì)如何影響您的應(yīng)用程序的性能。我們會(huì)特別關(guān)注兩點(diǎn)：

(1)某種框架要使用多長的時(shí)間來更新用戶界面

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

在過去幾年中，我所使用的這些數(shù)據(jù)一直來源于 Stefan Krause 的 js-framework-benchmark。資源很好，但也有點(diǎn)復(fù)雜了。僅關(guān)注部分結(jié)果應(yīng)該會(huì)更簡(jiǎn)單一些，而本文中我們也正是這樣做的。建議您看看 Stefan 所構(gòu)建的工具，自己先深入了解一下這些數(shù)據(jù)，尤其是如果下面的圖片中沒有你最鐘意的框架的話。這些資源可以從 Stefan 的網(wǎng)站上獲取(他已測(cè)試過 40 多個(gè)框架)。

另外需要注意的是：

這些只是初步的統(tǒng)計(jì)結(jié)果，使用時(shí)需謹(jǐn)慎(比如，它們可能來自不同的瀏覽器版本)。

請(qǐng)留意這個(gè)問題。

窺探數(shù)字
第一組要關(guān)注的結(jié)果是每一種框架需要多長的時(shí)間在一個(gè)大型表格上進(jìn)行各種操作，例如創(chuàng)建行，刪除行等等。重要的一點(diǎn)是，這些是有鍵框架的數(shù)據(jù)結(jié)果。以下是來自 Stefan 站點(diǎn)的解釋：

有鍵的實(shí)現(xiàn)通過設(shè)定鍵值在域數(shù)據(jù)和 dom 元素之間創(chuàng)建了某種關(guān)聯(lián)。如果數(shù)據(jù)變更了，與該鍵關(guān)聯(lián)的 dom 元素也會(huì)被更新。因此，往數(shù)據(jù)列表里增添或刪除元素會(huì)導(dǎo)致 dom 發(fā)生相應(yīng)的變化。

在下圖中，越大的數(shù)字表示框架執(zhí)行任務(wù)越慢。表格底部的“減速幾何平均“是一項(xiàng)總的性能指標(biāo)，從左至右，依次表明了各個(gè)框架的評(píng)級(jí)。最左端是 vanillajs ，表示無框架的實(shí)現(xiàn)，做為一個(gè)參考點(diǎn)。

如您所見，這里我囊括了大部分流行的前端框架，以及一些不太有名，但是非常有趣的框架。 Preact (一個(gè)非常流行的框架)和 Inferno 具有與 React 非常類似的應(yīng)用編程接口(API)，所以我也將他們包含了進(jìn)來。如果你的團(tuán)隊(duì)正在使用 React 搭建對(duì)性能要求很高的應(yīng)用，那他們或許是不錯(cuò)的選擇。另外要注意的是，有鍵框架得出的結(jié)果通常會(huì)比較慢一些，因?yàn)榭蚣芤瓿筛嗟娜蝿?wù)。

在這些最流行的框架中，Vue 看起來相當(dāng)出色。Angular 和 React 都是顯著偏慢的框架，兩者給出的性能數(shù)據(jù)也相差無幾。Inferno 的庫是其中的佼佼者。作為題外話，Inferno 的作者 Dominic Gannaway 新近被 Facebook 聘用，參與到 React 團(tuán)隊(duì)中。

現(xiàn)在來看一些無鍵框架的統(tǒng)計(jì)結(jié)果：

需要注意幾點(diǎn)。首先，這里列出的框架數(shù)量要少一些，因?yàn)椴⒎敲恳环N框架都有無鍵的結(jié)果。最快的要數(shù) Svelte，這種框架很有趣，采用不同的方式實(shí)現(xiàn)，你也應(yīng)該對(duì)其一探究竟。

在開始后續(xù)的話題之前，如果不提一提高居榜首的 Surplus (由 Adam Haile 開發(fā))，那未免顯得有些失職。它在有鍵和無鍵的測(cè)試結(jié)果中都脫穎而出。另外，還有其他一些表現(xiàn)優(yōu)異的框架包括 petit-dom 和 dio ，我沒有將它們列在上面是因?yàn)槲蚁胗酶嗟钠懻撟钍軞g迎的那些庫和框架。如果你查看結(jié)果統(tǒng)計(jì)表，你很快會(huì)被這龐大的統(tǒng)計(jì)數(shù)據(jù)搞得沉重不堪。因此對(duì)其做一些修正，讓事情變得可控，以更好地達(dá)到我們的目的。

啟動(dòng)指標(biāo)
之前的結(jié)果關(guān)注完全加載頁面以及在大型表格上執(zhí)行操作時(shí)框架的執(zhí)行速度。下面的一組數(shù)據(jù)則是從另一個(gè)不同的視角來衡量框架的性能——下載，解析和編譯所耗費(fèi)的時(shí)間。

這些統(tǒng)計(jì)值可以告訴我們，用戶需要等待多長的時(shí)間后加載的頁面才能開始正常工作。通常來講，要下載的 JavaScript 越多，瀏覽器需要解析和編譯的代碼量越大，所需要的時(shí)間就越長。

同樣的，這些統(tǒng)計(jì)結(jié)果也是分為有鍵的和無鍵的。我們先來看看有鍵的統(tǒng)計(jì)結(jié)果：

這些用于評(píng)級(jí)的指標(biāo)值并不能很方便地說明問題，但通常而言，綠色代表較好，紅色代表遜色。同樣地， Inferno 表現(xiàn)優(yōu)異，Svelte 和 Preact 也相當(dāng)出色。在這些最受歡迎的框架中，Vue 表現(xiàn)最好，而 Ember 則墊底榜單，落后于其他的對(duì)手。

現(xiàn)在來看看無鍵的統(tǒng)計(jì)結(jié)果：

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

后續(xù)思考
一個(gè)月前，在讀了 Addy Osmani 所著的 The Cost of JavaScript 一書后，我腦海里便萌生了撰寫該文的念頭。他分享的一張圖表給了我啟示。該圖展示了在不同的移動(dòng)設(shè)備上，一個(gè) 250KB 用 gzip 壓縮的(未解壓縮時(shí)為 1MB ) JavaScript 包需要花費(fèi)多長時(shí)間完成解析。圖中特別標(biāo)出了平均設(shè)備的統(tǒng)計(jì)值，如下所示：

前端的 JavaScript 框架是一項(xiàng)引人關(guān)注的工程技術(shù)。它們很復(fù)雜，且不容易做好。針對(duì)特定的項(xiàng)目使用哪一種框架常常也很難抉擇，其中有許多需要權(quán)衡的因素。例如，像 React 這樣的框架具有一個(gè)大型的生態(tài)系統(tǒng)，通過提供許多第三方的庫和豐富的培訓(xùn)資料，以及其他一些優(yōu)勢(shì)，可以加速你的項(xiàng)目進(jìn)度。但如果你的項(xiàng)目是針對(duì) 2G 網(wǎng)絡(luò)用戶的，React 還會(huì)是最佳的選擇嗎?答案也許是否定的。

判斷哪一種框架會(huì)工作得最好最終都取決于項(xiàng)目需求，以及構(gòu)建項(xiàng)目的團(tuán)隊(duì)。希望本文所展示的結(jié)果能夠給讀者的思考帶來一些源泉。

Browser Insight 是一個(gè)基于真實(shí)用戶的 Web 前端性能監(jiān)控平臺(tái)，能夠幫大家定位網(wǎng)站性能瓶頸，網(wǎng)站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術(shù)文章，請(qǐng)?jiān)L問 OneAPM 官方技術(shù)博客。

http://blog.oneapm.com/apm-te...