单页应用程序的 3 大优势以及如何监控它们

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

如今,组织越来越认识到为客户提供愉快的用户体验的重要性,这是实现业务目标的关键因素。他们还越来越意识到,客户体验到的网站性能对于提供良好的客户体验至关重要。

同样,组织也越来越意识到客户通过移动浏览器访问其网站的趋势,移动流量的增长速度快于传统的桌面/网络流量,并且移动设备的用户已经习惯了本地移动设备的速度和性能应用程序。

因此,公司知道,为了满足这些越来越多的移动客户的期望,他们需要采用提供类似本地应用程序体验和性能的策略和技术,以满足客户的需求,并留住他们、吸引他们并让他们满意。

因此,许多公司正在构建或开始使用称为 单页应用程序的 新兴 Web 设计范例来构建其部分 Web 体验。使用 SPA 方法设计的 Web 体验有几个优势,可以直接解决上述挑战。

首先,单页应用程序可以更轻松地构建 Web 体验,这些体验更接近于移动设备浏览器中类似原生应用程序的体验,而无需构建和分发混合原生移动应用程序。这避免了必须通过应用程序商店分发应用程序,这需要等待应用程序商店批准周期和等待客户下载更新的应用程序。相反,更新应用程序就像更新服务器上的代码一样简单,从而大大缩短了发布周期,也许是每天一次,而不是每两周一次或更长时间。

其次,单页应用程序支持与页面上的多个组件进行丰富的交互,这些组件可能有许多中间状态(菜单、选择、单击的项目等),并且很难通过服务器端呈现来实现。

第三,单页应用程序几乎可以重绘 UI 的任何部分,而无需与服务器进行完整的往返以检索新的演示内容 (HTML)。通过在 SPA 的客户端代码中放置更多逻辑并让浏览器中的应用程序处理单独的数据和视图层,这种方法可以通过减少对移动设备更为重要的服务器访问来显着提高性能/响应时间因为与移动网络相关的潜在网络延迟。

但是,如果没有到服务器的往返行程或控制权的改变,作为真实用户监控策略的一部分,您如何监控单页应用程序中虚拟页面的性能?

衡量标准网页的性能非常简单,因为每个对新页面的请求都会触发对服务器的请求,并更改服务器的控制权,以便将新内容发送回设备上的浏览器,其中浏览器的计时 API可用于跟踪加载每段内容以及浏览器构建、呈现和显示内容所需的时间。

然而,在单页应用程序的情况下,第一次加载页面时会发送多页内容,并且应用程序每个页面上的事件(例如单击导航按钮)会触发客户端浏览器本身加载另一个即使新加载的页面确实通过 XML HTTP 请求 (XHR) 调用加载了额外的资源,SPA 页面也不会对服务器进行任何控制更改。

如果不改变对服务器的控制,传统的 Web 真实用户 javascript 注入监控很难衡量单页应用程序各个页面的性能,但对于开发人员来说,能够了解性能同样重要SPA Web 内容,以确保他们的用户对其内容有良好的体验。

引入单页应用程序性能监控

那么,现在您可以两全其美:SPA 的性能和 UI/UX 优势以及 AppDynamics 真实用户监控的性能监控功能。

AppDynamics 的 Summer '15 版本 浏览器真实用户监控 现在支持自动检测和监控在流行的 Angular.js 框架 中构建的单页应用程序,以及用于监控使用其他流行或新兴框架构建的单页应用程序的手动 API作为 Ember Backbone

有了这个新的 SPA 性能监控功能,浏览器真实用户监控现在可以监控您的单页应用程序的虚拟页面以及您网站的传统 HTML、Javascript 和 CSS 页面,作为综合最终用户监控解决方案的一部分。

您肯定会想要真实用户监控给您带来的所有好处,例如了解全球用户体验、深入了解您的用户及其习惯,当然还有实时、端到端的可见性以识别快速解决问题点。 (如果您还不熟悉我们的真实用户监控解决方案,您可以 在此处 找到更多信息。)