近期。开发人员们越来越理解。为用户提供愉悦的用户体验的重要性。这也是实现业务目标的关键因素。作为高端用户，开发人员本身也越来越意识到站点的性能对提升用户体验的重要性。

相同地，开发人员也越来越清楚地认识到。用户从移动端訪问站点的发展趋势，即移动流量的增长速度率先于传统的台式机/网络通信，并且移动设备的用户已经习惯于原生应用的表现和速度。

因此。开发人员们认识到，要满足越来越多的移动端用户的需求，他们要採取一些迎合用户的行动，比方打造出拥有原生应用体验和性能的产品。从而给用户安全感，给他们带来乐趣，从而留住他们。

单页应用：打造优秀的网页应用体验

很多公司開始使用一种名为单页应用的新兴的网页设计范例。来打造网页应用的体验。当然这仅仅占全部产品的一部分。针对上面提到的一些问题，通过 SPA 能够完美解决。

首先，单页应用更easy构建 Web 体验，在移动设备浏览器内，更接近地模拟本地应用的体验。无需构建和分发混合本地移动应用。这样避免了通过 App Store。省去等待 App Store 的审批周期，也无需等待客户下载最新版应用。并且，更新应用程序也极其简单，仅仅要更新server上的代码就好了。这大大缩短了公布周期，甚至每天都能公布，而不是每两周或更长时间才干更新。

其次，单页应用支持丰富的交互部件，这些部件可能有很多交互状态「菜单、选择、项目点击等」，可能导致server端渲染的难度增大。

第三，单页应用差点儿能够重绘不论什么部分的用户界面。不须要往返于server，便能获取新的演示文稿内容「HTML」。

在client增加很多其它逻辑性代码，让浏览器上的应用处理独立的数据和视图层。

通过降低对server的訪问，对移动设备来说至关重要。这样的方法能够大大提高性能/响应时间，由于潜在的网络延迟与移动网络息息相关。

可是，假设不訪问server或更改控制，怎样对WEB前端性能监控，即在单页应用中监測到虚拟页的性能。也是一个挑战。

衡量标准 Web 页面的性能好坏是很直接的，新页面的每一个请求触发到server端的请求。server变更控制后将新的内容返回给浏览器上的设备。当中浏览器上的定时 API 浏览器可用于跟踪每一块内容的载入、构造、渲染和显示内容，并记录其耗费的时长。

在单页应用的情况下，发送多个页面内容并首次被载入时，每一个应用页面上的事件「比如点击导航button」都会触发client浏览器，它自己会载入一个没有不论什么控制变更到server的 SPA 页。即使新载入的页面通过 XML HTTP Request「XHR」调用以载入很多其它的资源。

假设没有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">官方博客。