Home Blogs 優化React,Angular或Vue單頁應用以提高性能
Applications

優化React,Angular或Vue單頁應用以提高性能

About The Author

Outline

在這篇文章中,我們將瞭解Vue,React和Angular在性能方面的比較,以及如何優化在這些前端框架上執行的電子商務水療,以獲得最佳用戶體驗。

Angular,React和Vue在性能方面的比較

執行一個快速的網站通過更好的SEO排名,更多訪客,更長的會話期,從而實現利潤增長, 更多收入。 許多瞭解速度的電子商務領導者 已經轉向無外設商務架構,從而實現了現代前端的採用,如先進的Web應用程式和水療中心。 輕量級SPA前端越來越受歡迎,因爲它們是解決現代電子商務平臺固有的各種性能問題的可靠方式,因此營運商可以提供快如閃電的店面。

嗯,這就是理論。 爲了驗證這些崇高的說法,我們進行了小型內部績效分析。 爲此,我們測試了近2,000個在領先前端框架上執行的流行電子商務網站,並根據Lighthouse 6得分評估了它們的性能。 調查結果令人驚訝—測試過的水療前端的燈塔平均得分只有24分,中位數爲19分(100分)! 低聽起來,這仍然比美國領先的500家網際網路零售商的平均得分高26 % ,按收入.

Vue.js網站是最快的,平均得分爲27分,中位值爲20。 Angular網站的平均得分爲23分;然而,他們的性能得分更分散,中位數僅爲18分。 React網站是測試速度最慢的網站,平均Lighthouse得分爲22分,中位值爲18分。 這是令人驚訝的,特別是因爲框架被一些最大的玩家使用,包括PayPal,Grammelly和Vimeo等網站。

測試的結論相當明確—雖然水療被認爲比傳統網站快,但仍有改進的餘地。 此外,Google Crux和其他測量工具不會跟蹤單頁應用程式(SPA)的頁面轉換,錯誤地將它們誤導爲比它們慢得多,並懲罰他們的得分。 我們在部落格上的另一篇文章中詳細介紹了這個問題。

啓動時間和執行時性能對Lighthouse得分的影響

應用程式的性能由兩個指標定義: 啓動時間執行時性能。 代碼包的大小主要影響前者,即應用程式代碼和框架代碼的組合。 執行時性能取決於框架的特定優化功能及其處理DOM操作和更新的方式。

包大小

所有三個框架都具有大小相似的最小代碼包。 儘管框架的捆綁包大小會影響啓動時間,但在比較Angular,React和Vue的性能時,指標不應是主要的重點。

更準確地說,角束的大小僅比Vue和React束的大小稍大,而Vue束的大小比React束小一點。 另外,值得注意的是,Angular開發團隊正在穩步優化其(原始碼)代碼包的大小。

請參閱下表以瞭解近似數字。

Angular,React和Vue都提供了出色的執行時性能,每種性能都同樣適合作爲流量較大的複雜,創收網站的主幹。

Lighthouse的TTI和LCP指標

Lighthouse是一款極佳的測試工具,可傳回寶貴的速度見解。 它可識別可能的性能問題,並幫助優化站點的各個方面。 燈塔分數是根據多個指標的加權平均值計算的(請到這裏查看完整的倒數計時)。 儘管如此,從用戶的角度來看,最大的Contentful Paint (LCP),Time to Interactive (TTI)和累積佈局偏移(CLS)很可能是最重要的部分。 TTI和LCP通過感知的負載速度直接連接。

TTI很好地體現了框架包大小對SPA速度的影響,因爲在用戶與應用交互之前,需要對包進行完全評估。 具有較長TTI的站點在載入時將顯示站點的各個部分,但不允許用戶與其交互,這最終可能會導致挫折。

另一方面,LCP指標衡量在顯示器上呈現頁面內容的最大元素之前所需的時間。

Lighthouse與crux現實瀏覽數據

值得注意的是,合成速度測量工具(如燈塔)並不能說明全部情況。 站點速度更多地是指用戶瀏覽站點時站點的”感覺”。 燈塔性能得分是一個很好的參考點,但它有點武斷,很難與現實世界的體驗相聯繫。 例如,就用戶體驗而言,很難將60的性能分數與50的分數相比提高多少。

合成測試也傾向於類比較舊的設備和連接(例如Lighthouse類比3G連接),而實際上,大多數移動用戶都在快速LTE甚至5G網路上。

在特定框架上執行的站點可能會”感覺”更快,但會因其原始性能得分而丟失到其他站點,反之亦然。 這主要是由於每個框架使用特定的技巧(例如懶惰載入)來提高站點對用戶的”感覺”速度。

在接下來的章節中,我們將回顧每個框架爲提高網站性能提供的機會。

角度

Angular使用新的標記和屬性擴展HTML代碼,並解釋屬性以執行數據綁定。

由於其豐富的功能,工作應用程式可能比Vue或React大得多(約500KB),這可能會對性能產生輕微影響。

Angular’s MVC抽象(原始碼)

這裏是角狀的主要好處的一個快速總結。

  • 代碼生成。 Angular爲JavaScript虛擬機生成高度優化的代碼,提供手寫代碼的優勢。 HTML模板與JavaScript相結合,爲在其他框架中實現不可能的優化打開了大門,例如React。
  • 代碼拆分。 得益於組件路由器,Angular應用程式可以快速載入,實現自動代碼拆分。 這樣,用戶就可以載入呈現所需視圖所需的代碼。
  • 真正的DOM。 Angular使用Real DOM;因此,它最適合單頁應用程式,其中內容不時更新,而不是經常更改的應用程式,例如大多數電子商務網站。 操作虛擬DOM的速度要快得多,因爲顯示器上不會繪製任何內容。

反應

React由Facebook創建和開發,是最受歡迎的開源移動應用程式框架之一。 它不提供廣泛的庫;因此,它的大小遠遠小於Angular。

藉助單方向數據,React可以更好地控制項目—在設計應用時,React開發人員可以將子組件嵌套在更高階的父組件中。

React提供了一些有趣的功能,包括:

  • 虛擬DOM: 僅根據需要重新渲染節點。 React將新數據與原始DOM進行比較,並自動更新視圖。 這增強了需要定期更新內容的各種規模應用程式的性能。
  • 單向數據綁定: React使用帶Flux控制頭應用架構的單向數據綁定。 ReactJS幫助更新用戶的視圖,Flux控制應用程式工作流。 虛擬DOM將新數據與原始DOM進行比較,並自動更新視圖,從而增加了優勢。
  • 支援綁定和樹抖動: 最大程度地減少最終用戶的資源負載。
  • 伺服器端渲染(SSR)支援: 在特定實施中提高速度。

與Angular和Vue相比,React採用了某些技術,使最終用戶可以更快地”感覺”頁面。 例如,框架將用戶輸入優先於在頁面上呈現內容。

VUE

VUE速度快且非常小,只有30KB (gzipped),因此首次載入速度更快。 這使得它成爲所有三個框架中最小的一個,並顯著提高了在Vue上執行的網站的性能。

Vue提供:

  • 伺服器端渲染(SSR)
  • 樹抖動
  • 捆綁
  • 虛擬DOM: 項目中的更改不會正確影響DOM。 修改實際DOM是一項資源密集型任務,因此首先將更新應用到虛擬DOM。

請查看 此詳細的基準測試 報告,以比較領先JavaScript框架和庫中的啓動時間,記憶體分配和特定操作持續時間。 與React相比,Vue在記憶體分配和啓動時間方面略好一些,儘管React在執行時速度稍快一些。

Angular和Vue使用HTML模板與JavaScript結合使用。 這爲他們提供了優化反應所不能提供的額外空間。 例如,Vue會跟蹤相關性,以防止子組件的不必要渲染。

Vue vs. React vs. Angular SPA優化

我們知道,基準性能測試和性能得分並不能說明整個情況。 網站速度可能因應用程式大小和優化工作而異。 以下是一些有助於優化Vue,React和Angular水療以提高速度的想法。

1.伺服器端渲染(SSR)

總的來說,將SSR與SPA站點配合使用有四個主要優點:

  • SSR允許您快速載入SPA模板並向用戶顯示內容(儘管用戶可能無法立即與其交互)。 如果沒有SSR,用戶會盯着空顯示器,等待內容載入並在瀏覽器中呈現。
  • SSR減少了最終用戶機器上的負載。
  • 由於谷歌現在可以正確地抓取SPA內容,伺服器端渲染可能不如以前那麼重要。 但使用SSR的好處是,許多其他搜尋引擎仍然無法理解JavaScript,無法正確地爬行大量JavaScript的網站。
  • 社交網路通常無法正確顯示從客戶端呈現的SPA網站共享的內容。 例如,Facebook剪貼簿只依賴伺服器設定的中繼標籤,無法使用用戶端呈現的中繼標籤。 爲了更好地控制通過Open Graph共享SPA網站時的外觀,必須使用SSR。
  • AMP可加快移動設備的首次載入速度,但不允許您使用JavaScript。 不能使AMP對客戶端作出反應,必須在伺服器上完成。 然而,即使SSR已經到位,也有很多圈可以跳過,將React應用轉換爲有效的AMP應用。 幸運的是,一些前端框架,如 React Storefront,可以爲您處理一切。

SSR最適合靜態網站,但Ecommerce SPA網站仍可暫存,並具有正確的基礎設施。 使用Layer0,內容將在動態伺服器端呈現,然後使用我們的CDN AS-JavaScript在邊緣暫存。 這樣,大型數據庫驅動網站(如電子商務水療中心,包含數千頁(如果不是數百萬頁),個性化,實時庫存等)可以讓用戶從登入到結賬的次秒頁面載入感到高興。

CDN AS-JavaScript 服務工作人員(稱爲Layer0 Workers)在訪問者點擊鏈接並將其流式傳輸到瀏覽器之前,可智能地從邊緣獲取動態數據。

Layer0網路和監視工具確保動態數據至少在95%的時間內暫存,從而防止數據庫受到預取創建的額外請求的影響。 這樣,您可以提供次秒頁面載入,爲您的訪客提供從登陸到結帳的無縫體驗。

Layer0網路和監視工具

總的來說,關於SSR功能和詳細文檔,Vue優於React,它需要第三方庫(例如Next.js)來呈現頁面伺服器端。

2.安培

AMP通過簡化HTML並對CSS和JavaScript實施嚴格限制,在移動Web上創建更好,更快的體驗。 這些頁面隨後被暫存並預渲染在Google伺服器上,這使得轉換到您的應用幾乎瞬間。

缺點是它與您編寫PWA/SPA的方式不同,意味着完全重寫應用程式,除非您使用具有內置AMP支援的專用框架(如 React Storefront)。

AMP頁面中有500ms的中位頁面載入量來自Google的SERP。 這些速度是可能的,因爲Google伺服器在單擊AMP頁面鏈接之前將AMP內容預取並預發到用戶的瀏覽器。 普通的電子商務網站從谷歌搜尋(有機和付費)得到了大量的流量,所以這些收益可以產生巨大的影響。

使用AMP的網站也會降低跳出率,因爲通常在等待頁面載入時可能會跳出的使用者現在會獲得極快的體驗。

3.代碼拆分

隨着您繼續添加功能,您的單頁應用程式將隨着時間的推移而增長。 但我們知道每個應用程式都有一些幾乎從未使用過的功能,而且速度不必要地降低。 您應該實施代碼拆分以儘可能快地保持應用程式。

代碼拆分涉及爲應用中的每個頂級組件創建單獨的捆綁包。 對於電子商務SPA,主頁,商品資訊和商品描述頁面將有單獨的捆綁包。 這樣,當用戶通過指向特定產品的鏈接到達您的應用時,瀏覽器不需要下載和執行所有前一頁的代碼,從而縮短了TTI和FID的時間。

通過代碼拆分,應用程式可以在後臺”懶惰載入”其他頁組件,並在用戶決定導航時使用這些組件。 這樣可以節省帶寬並減少首次輸入延遲或FID (注意FID通常是根據時間接近交互或TTI指標),從而提高網站速度和搜尋引擎排名。

4.負載緩慢

VUE,React和Angular均支援延遲載入,與SSR配合使用可顯著提高速度。

在實施SSR時,延遲載入是一個挑戰。 伺服器應該知道哪些組件用於呈現出傳出的HTML,並將這些組件的代碼與HTML一起發送。 否則,應用程式需要在瀏覽器中安裝並執行兩個渲染週期,然後才能進行交互,這將增加FID (和TTI),從而導致內容刷新或抖動。

連接了延遲載入和SSR。 您選擇用於延遲載入的庫(例如 React Loadable)將影響生成回響應中的最終HTML的方式。 要捕獲需要載入以補充在伺服器上呈現的HTML的捆綁包,您需要添加 <loadable.capture></loadable.capture> 到SSR代碼,然後使用React Loadable的getBundles函數來確定哪個 <腳本></script> 標記需要添加到文檔正文中。

由於所有瀏覽器尚未全局支援懶惰載入客戶端提示,因此有幾種變通辦法可以無縫實現懶惰載入。

解決方案1

您可以讓圖像在應用裝載時填充客戶端,而不是在伺服器端呈現圖像。

解決方案2

只能對“摺疊下方”的圖像使用懶惰載入,即在載入後,您知道的圖像不會立即顯示。 這是一項挑戰,因爲摺疊線可能會根據用戶的設備和顯示屏尺寸上下移動。 然而,一些啓發式的幫助。 例如,在電子商務類別頁面上,您可能會關閉第一組產品圖像的懶惰載入(它們可能是“在摺疊中”)。 對於您知道的項目(例如標題,公司徽標,購物車圖標),您無論如何都不應啓用懶惰載入,並且始終可以在伺服器端呈現它們。

解決方案3

檢測用戶代理有助於提供SSR呈現的頁面的適當版本。 通常不建議使用者代理程式偵測來實作漸進式增強功能,但當瀏覽器趕上並實作用戶端提示時,它會作爲暫時的因應措施。

此解決方案要求適當地標準化高速暫存密鑰;否則,您可能會對高速暫存進行大量分段。

5.現代CDN

優化您的SPA以提高速度,並在上面使用良好的CDN將提升您的網站,但這還不足以實現次秒的速度。 這是因爲大多數傳統CDN只擅長暫存靜態文件,但總體來說,它們不能很好地處理JSON/HTML/SSR數據,而這正是電子商務SPA網站所用的。 要使這些網站更快,需要多種網路技術協同工作。 與其他CDN不同,Layer0應用程式感知CDN與電子商務水療中心配合使用。 它將暫存命中率優化爲未被聽到的級別,並將智能帶到邊緣。 這有助於企業主通過對類似的頁面(例如PDP,PLP和Cart)進行分類來分析趨勢和優化機會,而不僅僅顯示無盡的URL列表。 這使您可以採取行動並查看網站載入時間的差異。

但最重要的是,CDN 即JavaScript 使用高級預測預取技術,在用戶點擊任何內容之前,將邊緣暫存的數據流化到用戶的瀏覽器中。 這使網站比購物者的點擊提前5秒鐘,使他們能夠爲用戶帶來即時的瀏覽體驗。

6.移動工具

Angular非常適合構建移動應用程式。 您可以使用該框架構建在任何設備上執行的Web應用程式,或通過將Angular與NativeScripp相結合來開發iOS和Android本機應用程式。 這允許您重複使用Angular概念,例如數據綁定,依賴性注入,服務和路由。

React Native被認爲是跨平臺開發的王者。 它允許開發人員在Android和iOS之間重複使用高達99%的JavaScript代碼,具有類似反應的組件。 這意味着開發人員可以創建100%的本地小部件來控制自己的風格。 該框架將視圖層作爲純狀態輸出處理,這使得創建帶有原生外觀和性能的iOS/Android配套應用變得非常簡單。

儘管Vue落後於React,但它仍然爲移動開發提供了幾種有價值的解決方案。 例如,NativeScript允許您編寫Vue應用程式,並將其編譯爲原生iOS/Android應用程式。

然後是Vue Native。 該框架結合了Vue和RN生態系統的優點,聲明性渲染,雙向綁定以及用於創建跨平臺本機應用程式的一組基本組件。

水療速度更快,但速度仍有問題

單頁應用程式的原始魅力在於,後續頁面在導航期間不會重新載入,從而帶來更快,無摩擦的瀏覽體驗。 但現代SPA前端只是站點速度解決方案的一部分,還有一些問題需要解決:

  • 綜合速度基準和測試並不一定能說明整個情況。 這些框架的速度可能會因應用程式大小和優化工作而異。
  • 儘管各種尖端的前端技術(包括漸進式Web應用程式,SPA和AMP)可以顯著增強客戶體驗,但網站速度是一個全堆棧問題。 它跨越瀏覽器,邊緣和伺服器。 這就是爲什麼需要全堆棧解決方案來加快任何網站,SPA和多頁應用程式的速度。
  • 所有這些技術都可以提高速度,但在聯合應用時效果最好。 使所有這些技術協同工作是內部團隊可能無法處理的複雜任務(例如,需要創建Node.js層)。

Layer0:使Web即時且簡單

Layer0是一個完整的解決方案,可使電子商務網站快速,易於開發。 它結合了先進的優化技術,加快了大型數據庫驅動網站,如電子商務水療中心,以及強大的工具,通過將代碼置於工作流的中心,讓開發人員每週都能恢復一天的時間。 Layer0本質上將Jamstack引入大型電子商務網站。

即時: 通過將現代前端與CDN AS-JavaScript結合,邊緣動態內容的95%暫存命中率和Node.js後端對前端的結合,Layer0幫助複雜網站優化以提高整個堆棧的速度。 它是唯一保證大型電子商務網站中位次秒最大內容塗料(LCP)時間的平臺。

簡單:Layer0 (現在是Edgio) 是您的一體化平臺,用於開發,部署,預覽,實驗,監控, 執行前端,讓您:

  • 利用Jamstack進行電子商務預渲染和即時渲染
  • 通過從產品目錄API預取數據,實現零延遲聯網
  • 在應用程式中本地配置邊緣(CDN AS-JavaScript)
  • 在本地和生產前執行邊緣規則
  • 通過每個新分支和推送創建GitHub,GitLab或Bitbucket的預覽URL
  • 在邊緣執行分割,以執行高性能A/B測試,Canary部署和個性化
  • 無伺服器JavaScript比AWS Lambda更簡單,更可靠

結論

執行一個更快的網站不只是一個花哨的噱頭。 在一天結束時,您不僅試圖讓您的用戶驚歎,而且還試圖取悅世界上最大的搜尋引擎。 由於谷歌的排名很快就會部分地取決於頁面速度,因此不能輕易地被忽略。 快速的網站意味着提高您的SEO排名和轉換,反過來,這反過來,產生更多的收入.

雖然每個框架的性能可以說很多,但需要記住三點:

  1. 框架性能的實際差異可能很小。 SPA站點的性能取決於如此多的變量,因此無法以有意義的方式並排比較這些框架。
  2. 無論您是在Angular,Vue還是React上,仍有很多改進空間。

加快水療的速度需要結合先進的網路技術,並且您的內部團隊可能無法有效地實施水療。 值得慶幸的是,包括Layer0在內的一些前瞻性供應商爲您做了大量工作。

Layer0將伺服器端渲染與邊緣的高級預測預取和預暫存相結合。 因爲動態數據至少在95%的時間內被暫存,所以數據庫將受到保護,不受預取創建的額外請求的影響。 Layer0 CDN AS-JavaScript服務工作人員在訪問者點擊鏈接之前智能地獲取動態頁面。 這樣,您就可以在單頁應用程式上提供次秒頁面載入,讓您的訪客從登入到結帳都能獲得順暢的體驗。

Tags

Just For You