单页应用的三大优势及监控方法

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

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

单页应用的三大优势及监控方法

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

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

很多公司開始使用一种名为单页应用的新兴的网页设计范例。来打造网页应用的体验。当然这仅仅占全部产品的一部分。针对上面提到的一些问题,通过 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

本文系 OneAPM project师编译整理。

OneAPM 是中国基础软件领域的新兴领军企业,能帮助企业用户和开发人员轻松实现:缓慢的程序代码和 SQL 语句的实时抓取。想阅读很多其它技术文章,请訪问 OneAPM 官方博客

原文地址:https://www.cnblogs.com/clnchanpin/p/7098030.html