Aufgrund der Vielzahl integrierter Web-Technologien, die mit modernen Webseiten enthalten sind, kann Die Leistungsüberwachung und Auslastungstests eine anspruchsvolle Aufgabe sein. In diesem Artikel werden die Besonderheiten der Überwachung dynamischer Webanwendungen und anderer Elemente behandelt, die bei der Auswahl des richtigen Überwachungstools oder der richtigen Lösung berücksichtigt werden müssen.

Dynamische Webseiten im Vergleich zu statischen Webseiten

Alle Varianten von Webseitentypen können in zwei Hauptgruppen unterteilt werden: statisch und dynamisch.

Kurz gesagt, eine statische Webseite ist eine HTML-Seite, die auf der Serverseite in einem gebrauchsfertigen Formular generiert wird. Im Allgemeinen wird die Seitengenerierung mit serverseitigen Skriptsprachen wie ASP, PERL, PHP usw. implementiert. Wenn ein Browser eine Anforderung an eine URL stellt, gibt der Server ein HTML-Dokument zurück, das bereits Text und Grafikinhalt der Webseite in der Antwort enthält.

Auf der anderen Seite sind die häufigsten Arten von Webseiten oder Anwendungen heute dynamisch. Um dynamische Elemente zu implementieren, werden die neuesten JavaScript-Frameworks wie React, Vue, Angular JS, Knockout und Ember in der Webentwicklung verwendet.

Dynamische Webseiten bringen den Inhalt von Benutzeraktionen ein, während sie unter einer statischen URL ausgeführt werden. Dynamische Inhalte sind in ihrer Struktur komplexer. Seiten werden nicht vom Server in gebrauchsfertigen HTML-Dokumenten empfangen, sondern für jede neue Anforderung auf dem Clientcomputer erstellt. Jedes Mal, wenn ein Benutzer auf eine Schaltfläche klickt oder eine andere Aktion auf der Webseite ausführt (Navigieren zwischen Registerkarten, Ausfüllen von Webformularen usw.), führt der Browser mehrere Schritte aus, bevor der Seiteninhalt im Fenster neu geschrieben wird:

  • Analysiert das HTML-Dokument in Document Object Model (DOM);
  • Prozesse CSS;
  • Führt eingebettetes JavaScript aus.

Herausforderungen der Überwachung von JavaScript-basierten Anwendungen

Während der Überwachung der statischen Webseitenleistung durchsuchen Überwachungstools die vom Zielserver empfangene HTTP-Antwort. Jedes Mal, wenn ein Benutzer mit einer statischen Webseite interagiert, ruft ein Browser den Server auf und empfängt einen bereitstehenden HTML-Code in der Antwort. Da alle Inhalte, die einem Benutzer angezeigt werden müssen, bereits generiert und in die Antwort auf der Serverseite eingeschlossen sind, können die Tools den Inhalt und die Seitenlademetriken überprüfen.

Moderne JavaScript-Frameworks stellen jedoch einige Herausforderungen dar, wenn es um die Überwachung dynamischer Webseiten geht.

Inhalts- und Funktionsvalidierung

JavaScript-basierte Webseiten, die als
SSpAs (Single-Page Applications)
bezeichnet werden, führen nach dem Laden keine neue Navigation im Browser durch. Das ursprüngliche HTML-Dokument enthält JavaScript-Dateien, die bei Browserereignissen ausgelöst werden, und ruft den Server für JSON-Daten auf. Diese Daten werden verwendet, um den ursprünglichen HTML-Code zu aktualisieren und den Seiteninhalt im Browserfenster dynamisch zu ändern.

Gleichzeitig können SPAs und Anwendungen mit IFrame-Inline-Elementen eingebettete Inhalte von Drittanbietern wie Werbeabschnitte, Analysen, Widgets (Google Maps, YouTube-Videos usw.) enthalten. Um solche Inhalte anzuzeigen, analysieren Browser den HTML-Code der Seite und führen dann Skripts von Drittanbietern aus. Als Nächstes rufen Skripts von Drittanbietern den Inhalt ab, um ihn auf der Seite anzuzeigen.

In Bezug auf die Überwachung macht es dies schwierig, genau zu sagen, wann neue Inhalte auf die Seite geladen wurden (Laden eines Bildes, Öffnen eines Dialogfelds usw.), da kein Ereignis generiert und für HTTP-basierte Überwachungstools sichtbar ist.

Bestimmen der tatsächlichen Ladezeiten und Leistung der Seite

Im Allgemeinen werden HTTP-Antworten als erfolgreiches Ergebnis der Anforderung an eine Zielwebseite verwendet. Es bedeutet jedoch nicht, dass alle JavaScript-Dateien vom Browser analysiert und ausgeführt wurden und der Inhalt gerendert und für Benutzer sichtbar gemacht wurde. Sobald der ursprüngliche HTML-Code geladen ist, beginnt der Browser mit der Ausführung des gesamten eingebetteten JavaScript. In Bezug auf SPAs und IFrames kann die DOM-Struktur viel früher oder später gerendert werden, wenn die Seitenauslastung abgeschlossen ist. Mit anderen Worten, der Unterschied zwischen dem Zeitpunkt, zu dem ein echter Benutzer mit einer Seite interagieren kann, und dem Zeitpunkt des Ladens “vollständig” Ereignis kann bis zu mehreren Sekunden betragen.

Darüber hinaus lösen alle nachfolgenden Änderungen auf der Seite nach dem Laden der JavaScript-basierten Seite keine neuen Browseranforderungen an den Server aus. Daher stellt die HTTP-basierte Überwachung keine Metriken für Änderungen auf der Seite nach dem ersten Seitenladeprogramm bereit. Um tatsächliche Ladezeiten zu erhalten, müssen wir die JavaScript-Ereignisse im realen Browserfenster überwachen.

Full-Stack-Lösungen als Schlüssel zur umfassenden Überwachung

Wie bereits gezeigt, setzen moderne Eigenschaften der Webanwendungslogik Die Überwachung und das Testen mit Tools eingeschränkt, die auf Protokollebene funktionieren und KEINEN Browser verwenden.

Um die tatsächliche Benutzererfahrung nachzuahmen, ist ein echter Browser erforderlich, um die Überwachung in der vollständigen JavaScript-Laufzeitumgebung durchzuführen. Full-Stack-Lösungen, wie die Dotcom-Monitor-Überwachungsplattform und die LoadView-Lasttestlösung, verwenden echte Browser, um alle beschriebenen Herausforderungen zu meistern und realistische Ergebnisse zu erzielen. LoadView

Überwachen dynamischer Webseiten mit Dotcom-Monitor und EveryStep Web Recorder

Um sicherzustellen, dass ein Benutzer auf einer geladenen Seite, die auf javaScript-Engine ausgeführt wird, ordnungsgemäßen Inhalt erhält, stellt Dotcom-Monitor im realen Browserfenster ein Assertionsschlüsselwort und eine Bildvalidierungsfunktionalität bereit. Hier sind die einfachen Schritte, die Sie ausführen müssen:

  1. Skriptbenutzeraktionen auf der Zielwebseite mithilfe des EveryStep Web Recorders.
  2. Richten Sie die Inhaltsvalidierung für jeden Schritt ein.

Lassen Sie uns beispielsweise die Überwachung der Seite Dotcom-Monitor Email Report History als Beispiel für eine JavaScript-basierte Webseite einrichten.

Zuerst müssen wir den EveryStep Web Recorder öffnen und die Ziel-URL angeben.

Nachdem die Aufzeichnung gestartet wurde, müssen wir Dropdown-Elemente überprüfen und für jede Dropdown-Liste ein Assert-Schlüsselwort einrichten, damit Dropdown-Dateien auf der Seite ordnungsgemäß funktionieren und der angegebene Inhalt geladen wurde. Im Falle eines Inhaltsvalidierungsfehlers wird eine Warnung für das Überwachungsgerät generiert.

Erkennen von Leistungsproblemen in BSP

DIE SPA-Logik basiert stark auf JavaScript-Technologie. Um sicherzustellen, dass die SLA-Anforderungen der Anwendung erfüllt werden, müssen daher die Leistungsmetriken der auf der Seite generierten JavaScript-Ereignisse überwacht werden.

Mit Dotcom-Monitor können Benutzer Berichte über den Zeitpunkt der Ausführung von JavaScript-Anforderungen oder den Zeitpunkt der Verarbeitung und Ausführung einer bestimmten Benutzeraktion auf der Zielseite konfigurieren. Um Daten zu den JavaScript-Metriken in Geräteberichten zu empfangen, verwenden Sie Network Watcher- und Time Watcher-Inlinefunktionen in ES Recorder.

Auch für Webanwendungen, die mit AJAX-Technologie erstellt wurden, können Sie AJAX-Anforderungsmetriken im Wasserfalldiagrammdes Geräts erkennen.

Zusammenfassung

Zusammenfassend lässt sich sagen, dass beim Einrichten der Überwachung für dynamische Webseiten und Anwendungen eine Überwachungslösung verwendet wird, die echte Browser verwendet, um alle JavaScript-Ereignisse im Browserfenster abzufangen, was Ihnen die genauesten Überwachungsergebnisse liefert.

Um die Leistung dynamischer Inhalte und Funktionen in SPAs zu überwachen, sollte die Inhaltsvalidierung (Bild- und Schlüsselwortvalidierung) in realen Browserumgebungen und die Überwachung der JavaScript-Leistungsmetriken durchgeführt werden.