前端效能監控及4個最佳工具分享

作者：天行無忌 來源：掘金

對於大多數開發人員而言，監控應用程式的效能並不是一個陌生的概念。在某些情況下，我們必須自己進行一些效能偵錯。通常，當出現影響使用者體驗或影響成本的大問題時，就需要去監控應用程式的效能。同時我們也需要花時間去檢視應用在不同場景下的表現情況。

通常，應用程式的監控是按照不同的方式進行，一般應用程式都由前端和後端組成，因此監控通常按照前端和後端不同進行處理，前端和後端監控的方式有所不同，監控指標同樣存在不同。本文將重點介紹前端效能監控及比較流行的監控工具，對於需要開發相關工具的小夥伴可以借鑑這些工具的實現。

什麼是前端應用監控？

前端監控是開發人員用來跟蹤和維護應用程式表現層的運行狀況的過程和工具。它基本上是使用者將與之互動的所有內容，從內容和選單到api和其他面向前端的元件。

應用程式效能監控（簡稱APM）關注的是使用者的體驗，而不是伺服器和前端之間的通訊。雖然這兩者都值得關注，但理解使用者如何與應用程式互動對於提供良好的體驗至關重要。

前端監控重要嗎？

答案是肯定的，我們使用很多不同的監控工具和技術來監控後端、資料庫、記憶體、CPU等基礎設施，而前端的監控沒有任何的不同。隨著前端網站和應用程式的複雜性的增加，監測的需求也在增加。過去，監測只需要每天ping伺服器幾次就可以確保正常了。如今，這樣已經遠遠不夠，任何停機時間、請求速度緩慢等降低網站和應用效能的現象都可能帶來嚴重的後果。同時使用者對於應用的體驗相比過去要求也更高了，任何不好的體驗都將對使用者帶來負面影響。

可以解決哪些效能問題？

在衡量應用程式效能時，建議重點關注一下三個部分：

速度

在網路環境優越的今天，速度是比較重要的指標。緩慢的載入資源會導致瓶頸和糟糕的使用者體驗，所以儘快解決它們至關重要。那麼一個好的網站應該多快？多慢不能被使用者接受？可以使用 PageSpeed 測試網站的載入速度。

載入緩慢的頁面會讓使用者感到沮喪，以至於甚至多出一秒鐘的時間也會導致跳出率激增，在其他地方尋找解決方案。

網站和應用程式的速度應該多快呢？以下是可參考的關鍵性指標描述：

小於100毫秒被認為是瞬時的；100ms到300ms的延遲是可感知的；一秒鐘是使用者思想不被打斷的極限；使用者希望網站在2秒內載入；3秒後，40%的訪問者會放棄你的網站；10秒是保持使用者注意力的極限。

客戶端效能的工具

現在大多數前端應用程式在瀏覽器上花費的時間比在伺服器端花費的時間要多，原因是新的應用大部分在使用JavaScript框架，比如Vue、React和AngularJS。

這些功能豐富的前端添加了一個需要測量的新層。因此，衡量在客戶端本地計算機上運行的應用程式的渲染時間變得至關重要。

Google PageSpeed Insights ：可分析網頁內容並生成建議以使您的網頁載入速度更快。減少頁面載入時間可減少跳出率並提高轉化率。Google Lighthouse ：是用於提高網頁質量的開源自動化工具。您的前端開發人員至少應使用Lighthouse指標，該指標在Google Chrome瀏覽器工具中可用。Sitespeed.io ：一個開源工具，會根據效能最佳做法和時間指標來分析網站的速度和效能。可以分析一個站點，分析和比較多個站點。

團隊並非總是可以修改應用程式以優化客戶端效能。幸運的是，谷歌提供了 ngx_pagespeed 和 mod_pagespeed 作為web伺服器擴展，以自動提高效能，而不需要修改程式碼。

以下是對谷歌這兩個擴展的使用：

Google ngx_pagespeed 可以加速網站並減少頁面載入時間。這個開源的nginx伺服器模組為這個Pagespeed工具自動應用web效能最佳實踐頁面和相關資產（CSS, JavaScript，影象），而不需要修改現有的內容或工作流。Google mod_pagespeed 可加快網站速度並減少頁面載入時間。這個開源的Apache HTTP伺服器模組自動將Web效能最佳實踐應用於頁面和相關資產（CSS，JavaScript，影象），而無需您修改現有內容或工作流程。WebPagetest.org 提供了對客戶端在各種實際瀏覽器中的效能的深刻洞察。這個工具可以在任何瀏覽器、任何地點、任何網路條件下測試網頁，而且它是免費的。

錯誤和功能

這裡不是在說404或503這樣的明顯錯誤。而是那種不太明顯的錯誤，比如第三方API拒絕連線或在應該傳送HTTPS請求時傳送HTTP請求。這些問題可能會導致嚴重的服務中斷，從而破壞使用者的體驗。

當你的網站或應用遇到問題時，無論它是JavaScript錯誤、網路故障，還是特定框架問題，有一個工具會提醒你，這會讓你更好的優化網站或應用。使用一個能夠進行日誌管理的工具，比如Sematext Logs，會發現更容易識別和修復所遇到的問題。

雖然使用控制檯日誌中提供的資訊就可以解決一些問題，但會發現其中一些不那麼容易解決的問題。在某些情況下，日誌只有一個位置，但更多情況下，日誌將位於不同的位置，具有不同的時間戳，並且可能具有不同的冗餘，這將使偵錯變得非常複雜。

擁有一個能夠儲存、歸檔和控制日誌質量的工具對於理解全局是至關重要的。可以使用單獨的解決方案，但是在單一平臺上進行日誌記錄和監視可以使關鍵問題的故障排除更快、更簡單。

可用性

這裡不是說顯而易見的，而是網站需要線上併為使用者提供正常功能，可用性就至關重要，特別是當平臺已經發展到足夠大的程度，並且在世界各地擁有了更多的使用者時。洞察使用者如何體驗網站將非常有幫助，這就需要監視真實使用者的體驗的工具。

真實使用者監控工具將跟蹤使用者在整個應用程式中的程序，提供有關他們如何與應用程式互動以及他們將得到何種響應的資訊。基於這些UX指標，將能夠決定是否需要更快的機器、更好的伸縮性，或者必須優化業務邏輯。

監測應用程式和網站效能的最佳工具

1、AppSignal

AppSignal 提供前端和後臺作業的效能的洞察力、主機監視、錯誤跟蹤以及允許從應用程式收集指標的工具。可以通過易於自定義的儀表盤關注有效負載大小、資料庫查詢、收入以及更多其他內容。

藉助輕量級的Rust支援的代理，AppSignal易於安裝。它能監視應用程式的效能，並顯示其記錄的操作和與之相關的指標的簡單分類。可以看到有關CPU使用率、記憶體分配和網路資訊的詳細資訊，以及顯示有關程式碼實際作用的詳細資訊的事件時間線。這能夠了解應用程式的哪一部分會影響效能，哪些方面需要改進。

它還有一個異常檢測系統，該系統能夠預先構建一些警報，這些警報會在一切未正常運行時觸發。剛起步並不確定要查詢的內容時，或者承受重負荷時，這很有用，並且有太多事情需要跟蹤。

儘管AppSignal易於使用和實施，但它缺少高階日誌記錄和基礎架構監視功能，這將帶來一些大問題。能夠看到所有前端效能的詳細資訊，但是其中一半是空白的。

AppSignal具有30天的試用期和簡單的定價，基於25萬個請求的每月19美元起，直至2500美元的25億個請求，每月2249美元起。

特徵：

異常檢測開箱即用的警報簡易安裝簡單的定價

2、Sentry

Sentry 為項目團隊提供了檢測和解決影響使用者體驗的錯誤和其他問題的工具。它是開源的，並且完全免費的，具有與付費版本相同的優點。在《 淺談前端異常監控平臺實現方案 》有介紹過。

Sentry會告訴你應用程式何時崩潰或運行太慢以及應用程式的效能，從而能夠深入研究需要注意的區域。除了解決錯誤外，還可以解決最終導致錯誤的問題。

特徵：

簡易安裝利用Google的Web要素來提供有關效能的詳細資訊交易追蹤

3、Site24x7

Site24x7 可以檢視應用程式或項目在現實世界中運行情況的替代方法。作為可用性和使用者體驗監控解決方案，Site24x7提供了許多整潔的特性，如伺服器監控、雲管理、RUM等。

當涉及前端效能監視時，Site24x7有一個Web部分，可以在其中創建網站或API的監視器。這些監視器將對您所需的資源執行ping操作，以收集諸如可用性、響應時間、停機時間等資料。

Site24x7還將在 REST API部分中跟蹤SLA遵從性，這將派上用場。該檢視按位置顯示可用性和響應的明細，過去24小時內發生的所有明細的歷史記錄，以及吞吐量和響應時間的詳細資訊。除此之外，Site24x7還會監視SSL和TLS證書以及域到期，並在一個證書到期或出現問題時通知你。

Site24x7提供30天的試用期，無需使用信用卡，並且有四個計劃，起價為10美元，一直到每月499美元。

特徵：

多合一監控解決方案全面的API交易監控真實的使用者監控工具

4、Pingdom

Pingdom 是一項具有各種功能的正常運行時間監控服務，包括SSL監控、正常運行時間監控和實際使用者監控等。藉助靈活的警報系統，當服務中斷或降級時，Pingdom會通知你。

正常運行時間監視檢視將可以深入瞭解頁面或資源完全載入所花費的時間。如果發生錯誤，將可以使用他們的事件報告管理器來深入研究事務，以找出問題的根本原因。在這種情況下，traceroute非常有用。

關於效能報告，只要你需要網站上的詳細資訊（例如載入時間、頁面大小、請求ID和效能得分），就可以使用「頁面速度」部分，它可以簡單地描繪出整體效果效能。瀑布圖是其中最有用的功能之一，瀑布圖顯示了時間軸上的所有資產，因此很容易看到需要優化的地方和要優化的內容。

Pingdom的試用期為14天，其專業計劃開始於每月15美元的綜合監控，其中包括10個正常運行時間的監控器，1個高階監控器和50條SMS通知，而其真正的使用者監控服務則是每月15美元（每100K頁面瀏覽量） 。

特徵：

簡單的定價真實的使用者監控工具簡訊和電子郵件通知可自定義的警報

結論

重要的是要承認，在構建網站或應用程式時，效能並不是一次性檢查清單的事情。正確處理需要花費時間和精力，而且這是一個持續的過程。監視前端效能將需要特殊的工具，以確保使用者獲得24×7的最佳體驗。