近期。開發人員們越來越理解。為用戶提供愉悅的用戶體驗的重要性。這也是實現業務目標的關鍵因素。作為高端用戶，開發人員本身也越來越意識到站點的性能對提升用戶體驗的重要性。

相同地，開發人員也越來越清楚地認識到。用戶從移動端訪問站點的發展趨勢，即移動流量的增長速度率先於傳統的臺式機/網絡通信，並且移動設備的用戶已經習慣於原生應用的表現和速度。

因此。開發人員們認識到，要滿足越來越多的移動端用戶的需求，他們要採取一些迎合用戶的行動，比方打造出擁有原生應用體驗和性能的產品。從而給用戶安全感，給他們帶來樂趣，從而留住他們。

單頁應用：打造優秀的網頁應用體驗

很多公司開始使用一種名為單頁應用的新興的網頁設計範例。來打造網頁應用的體驗。當然這僅僅占全部產品的一部分。針對上面提到的一些問題，通過 SPA 能夠完美解決。

首先，單頁應用更easy構建 Web 體驗，在移動設備瀏覽器內，更接近地模擬本地應用的體驗。無需構建和分發混合本地移動應用。這樣避免了通過 App Store。省去等待 App Store 的審批周期，也無需等待客戶下載最新版應用。並且，更新應用程序也極其簡單，僅僅要更新server上的代碼就好了。這大大縮短了公布周期，甚至每天都能公布，而不是每兩周或更長時間才幹更新。

其次，單頁應用支持豐富的交互部件，這些部件可能有很多交互狀態「菜單、選擇、項目點擊等」，可能導致server端渲染的難度增大。

第三，單頁應用差點兒能夠重繪不論什麽部分的用戶界面。不須要往返於server，便能獲取新的演示文稿內容「HTML」。

在client增加很多其它邏輯性代碼，讓瀏覽器上的應用處理獨立的數據和視圖層。

通過降低對server的訪問，對移動設備來說至關重要。這樣的方法能夠大大提高性能/響應時間，由於潛在的網絡延遲與移動網絡息息相關。

可是，假設不訪問server或更改控制，怎樣對WEB前端性能監控，即在單頁應用中監測到虛擬頁的性能。也是一個挑戰。

衡量標準 Web 頁面的性能好壞是很直接的，新頁面的每一個請求觸發到server端的請求。server變更控制後將新的內容返回給瀏覽器上的設備。當中瀏覽器上的定時 API 瀏覽器可用於跟蹤每一塊內容的載入、構造、渲染和顯示內容，並記錄其耗費的時長。

在單頁應用的情況下，發送多個頁面內容並首次被載入時，每一個應用頁面上的事件「比如點擊導航

假設沒有server端的控制變更。對傳統的 Web 用戶來說，利用 JavaScript 註入監測來衡量單頁應用各個頁面的性能則不太easy。為了確保用戶對內容的良好體驗，開發人員能夠理解 SPA Web 內容的性能也很重要。

單頁應用性能監控

在不久前，國內 APM 行業領軍企業 OneAPM 正式公布了新產品 Browser Insight，該產品會記錄每位真有用戶的頁面載入時間、平均響應時間、地理位置、瀏覽器類型和版本號、Java 錯誤、Ajax 錯誤、DOM 處理以及頁面渲染時間，並提供有效的一站式性能評估，同一時候對終端用戶的愜意度進行全面真實的了解，從而高速確定應用性能的瓶頸所在，幫助開發人員解決瀏覽器端的性能問題。

同一時候， Browser Insight 也支持自己主動檢測，以及搭建在 Angular.js 框架下的單頁應用。同一時候支持搭建在其它主流框架下的手動 API 單頁應用監測。

有了新的 Browser Insight 實時用戶監控瀏覽器，用戶能夠方便地監測單頁應用的虛擬頁面。以及 HTML、JavaScript、CSS 頁面等，它無疑將成為終端用戶總體檢測方案的一部分。

說了這麽多，你肯定想知道真有用戶監控帶來的全部優點，比方了解不同地區的 UX 受歡迎程度，獲得用戶的寶貴意見和使用習慣。借助 Browser Insight 的應用性能監控功能。你就能夠實現的實時監控和端到端的可視性，進而能夠幫您高速定位並解決這個問題。

原文鏈接：3 Benefits of Single-Page Applications and How to Monitor Them

本文系

utm_source=Common&utm_medium=Articles&utm_campaign=TechnicalArticles&from=matefiseco">OneAPM project師編譯整理。

OneAPM 是中國基礎軟件領域的新興領軍企業，能幫助企業用戶和開發人員輕松實現：緩慢的程序代碼和 SQL 語句的實時抓取。想閱讀很多其它技術文章，請訪問 OneAPM

utm_source=TechCommunity&utm_medium=TechArticle&utm_campaign=JulSoftArti">官方博客。

單頁應用的三大優勢及監控方法