由于现代网页包含了各种各样的集成 Web 技术,性能监控和负载测试可能是一项具有挑战性的任务。 本文将介绍在选择正确类型的监视工具或解决方案时必须考虑的监视动态 Web 应用程序和其他元素的特殊性。

动态网页与静态网页

所有种类的网页类型可以分为两个主要组:静态和动态。

简而言之,静态网页是在服务器端以即用型形式生成的 HTML 页面。 通常,页面生成使用服务器端脚本语言(如 ASP、PERL、PHP 等)实现。 当浏览器向 URL 发出请求时,服务器将返回一个 HTML 文档,该文档已在响应中包含网页的文本和图形内容。

另一方面,当今最常见的网页或应用程序类型是动态的。 为了实现动态元素,最新的 JavaScript 框架(如 React、Vue、角 JS、挖空和 Ember)用于 Web 开发。

动态网页在静态 URL 上运行时,会引入用户操作上的内容。 动态内容的结构更为复杂。 页面不是从服务器接收的即用的 HTML 文档中,而是针对客户端计算机上的每个新请求构建的。 每次用户单击按钮或在网页上执行任何其他操作(在选项卡之间导航、填写 Web 表单等)时,浏览器在重写窗口中的页面内容之前执行多个步骤:

  • 将 HTML 文档解析为文档对象模型(DOM);
  • 处理 CSS;
  • 执行嵌入式 JavaScript。

*监控基于 JavaScript 的应用程序的大厅

在监视静态网页性能时,监视工具正在查看从目标服务器收到的 HTTP 响应。 每次用户与静态网页交互时,浏览器都会调用服务器并在响应中接收现成的 HTML。 由于必须向用户显示的所有内容都已生成并包含在服务器端的响应中,因此这些工具可以验证内容和页面加载指标。

但是,现代 JavaScript 框架在监视动态网页时提供了一些挑战。

内容和功能验证

基于 JavaScript 的网页称为
单页应用程序
(SPA),加载后不会在浏览器中执行新的导航。 初始 HTML 文档包括在任何浏览器事件上触发的 JavaScript 文件,并调用服务器以查找 JSON 数据。 这些数据将用于更新初始 HTML 和动态更改浏览器窗口中的页面内容。

同时,带有 IFrame 内联元素的 SPA 和应用程序可以包括嵌入式第三方内容,如广告部分、分析、小部件(Google 地图、YouTube 视频等)。 要显示此类内容,浏览器会分析页面的 HTML 代码,然后执行第三方脚本。 接下来,第三方脚本获取内容以在页面上显示内容。

在监视方面,由于没有生成基于 HTTP 的监视工具的事件和可见事件,因此很难准确说出页面上加载新内容的确切时间(加载图片、打开对话框等)。

确定实际页面加载时间和性能

通常,HTTP 响应用作对目标网页请求的成功结果。 但这并不意味着所有 JavaScript 文件都由浏览器解析和执行,并且内容呈现并呈现给用户可见。 加载初始 HTML 后,浏览器将开始执行所有嵌入式 JavaScript。 就 SPA 和 IFrame 而言,DOM 树可以更早或晚于页面加载完成呈现。 换句话说,真实用户可以与页面交互的时间与加载”完成”事件的时间之间的差异可能长达几秒钟。

此外,一旦加载了基于 JavaScript 的页面,页面上的所有后续更改不会触发对服务器的新浏览器请求。 因此,基于 HTTP 的监视不会在初始页面加载后提供页面上的任何更改指标。 为了接收实际加载时间,我们需要在实际浏览器窗口中监视 JavaScript 事件。

全堆栈解决方案是全面监控的关键

如前所示,现代 Web 应用程序逻辑特征限制了使用在协议级别工作且不使用浏览器的工具进行监视和测试。

要模拟真正的用户体验,需要在完整的 JavaScript 运行时环境中执行监视所需的真实浏览器。 全堆栈解决方案(如Dotcom-Monitor 监控平台和LoadView负载测试解决方案)使用真实浏览器来帮助克服所有描述的挑战并确保取得实际结果。

使用 Dotcom 监视器和每个步骤 Web 记录器监控动态网页

为了确保用户在 JavaScript 引擎上运行的加载页上接收正确的内容,Dotcom-Monitor 在真正的浏览器窗口中提供了断言关键字和图像验证功能。 以下是执行所需的简单步骤:

  1. 使用“每个步骤 Web 记录器“在目标网页上编写脚本用户操作。
  2. 为每个步骤设置内容验证

例如,让我们将监视 Dotcom-Monitor电子邮件报告历史记录页作为基于 JavaScript 的网页的示例。

首先,我们需要打开每个步骤网络记录器并提供目标 URL。

开始录制后,为了确保页面上的下拉正常工作并加载了指定的内容,我们需要检查下拉元素,并为每个下拉列表设置一个断言关键字。 如果出现内容验证错误,将生成监视设备的警报。

如何发现 SpA 中的性能问题

SPA逻辑严重依赖JavaScript技术。 因此,为了确保满足应用程序的 SLA 要求,有必要监视页面上生成的 JavaScript 事件的性能指标。

Dotcom-Monitor 允许用户配置有关 JavaScript 请求执行时间或处理和执行目标页上特定用户操作的时间的报告。 要在设备报告中接收 JavaScript 指标上的数据,请使用 ES 记录器中的网络观察程序时间观察器内联函数。

此外,对于使用AJAX技术构建的 Web 应用程序,您可以在设备的瀑布图中发现 AJAX 请求指标。

总结

总之,在为动态网页和应用程序设置监视时,建议使用利用实际浏览器捕获浏览器窗口中的所有 JavaScript 事件的监视解决方案,从而为您提供最准确的监视结果。

为了监视 SpA 中的动态内容和功能性能,应在实际浏览器环境中执行内容验证(图像和关键字验证)和 JavaScript 性能指标监视。