資訊專欄INFORMATION COLUMN
摘要：表格底部的減速幾何平均是一項總的性能指標，從左至右，依次表明了各個框架的評級。最左端是，表示無框架的實現(xiàn)，做為一個參考點。和都是顯著偏慢的框架，兩者給出的性能數(shù)據(jù)也相差無幾。
文章系國內領先的 ITOM 管理平臺供應商 OneAPM 編譯呈現(xiàn)。
網頁性能是一個豐富且又復雜的話題。在本帖中，我們會將討論的范圍局限在前端 JavaScript 框架上，探究相對于另外一種框架而言，使用當前的框架會如何影響您的應用程序的性能。我們會特別關注兩點：
(1)某種框架要使用多長的時間來更新用戶界面
(2)為了讓框架正常工作，下載和解析所需要的軟件包所花費的時間
在過去幾年中，我所使用的這些數(shù)據(jù)一直來源于 Stefan Krause 的 js-framework-benchmark。資源很好，但也有點復雜了。僅關注部分結果應該會更簡單一些，而本文中我們也正是這樣做的。建議您看看 Stefan 所構建的工具，自己先深入了解一下這些數(shù)據(jù)，尤其是如果下面的圖片中沒有你最鐘意的框架的話。這些資源可以從 Stefan 的網站上獲取(他已測試過 40 多個框架)。
另外需要注意的是：
這些只是初步的統(tǒng)計結果，使用時需謹慎(比如，它們可能來自不同的瀏覽器版本)。
請留意這個問題。
窺探數(shù)字
第一組要關注的結果是每一種框架需要多長的時間在一個大型表格上進行各種操作，例如創(chuàng)建行，刪除行等等。重要的一點是，這些是有鍵框架的數(shù)據(jù)結果。以下是來自 Stefan 站點的解釋：
有鍵的實現(xiàn)通過設定鍵值在域數(shù)據(jù)和 dom 元素之間創(chuàng)建了某種關聯(lián)。如果數(shù)據(jù)變更了，與該鍵關聯(lián)的 dom 元素也會被更新。因此，往數(shù)據(jù)列表里增添或刪除元素會導致 dom 發(fā)生相應的變化。
在下圖中，越大的數(shù)字表示框架執(zhí)行任務越慢。表格底部的“減速幾何平均“是一項總的性能指標，從左至右，依次表明了各個框架的評級。最左端是 vanillajs ，表示無框架的實現(xiàn)，做為一個參考點。
如您所見，這里我囊括了大部分流行的前端框架，以及一些不太有名，但是非常有趣的框架。 Preact (一個非常流行的框架)和 Inferno 具有與 React 非常類似的應用編程接口(API)，所 以我也將他們包含了進來。如果你的團隊正在使用 React 搭建對性能要求很高的應用，那他們或許是不錯的選擇。另外要注意的是，有鍵框架得出的結果通常會比較慢一些，因為框架要完成更多的任務。
在這些最流行的框架中，Vue 看起來相當出色。Angular 和 React 都是顯著偏慢的框架，兩者給出的性能數(shù)據(jù)也相差無幾。Inferno 的庫是其中的佼佼者。作為題外話，Inferno 的作者 Dominic Gannaway 新近被 Facebook 聘用，參與到 React 團隊中。
現(xiàn)在來看一些無鍵框架的統(tǒng)計結果：
需要注意幾點。首先，這里列出的框架數(shù)量要少一些，因為并非每一種框架都有無鍵的結果。最快的要數(shù) Svelte，這種框架很有趣，采用不同的方式實現(xiàn)，你也應該對其一探究竟。
在開始后續(xù)的話題之前，如果不提一提高居榜首的 Surplus (由 Adam Haile 開發(fā))，那未免顯得有些失職。它在有鍵和無鍵的測試結果中都脫穎而出。另外，還有其他一些表現(xiàn)優(yōu)異的框架包括 petit-dom 和 dio ，我沒有將它們列在上面是因為我想用更多的篇幅討論最受歡迎的那些庫和框架。如果你查看結果統(tǒng)計表，你很快會被這龐大的統(tǒng)計數(shù)據(jù)搞得沉重不堪。因此對其做一些修正，讓事情變得可控，以更好地達到我們的目的。
啟動指標
之前的結果關注完全加載頁面以及在大型表格上執(zhí)行操作時框架的執(zhí)行速度。下面的一組數(shù)據(jù)則是從另一個不同的視角來衡量框架的性能——下載，解析和編譯所耗費的時間。
這些統(tǒng)計值可以告訴我們，用戶需要等待多長的時間后加載的頁面才能開始正常工作。通常來講，要下載的 JavaScript 越多，瀏覽器需要解析和編譯的代碼量越大，所需要的時間就越長。
同樣的，這些統(tǒng)計結果也是分為有鍵的和無鍵的。我們先來看看有鍵的統(tǒng)計結果：
這些用于評級的指標值并不能很方便地說明問題，但通常而言，綠色代表較好，紅色代表遜色。同樣地， Inferno 表現(xiàn)優(yōu)異，Svelte 和 Preact 也相當出色。在這些最受歡迎的框架中，Vue 表現(xiàn)最好，而 Ember 則墊底榜單，落后于其他的對手。
現(xiàn)在來看看無鍵的統(tǒng)計結果：
在這一組中，Svelte 表現(xiàn)得非?？焖偾逸p量級。其 total byte weight 值甚至比純 vanilla JavaScript 還低。我告訴過你，這是一種非常有趣的框架，沒錯吧!
后續(xù)思考
一個月前，在讀了 Addy Osmani 所著的 The Cost of JavaScript 一書后，我腦海里便萌生了撰寫該文的念頭。他分享的一張圖表給了我啟示。該圖展示了在不同的移動設備上，一個 250KB 用 gzip 壓縮的(未解壓縮時為 1MB ) JavaScript 包需要花費多長時間完成解析。圖中特別標出了平均設備的統(tǒng)計值，如下所示：
前端的 JavaScript 框架是一項引人關注的工程技術。它們很復雜，且不容易做好。針對特定的項目使用哪一種框架常常也很難抉擇，其中有許多需要權衡的因素。例如，像 React 這樣的框架具有一個大型的生態(tài)系統(tǒng)，通過提供許多第三方的庫和豐富的培訓資料，以及其他一些優(yōu)勢，可以加速你的項目進度。但如果你的項目是針對 2G 網絡用戶的，React 還會是最佳的選擇嗎?答案也許是否定的。
判斷哪一種框架會工作得最好最終都取決于項目需求，以及構建項目的團隊。希望本文所展示的結果能夠給讀者的思考帶來一些源泉。
Browser Insight 是一個基于真實用戶的 Web 前端性能監(jiān)控平臺，能夠幫大家定位網站性能瓶頸，網站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問 OneAPM 官方技術博客。
http://blog.oneapm.com/apm-te...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/92778.html
摘要：技巧評估局部變量主要針對而言，由于局部變量的查找是從最特定作用域到最大作用域，且可以通過多個域層級，所以這種查找會導致查詢到通用的結果。 文章系國內領先的 ITOM 管理平臺供應商 OneAPM 編譯呈現(xiàn)。 您是網站管理員還是網頁開發(fā)人員?想創(chuàng)建超快速的網站嗎? 今天我們來看看 JavaScript，這項神奇而又復雜的技術。它使網站內容更加豐富，但常常出現(xiàn)的運行性能問題又降低了用戶的體...
摘要：啟動性能瓶頸分析與解決方案翻譯自的，從屬于筆者的前端入門與工程實踐。我們必須要清醒地認識到全面評測以挖掘出真正性能瓶頸的重要性。這可能是最佳的方式了，類似于這樣的模式鼓勵基于路由的分組，目前被與廣泛使用。 JavaScript 啟動性能瓶頸分析與解決方案 翻譯自 Addy Osmani 的 JavaScript Start-up Performance，從屬于筆者的Web 前端入門與工...
摘要：對異常的的收集，其性能影響要比單純捕獲并拋出異常高出倍。但我們應該對代碼中拋出的異常數(shù)量進行跟蹤，它們可能導致顯著的性能影響。 在對我們的客戶做技術支持時，我們常常會看到很多客戶根本沒意識到的異常。在消除了這些異常之后，代碼運行速度與以前相比大幅提升。這讓我們產生一種猜測，就是在代碼里面使用異常會帶來顯著的性能開銷。因為異常是錯誤情況處理的重要組成部分，摒棄是不太可能的,所以我們需要衡...
摘要：最受歡迎的個庫連續(xù)兩年，二度成為中最受歡迎的庫。此外，谷歌的開源項目來勢洶洶，勇奪第三名，該庫包含了一系列谷歌內含的核心庫。在本次最受歡迎的個庫中，個庫與相關。 【編者按】本文作者為 Henn Idan，主要介紹基于 GitHub 中的數(shù)據(jù)分析，得出的2016年度最受歡迎的100個 Java 庫。本文系國內 ITOM 管理平臺 OneAPM 編譯呈現(xiàn)。 誰拔得頭籌？誰又落于人后？我們分...
摘要：谷歌，，，雅虎和最近因世界杯獲得龐大觀眾數(shù)量的都在使用。因此，數(shù)據(jù)庫服務器的能力是毋庸置疑的。微軟的服務器，服務器以及未來的更新價格昂貴。更依賴于微軟數(shù)量有限的開發(fā)者做出的改進和更新。 【編者按】本文主要針對開源 PHP 和非開源的 ASP.NET 在性能、成本、可擴展性，技術支持和復雜性等方面進行比較。 在網上論壇，總是有成百上千的文章和帖子在討論 PHP 和 ASP.NET，究竟誰...
閱讀 1443·2021-11-24 09:39
閱讀 1413·2021-11-04 16:12
閱讀 2781·2021-09-24 09:47
閱讀 3400·2021-09-01 10:50
閱讀 1538·2019-08-30 15:55
閱讀 1483·2019-08-30 15:43
閱讀 702·2019-08-30 11:08
閱讀 3638·2019-08-23 18:33
