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

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

(1)某種框架要使用多長(zhǎng)的時(shí)間來(lái)更新用戶界面

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

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

另外需要注意的是：

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

請(qǐng)留意這個(gè)問(wèn)題璧尸。

窺探數(shù)字

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

有鍵的實(shí)現(xiàn)通過(guò)設(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 次企，表示無(wú)框架的實(shí)現(xiàn)，做為一個(gè)參考點(diǎn)潜圃。

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

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

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

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

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

啟動(dòng)指標(biāo)

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

這些統(tǒng)計(jì)值可以告訴我們睹簇，用戶需要等待多長(zhǎng)的時(shí)間后加載的頁(yè)面才能開(kāi)始正常工作奏赘。通常來(lái)講，要下載的 JavaScript 越多太惠，瀏覽器需要解析和編譯的代碼量越大磨淌，所需要的時(shí)間就越長(zhǎng)。

同樣的凿渊，這些統(tǒng)計(jì)結(jié)果也是分為有鍵的和無(wú)鍵的梁只。我們先來(lái)看看有鍵的統(tǒng)計(jì)結(jié)果：

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

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

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

后續(xù)思考

一個(gè)月前免胃，在讀了 Addy Osmani 所著的 The Cost of JavaScript 一書(shū)后，我腦海里便萌生了撰寫(xiě)該文的念頭惫撰。他分享的一張圖表給了我啟示羔沙。該圖展示了在不同的移動(dòng)設(shè)備上，一個(gè) 250KB 用 gzip 壓縮的(未解壓縮時(shí)為 1MB ) JavaScript 包需要花費(fèi)多長(zhǎng)時(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)，通過(guò)提供許多第三方的庫(kù)和豐富的培訓(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é)果能夠給讀者的思考帶來(lái)一些源泉汽馋。

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

來(lái)源：http://blog.oneapm.com/apm-tech/806.html