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

最近，開發者們愈來愈理解，爲用戶提供愉悅的用戶體驗的重要性，這也是實現業務目標的關鍵因素。做爲高端用戶，開發者自己也愈來愈意識到網站的性能對提高用戶體驗的重要性。

一樣地，開發者也愈來愈清楚地認識到，用戶從移動端訪問網站的發展趨勢，即移動流量的增加速度領先於傳統的臺式機/網絡通訊，並且移動設備的用戶已經習慣於原生應用的表現和速度。

所以，開發者們認識到，要知足愈來愈多的移動端用戶的需求，他們要採起一些迎合用戶的行動，好比打造出擁有原生應用體驗和性能的產品，從而給用戶安全感，給他們帶來樂趣，從而留住他們。

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

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

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

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

第三，單頁應用幾乎能夠重繪任何部分的用戶界面，不須要往返於服務器，便能獲取新的演示文稿內容「HTML」。在客戶端加入更多邏輯性代碼，讓瀏覽器上的應用處理獨立的數據和視圖層。經過減小對服務器的訪問，對移動設備來講相當重要。這種方法能夠大大提升性能/響應時間，由於潛在的網絡延遲與移動網絡息息相關。

可是，若是不訪問服務器或更改控制，如何對WEB前端性能監控，即在單頁應用中監測到虛擬頁的性能，也是一個挑戰。

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

在單頁應用的狀況下，發送多個頁面內容並首次被加載時，每一個應用頁面上的事件「例如點擊導航按鈕」都會觸發客戶端瀏覽器，它本身會載入一個沒有任何控制變動到服務器的 SPA 頁，即便新加載的頁面經過 XML HTTP Request「XHR」調用以加載更多的資源。

若是沒有服務器端的控制變動，對傳統的 Web 用戶來講，利用 JavaScript 注入監測來衡量單頁應用各個頁面的性能則不太容易。爲了確保用戶對內容的良好體驗，開發者可以理解 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

本文系 OneAPM 工程師編譯整理。OneAPM 是中國基礎軟件領域的新興領軍企業，能幫助企業用戶和開發者輕鬆實現：緩慢的程序代碼和 SQL 語句的實時抓取。想閱讀更多技術文章，請訪問 OneAPM 官方博客。