再談前端性能監控及4個最佳工具分享

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於大多數開發人員而言，監控應用程序的性能並不是一個陌生的概念。在某些情況下，我們必須自己進行一些性能調試。通常，當出現影響用戶體驗或影響成本的大問題時，就需要去監控應用程序的性能。同時我們也需要話時間去查看應用在不同場景下的表現情況。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通常，應用程序的監控是按照不同的方式進行，一般應用程序都由前端和後端組成，因此監控通常按照前端和後端不同進行處理，前端和後端監控的方式有所不同，監控指標同樣存在不同。本文將重點介紹前端性能監控及比較流行的監控工具，對於需要開發相關工具的小夥伴可以借鑑這些工具的實現。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"什麼是前端應用監控？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端監控是開發人員用來跟蹤和維護應用程序表現層的運行狀況的過程和工具。它基本上是用戶將與之交互的所有內容，從內容和菜單到api和其他面向前端的組件。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"應用程序性能監控（簡稱APM）關注的是用戶的體驗，而不是服務器和前端之間的通信。雖然這兩者都值得關注，但理解用戶如何與應用程序交互對於提供良好的體驗至關重要。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"前端監控重要嗎？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"答案是肯定的，我們使用很多不同的監控工具和技術來監控後端、數據庫、內存、CPU等基礎設施，而前端的監控沒有任何的不同。隨着前端網站和應用程序的複雜性的增加，監測的需求也在增加。過去，監測只需要每天ping服務器幾次就可以確保正常了。如今，這樣已經遠遠不夠，任何停機時間、請求速度緩慢等降低網站和應用性能的現象都可能帶來嚴重的後果。同時用戶對於應用的體驗相比過去要求也更高了，任何不好的體驗都將對用戶帶來負面影響。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"可以解決那些性能問題？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在衡量應用程序性能時，建議重點關注一下三個部分：","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"速度","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在網絡環境優越的今天，速度是比較重要的指標。緩慢的加載資源會導致瓶頸和糟糕的用戶體驗，所以儘快解決它們至關重要。那麼一個好的網站應該多快？多慢不能被用戶接受？可以使用 ","attrs":{}},{"type":"link","attrs":{"href":"https://developers.google.com/speed/pagespeed/insights/?hl=zh-cn","title":"","type":null},"content":[{"type":"text","text":"PageSpeed","attrs":{}}]},{"type":"text","text":" 測試網站的加載速度。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"加載緩慢的頁面會讓用戶感到沮喪，以至於甚至多出一秒鐘的時間也會導致跳出率激增，在其他地方尋找解決方案。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"網站和應用程序的速度應該多快呢？一下是可參考的關鍵性指標描述：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小於100毫秒被認爲是瞬時的；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"100ms到300ms的延遲是可感知的；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一秒鐘是用戶思想不被打斷的極限；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用戶希望網站在2秒內加載；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3秒後，40%的訪問者會放棄你的網站；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"10秒是保持用戶注意力的極限。","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"客戶端性能的工具","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在大多數前端應用程序在瀏覽器上花費的時間比在服務器端花費的時間要多，原因是新的應用大部分在使用JavaScript框架，比如Vue、React和AngularJS。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些功能豐富的前端添加了一個需要測量的新層。因此，衡量在客戶端本地計算機上運行的應用程序的渲染時間變得至關重要。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://developers.google.com/speed/pagespeed/insights/","title":"","type":null},"content":[{"type":"text","text":"Google PageSpeed Insights","attrs":{}}]},{"type":"text","text":"：可分析網頁內容並生成建議以使您的網頁加載速度更快。減少頁面加載時間可減少跳出率並提高轉化率。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://developers.google.com/web/tools/lighthouse","title":"","type":null},"content":[{"type":"text","text":"Google Lighthouse","attrs":{}}]},{"type":"text","text":"：是用於提高網頁質量的開源自動化工具。您的前端開發人員至少應使用Lighthouse指標，該指標在Google Chrome瀏覽器工具中可用。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.sitespeed.io/","title":"","type":null},"content":[{"type":"text","text":"Sitespeed.io","attrs":{}}]},{"type":"text","text":"：一個開源工具，會根據性能最佳做法和時間指標來分析網站的速度和性能。可以分析一個站點，分析和比較多個站點。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"團隊並非總是可以修改應用程序以優化客戶端性能。幸運的是，谷歌提供了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ngx_pagespeed","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"mod_pagespeed","attrs":{}}],"attrs":{}},{"type":"text","text":"作爲web服務器擴展，以自動提高性能，而不需要修改代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下是對谷歌這兩個擴展的使用：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://developers.google.com/speed/pagespeed/ngx","title":"","type":null},"content":[{"type":"text","text":"Google ngx_pagespeed","attrs":{}}]},{"type":"text","text":" 可以加速網站並減少頁面加載時間。這個開源的nginx服務器模塊爲這個Pagespeed工具自動應用web性能最佳實踐頁面和相關資產（CSS, JavaScript，圖像），而不需要修改現有的內容或工作流。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://developers.google.com/speed/pagespeed/mod","title":"","type":null},"content":[{"type":"text","text":"Google mod_pagespeed","attrs":{}}]},{"type":"text","text":" 可加快網站速度並減少頁面加載時間。這個開源的Apache HTTP服務器模塊自動將Web性能最佳實踐應用於頁面和相關資產（CSS，JavaScript，圖像），而無需您修改現有內容或工作流程。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://www.webpagetest.org/","title":"","type":null},"content":[{"type":"text","text":"WebPagetest.org","attrs":{}}]},{"type":"text","text":" 提供了對客戶端在各種實際瀏覽器中的性能的深刻洞察。這個工具可以在任何瀏覽器、任何地點、任何網絡條件下測試網頁，而且它是免費的。","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"錯誤和功能","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏不是在說404或503這樣的明顯錯誤。而是那種不太明顯的錯誤，比如第三方API拒絕連接或在應該發送HTTPS請求時發送HTTP請求。這些問題可能會導致嚴重的服務中斷，從而破壞用戶的體驗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當你的網站或應用遇到問題時，無論它是JavaScript錯誤、網絡故障，還是特定框架問題，有一個工具會提醒你，這會讓你更好的優化網站或應用。使用一個能夠進行日誌管理的工具，比如Sematext Logs，會發現更容易識別和修復所遇到的問題。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雖然使用控制檯日誌中提供的信息就可以解決一些問題，但會發現其中一些不那麼容易解決的問題。在某些情況下，日誌只有一個位置，但更多情況下，日誌將位於不同的位置，具有不同的時間戳，並且可能具有不同的冗餘，這將使調試變得非常複雜。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"擁有一個能夠存儲、歸檔和控制日誌質量的工具對於理解全局是至關重要的。可以使用單獨的解決方案，但是在單一平臺上進行日誌記錄和監視可以使關鍵問題的故障排除更快、更簡單。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"可用性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏不是說顯而易見的，而是網站需要在線併爲用戶提供正常功能，可用性就至關重要，特別是當平臺已經發展到足夠大的程度，並且在世界各地擁有了更多的用戶時。洞察用戶如何體驗網站將非常有幫助，這就需要監視真實用戶的體驗的工具。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"真實用戶監控工具將跟蹤用戶在整個應用程序中的進程，提供有關他們如何與應用程序交互以及他們將得到何種響應的信息。基於這些UX指標，將能夠決定是否需要更快的機器、更好的伸縮性，或者必須優化業務邏輯。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"監測應用程序和網站性能的最佳工具","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"1、AppSignal","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/91/912acca5e4b943a3da9f3ad49c236c56.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://appsignal.com/","title":"","type":null},"content":[{"type":"text","text":"AppSignal","attrs":{}}]},{"type":"text","text":" 提供前端和後臺作業的性能的洞察力、主機監視、錯誤跟蹤以及允許從應用程序收集指標的工具。可以通過易於自定義的儀表盤關注有效負載大小、數據庫查詢、收入以及更多其他內容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"藉助輕量級的Rust支持的代理，AppSignal易於安裝。它能監視應用程序的性能，並顯示其記錄的操作和與之相關的指標的簡單分類。可以看到有關CPU使用率、內存分配和網絡信息的詳細信息，以及顯示有關代碼實際作用的詳細信息的事件時間線。這能夠了解應用程序的哪一部分會影響性能，哪些方面需要改進。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它還有一個異常檢測系統，該系統能夠預先構建一些警報，這些警報會在一切未正常運行時觸發。剛起步並不確定要查找的內容時，或者承受重負荷時，這很有用，並且有太多事情需要跟蹤。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"儘管AppSignal易於使用和實施，但它缺少高級日誌記錄和基礎架構監視功能，這將帶來一些大問題。能夠看到所有前端性能的詳細信息，但是其中一半是空白的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"AppSignal具有30天的試用期和簡單的定價，基於25萬個請求的每月19美元起，直至2500美元的25億個請求，每月2249美元起。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"特徵：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"異常檢測","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開箱即用的警報","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"簡易安裝","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"簡單的定價","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"2、Sentry","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/21/218cd44b0794444ad2db89f562db54de.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://sentry.io/","title":"","type":null},"content":[{"type":"text","text":"Sentry","attrs":{}}]},{"type":"text","text":"爲項目團隊提供了檢測和解決影響用戶體驗的錯誤和其他問題的工具。它是開源的，並且完全免費的，具有與付費版本相同的優點。在《","attrs":{}},{"type":"link","attrs":{"href":"https://www.devpoint.cn/article/276.shtml","title":"","type":null},"content":[{"type":"text","text":"淺談前端異常監控平臺實現方案","attrs":{}}]},{"type":"text","text":"》有介紹過。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Sentry會告訴你應用程序何時崩潰或運行太慢以及應用程序的性能，從而能夠深入研究需要注意的區域。除了解決錯誤外，還可以解決最終導致錯誤的問題。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"特徵：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"簡易安裝","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"利用Google的Web要素來提供有關性能的詳細信息","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"交易追蹤","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"3、Site24x7","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a7/a741924eae479f8ef07a450ce06efda4.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.site24x7.com/","title":"","type":null},"content":[{"type":"text","text":"Site24x7","attrs":{}}]},{"type":"text","text":" 可以查看應用程序或項目在現實世界中運行情況的替代方法。作爲可用性和用戶體驗監控解決方案，Site24x7提供了許多整潔的特性，如服務器監控、雲管理、RUM等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當涉及前端性能監視時，Site24x7有一個Web部分，可以在其中創建網站或API的監視器。這些監視器將對您所需的資源執行ping操作，以收集諸如可用性、響應時間、停機時間等數據。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Site24x7還將在 REST API部分中跟蹤SLA遵從性，這將派上用場。該視圖按位置顯示可用性和響應的明細，過去24小時內發生的所有明細的歷史記錄，以及吞吐量和響應時間的詳細信息。除此之外，Site24x7還會監視SSL和TLS證書以及域到期，並在一個證書到期或出現問題時通知你。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Site24x7提供30天的試用期，無需使用信用卡，並且有四個計劃，起價爲10美元，一直到每月499美元。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"特徵：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"多合一監控解決方案","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"全面的API交易監控","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"真實的用戶監控工具","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"4、Pingdom","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2b/2b972c9e892b6a3b09a718c0ed2f2728.jpeg","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.pingdom.com/","title":"","type":null},"content":[{"type":"text","text":"Pingdom","attrs":{}}]},{"type":"text","text":" 是一項具有各種功能的正常運行時間監控服務，包括SSL監控、正常運行時間監控和實際用戶監控等。藉助靈活的警報系統，當服務中斷或降級時，Pingdom會通知你。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正常運行時間監視視圖將可以深入瞭解頁面或資源完全加載所花費的時間。如果發生錯誤，將可以使用他們的事件報告管理器來深入研究事務，以找出問題的根本原因。在這種情況下，traceroute非常有用。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關於性能報告，只要你需要網站上的詳細信息（例如加載時間、頁面大小、請求ID和性能得分），就可以使用“頁面速度”部分，它可以簡單地描繪出整體效果性能。瀑布圖是其中最有用的功能之一，瀑布圖顯示了時間軸上的所有資產，因此很容易看到需要優化的地方和要優化的內容。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Pingdom的試用期爲14天，其專業計劃開始於每月15美元的綜合監控，其中包括10個正常運行時間的監控器，1個高級監控器和50條SMS通知，而其真正的用戶監控服務則是每月15美元（每100K頁面瀏覽量） 。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"特徵：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"簡單的定價","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"真實的用戶監控工具","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"短信和電子郵件通知","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可自定義的警報","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"結論","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"重要的是要承認，在構建網站或應用程序時，性能並不是一次性檢查清單的事情。正確處理需要花費時間和精力，而且這是一個持續的過程。監視前端性能將需要特殊的工具，以確保用戶獲得24×7的最佳體驗。","attrs":{}}]}]}