监控淘汰.js Web 应用程序的挑战

像淘汰赛这样的 Web 应用程序.js可帮助您接触受众和客户。 随着客户群的增加,您的 Web 应用程序也会不断发展,以便您可以满足他们的不同需求。 但是,应用程序中引入的功能越多,应用程序需要处理的请求和响应就越多。 再加上设计(CSS),可以使你的Web应用程序变得非常庞大。 你一定在想,“那又怎样! 我的大多数客户都可以使用高速互联网”。 好吧,根据
Google进行的一项研究
,如果加载时间超过53秒,则53%的移动用户会离开网站。 这大约是你阅读最后一句话的时间。 因此,您必须确保您的网站是轻量级的,并定期对其进行监控,以确保功能更新和补丁发布不会产生任何加载或性能问题。

是的,客户端脚本(JavaScript)可以拯救你,但是使用JavaScript和数据绑定框架(如Knockout.js可能会带来一些挑战以及它们的好处。 在本文中,我们将讨论如何触发JavaScript库以及基于Knockout.js Web应用程序的最佳综合监控方法。

 

JavaScript 库的出现

几十年前,Web应用程序曾经很简单。 他们将使用 HTML 作为 DOM,以及最低限度的 CSS。 来自客户端的任何请求都将发送到服务器,并发回相关响应。 另一种说法是,为了反映 DOM 元素上的更改,整个页面必须刷新。 鉴于带宽有限,此类请求可能会占用大量时间。 但是在 1995 年引入 JavaScript 之后,一切都变了。

现在,每当加载网页时,很少有客户端脚本文件(JavaScript和库)也与HTML和CSS一起发送。 这些脚本包含一组用户驱动的操作。 此类库还允许 Web 应用程序使用 HTTP 协议发送请求和接收对外部 API 或 Web 服务的响应。 JavaScript 库也用于 AJAX 调用和 Web 应用程序的延迟加载。 这些 JavaScript 功能和其他此类库可帮助您的 Web 应用程序更有效地利用网络带宽。 它在应用程序加载时加载最少的元素和设计,然后根据用户的交互和请求,这些脚本和库触发事件来处理或获取数据。 因此,在执行任何操作之前,HTML 呈现将是相对静态的。 但是,当您单击按钮或任何此类操作时,将触发JavaScript事件来处理请求,从而使应用程序动态化。

 

淘汰赛.js,而不仅仅是旧块上的筹码

Knockout.js只是另一个客户端脚本框架,但它的专长是DOM操作。 当其他JavaScript框架附加到完整的DOM时,Knockout.js绑定到您选择的特定DOM容器。 它主要用于HTML结构是动态的Web应用程序,并由用户的交互决定。 淘汰赛的一些重要功能.js包括以下内容;

  • MVVM 体系结构。 MVVM(模型 – 视图 – 视图模型)架构简化了动态用户界面的创建。 它有助于从应用程序逻辑中抽象呈现逻辑。
  • 声明性绑定。 Knockout.js 允许您在 HTML 中嵌入数据绑定表达式,而不是从头开始编写代码。 这简化了将 UI 部件连接到数据模型的过程。
  • 双向数据绑定。 数据模型和 UI 之间的双向数据绑定允许数据模型中的更改立即反映在 UI 上,反之亦然。

 

普通监控技术和敲除.js应用程序

若要确保任何功能版本或 bug 修复不会妨碍应用程序的性能,必须定期测试和监视 Web 应用程序的行为。 应在主体服务器和镜像服务器上监视应用程序的性能。 您还应该测试其在重负载(网络流量)下的性能,以确保服务器能够处理此类流量。 仅依赖 HTTP 响应的监视工具缺少客户端响应。 即使HTTP响应成功,也不意味着浏览器执行和呈现了所有JavaScript文件。 应用程序“完全”加载与用户可以与应用程序交互的时间之间的差异可能为几秒钟。 HTTP 监视技术不考虑的是 Web 应用程序中的动态实体。 JavaScript 对用户交互的响应、复杂的 AJAX 请求、API 调用和 iFrame 的加载(加载广告时,取决于存在的内容)。

对于处理与DOM实时数据绑定的基于Knockout.js的Web应用程序,性能和页面加载时间将取决于各种用户交互以及脚本如何处理用户提供的数据。 因此,仅成功加载脚本并不是监视性能的现实方法。 在某些情况下,Knockout.js应用程序的实际加载时间可能需要几秒钟才能触发和加载DOM的动态模块。 使用普通的监视技术会给您提供错误的统计信息,并且您将无法从真实最终用户的角度感知应用程序的性能。 这反过来会影响您的业务并破坏客户群的用户体验。 对于这样的动态应用程序,我们应该使用更复杂的方法。

 

综合监控和基于敲除.js Web 应用程序

要从用户的角度查找实际性能,并为基于 Knockout .js 的 webbapplication 提供加载时间统计信息,您必须找到一种方法来监视应用程序的加载时间和脚本触发 JavaScript 事件所花费的时间。 最好的方法是使用综合监控来监控动态元素。

  • 使用真实的浏览器来模拟用户交互。 与其使用无头浏览器进行监视,不如使用真实的浏览器来模拟用户交互。 这种方法将考虑浏览器驱动程序读取和呈现 DOM 以及在当前网页中加载脚本所花费的时间。
  • 记录并重播用户交互以触发 JavaScript 事件。 使用脚本记录器编写用户交互脚本并重播它们,您可以记录各种用户交互,尤其是那些触发 Knockout 依赖 DOM 容器.js交互。 因此,每当监控脚本在服务器上运行时,它都会在真实的浏览器上加载您的 Web 应用程序,并从不同的地理位置执行预先记录的用户交互。 通过这种方式,您的综合监视脚本将能够考虑服务器加载时间和完全触发 JavaScript 事件所花费的时间,从而为您提供实际的用户性能结果。
  • 内容验证。 在监视动态 Web 应用程序时,这是最重要的验证。 内容验证用于验证 JavaScript 事件是否已实际完成,以及更改是否反映在 UI 中。 内容验证成功后,意味着所有请求的更改和事件都已触发并完成。 自 Web 应用程序请求发送到服务器所花费的时间,到验证内容所花费的时间,反映了 Web 应用程序的真实加载时间和性能。 通常,内容可以是文本或图像,具体取决于 Knockout.js 脚本绑定到的 DOM 类型。

 

总结

在过去的十年中,Web应用程序开发技术和策略取得了长足的进步。 为了确保您的应用程序能够继续有效运行并满足客户的需求,您需要一个支持监控动态应用程序、网页和 Knockout.js 等技术的创新解决方案。
Dotcom 监视器
为您提供了工具,例如
每个步骤 Web 记录器
,以及轻松监控最复杂的 Web 应用程序和网站所需的所有功能。

 


免费试用完整的 Dotcom 监视器平台 30 天

 

Facebook
Twitter
LinkedIn
电子邮件
打印