Aufgrund der Vielzahl integrierter Web-Technologien, die in modernen Webseiten enthalten sind, können 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-Inlineelementen 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 der 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, als die Seitenlade 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: Der 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 SPAs

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: Überwachung dynamischer Webanwendungen

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, sollten die Inhaltsüberprüfung (Bild- und Schlüsselwortvalidierung) in realen Browserumgebungen und die Überwachung der JavaScript-Leistungsmetriken durchgeführt werden.

  • Frontend-Frameworks zum Erstellen Ihrer dynamischen Webanwendung

    Frontend-Frameworks definieren das Erscheinungsbild der Seiten, die Sie als Teil einer Webanwendung im Browserfenster sehen. Im Gegensatz zu Serverframeworks funktionieren Frontend-Frameworks nicht mit der Geschäftslogik von Webanwendungen. Diese Frameworks führen ihre gesamte Arbeit in einem Browser aus. Mit verschiedenen Frontend-Frameworks können Sie neue Benutzeroberflächen erstellen, komplizierte Animationen zu einer Webseite hinzufügen und Single Page-Anwendungen implementieren. In diesem Artikel werden wir uns JavaScript-basierte Frameworks genauer ansehen und einige Vor- und Nachteile deren verwenden, um den Prozess der Benutzeroberflächenentwicklung zu erleichtern.

    Heutzutage gibt es eine Handvoll JavaScript-Frontend-Frameworks auf dem Markt. Hier ist die Liste von sechs Frameworks, die in der Web-Entwicklungs-Community am beliebtesten sind:

    • Angular – ist ein Open-Source-Frontend-Framework, das auf JavaScript von Google basiert. Es ist spezialisiert auf die Entwicklung von Single Page Applications (SPA). Das Framework ermöglicht das Erstellen von clientseitigen Web-Apps von Grund auf, indem HTML als Vorlagensprache verwendet wird. Mit zusätzlichen benutzerdefinierten HTML-Attributen können Sie die Anwendungskomponenten klar beschreiben. Weitere Informationen zur Überwachung von AngularJS-basierten Anwendungen finden Sie in unserem Blogbeitrag.
    • Reagieren – formal ist es kein JavaScript-Framework, sondern eine Front-End-Bibliothek, die zum Erstellen von Benutzeroberflächen verwendet wird. Es ist Open-Source von Facebook eingeführt und weit verbreitet von Web-Entwickler auf der ganzen Welt verwendet. Weitere Informationen zur Überwachung von Webanwendungen, die in ReactJS geschrieben wurden, finden Sie in unserem Blogbeitrag.
    • Vue.js – ist ein Frontend-Framework, das mit Einzeldateikomponenten und einseitigen Verbindungen zwischen ihnen arbeitet. Die Befehlszeilenschnittstelle des Vue, das VUE CLI-Tool, macht den Entwicklungsprozess schneller und einfacher. Weitere Informationen zur Überwachung von Webanwendungen, die mit VueJS erstellt wurden, finden Sie in unserem Beitrag.
    • Ember – das Hauptmerkmal von EmberJS ist die Datenbindung. Der Datenbindungsansatz ermöglicht es Ihnen, eine JavaScript-Variable zu erstellen, und wenn sich der Wert dieser Variablen ändert, wird der Teil der Anwendung, der an diese Variable gebunden ist, aktualisiert.
    • Knockout – ist ein Open-Source-Framework, das mit dem MVVM-Modell (Model-View-ViewModel) funktioniert. Es wird in JavaScript ohne externe Abhängigkeiten entwickelt. Knockout ist leicht und einfach zu bedienen und besonders effizient bei der Datenbindung. Das Framework ist eine gute Wahl zum Erstellen von Einzelseitenanwendungen. Weitere Informationen zu Herausforderungen bei der Überwachung von Knockout.js Web-Apps finden Sie in unserem Blog.
    • AJAX – in der Tat, AJAX (Asynchronous Javascript und XML) ist eine Synthese von Javascript und XML-Technologien. Es ist ein Framework, das häufig mit dem Begriff Web 2.0 verknüpft ist und als neueste Webanwendung anpries. Weitere Informationen zur Überwachung von AJAX-basierten Anwendungen finden Sie in unserem Beitrag.

    Was ist JavaScript Framework? Warum sollten Sie es versuchen?

    JS-Frameworks sind JavaScript-Programmierbibliotheken mit vorgefertigtem Code, mit dem Webentwickler allgemeine Programmierfunktionen und -aufgaben implementieren können. Es ist die Grundlage für den Aufbau von Websites oder Web-Anwendungen rund um.
    Lassen Sie uns erklären, warum JavaScript-Frameworks so viele Follower unter UI-Entwicklern gesammelt haben. Obwohl der Codierungsprozess ohne die Verwendung von Frameworks vollständig möglich ist, kann die richtige Umgebung diesen Prozess erheblich vereinfachen. Darüber hinaus sind die meisten JS-Frameworks frei und Open-Source, was ihre Integration in den Entwicklungsprozess noch einfacher macht.
    Erstens erhöht die Verwendung eines JS-Frameworks Ihre Produktivität. UI-Entwickler müssen nicht mehr viel Code manuell schreiben, sie können vordefinierte und gebrauchsfertige Funktionen und Codeausschnitte verwenden. Hiermit können Sie vorgefertigte Codevorlagen erweitern, um einige Standardwebkomponenten auf Ihrer Website zu erstellen. Frameworks sind für das Website-Design reaktionsschneller und werden von Website-Entwicklern geschätzt. Werfen wir einen Blick auf die besten JS Frameworks.

    Ein großer Teil des heutigen Marktes wird von drei beliebten Frameworks gehalten: React, Angular und Vue. Diese Frameworks werden als reaktiv bezeichnet, da sie auf Änderungen im Anwendungsstatus reagieren und automatisch eine Benutzeroberfläche aktualisieren. Wenn Sie beispielsweise eine Variable deklarieren, die die Größe eines Textfelds auf einer Webseite steuert, und dann die Variable ändern, ändert sich die Größe des Felds von selbst ohne manuelle Codierung. Sie können eine beliebige Programmiersprache verwenden, Daten dafür extrahieren, in JSON, XML oder anderen maschinenlesbaren Sprachen auf dem Backend packen und dann an das Frontend übergeben. Das JS-Framework wiederum übernimmt die gesamte Arbeit, die auf dem Frontend verbleibt. Das Framework zeichnet Steuerelemente, richtet Animationen ein, überprüft die Daten, stellt die Informationen gemäß den Vorlieben des Benutzers dar und implementiert die Geschäftslogik. Alle Arbeiten werden in einem Browser ausgeführt und nur Daten (manchmal neue Teile der Vorlage und Geschäftslogikregeln) werden zwischen dem Browser und dem Webserver übertragen. Daher sind reaktive Frameworks unverzichtbare Tools für die Implementierung des Single Page Application-Konzepts, wenn alle Arbeiten auf einem Bildschirm ablaufen.

    Vue.JS

    Vue ist eines der beliebten Frontend-Frameworks. Es ist einfach und unkompliziert im Vergleich zum ausgeklügelten Winkel. Neben der Leichtgewichtung sind die wichtigsten Vorteile das visuelle DOM, der Komponentenansatz und die bidirektionale Datenbindung. Vue ist vielseitig, Multitasking und kann sowohl einfache als auch dynamische Prozesse mit Leichtigkeit bewältigen. Es kann verwendet werden, um sowohl Web- als auch mobile Anwendungen zu erstellen. Darüber hinaus wird es erfolgreich verwendet, um progressive Web-Apps (PWA) zu erstellen, die unabhängig vom Geräte- oder Netzwerktyp wie Pinterest, Spotify und etc. sind.

    Vue verfügt über umfangreiche und detaillierte Dokumentationen, die Ihnen helfen, umfassende und detaillierte Informationen über die Rahmenkonzepte zu erhalten. Das Framework unterstützt eine einfache Syntax, die von JavaScript-Programmierern leicht verwendet und verstanden werden kann. Und einer der Hauptvorteile des Frameworks ist die integrierte Typescript-Unterstützung, die es ermöglicht, potenzielle Fehler in den Kompilierungsphasen zu vermeiden. Scriptscript-Unterstützung ist bei der Erstellung von Großanwendungen äußerst praktisch.

    Vue.js wird für flexible Designs empfohlen, so dass Sie alles von Grund auf neu bauen und erfolgreich große Projekte entwickeln können.

    Das einzige, was Sie davon abhalten kann, es zu benutzen, ist das Fehlen von Unterstützung von Branchenriesen wie Facebook und Google. Wir sollten auch erwähnen, dass einige Beschreibungen noch nur auf Chinesisch verfügbar sind. Dies bringt dem Entwicklungsprozess in einigen Phasen einige Schwierigkeiten. Wenn man jedoch bedenkt, wie beliebt dieser Rahmen geworden ist, kann sich der Trend in naher Zukunft ändern.

    Reagieren

    Reagieren ist einer der einfachsten Rahmen zu lernen. Das Framework wurde von Facebook entwickelt, um Wartungsprobleme aufgrund der ständigen Hinzufügung von Funktionen zur Anwendung zu beheben. React ist die perfekte Plattform für alle, die viel Traffic auf ihrer Website erwarten und eine stabile Plattform benötigen, um sie zu pflegen. Moderne Open-Source-React zeichnet sich durch sein virtuelles Dokumentobjektmodell (DOM) aus, das außergewöhnliche Funktionalität bietet und für Stabilität und reibungslosen Ablauf einer Webanwendung sorgt. Das Framework kann nicht nur auf der Client-Seite verwendet werden, sondern Sie können es auf der Serverseite verwenden und darüber hinaus kann React mit anderen Frameworks verwendet werden.

    Die Haupteigenschaft von React, die es auszeichnet, ist die Fähigkeit, UI-Komponenten wiederzuverwenden. Sie können eine UI-Komponente einmal erstellen und in anderen Teilen der Anwendung wiederverwenden. Darüber hinaus können Sie UI-Komponenten erstellen, ohne neue Klassen zu schreiben. Dies macht es einfacher, React zu lernen. Außerdem sind React Developer Tools immer in der Hand, um bei der Inspektion von React-Komponentenhierarchien zu helfen.

    React hat viele Vorteile. Wir haben nur einige von ihnen in diesem Artikel erwähnt, aber es ist offensichtlich, dass das Framework eine gute Wahl für jeden sein kann, der Benutzeroberflächen mit wiederverwendbaren UI-Komponenten erstellen muss, insbesondere wird es für die SPA-Entwicklung empfohlen. Zusammenfassend lässt sich zusammenfassen, dass React das zuverlässigste Frontend-Framework auf dem Markt ist, wenn Sie eine interaktive Schnittstelle entwickeln möchten.

    Was das Mastering von JSX zum Erstellen eines React-Projekts betrifft, so kann es schwierig sein, JSX zu verwenden, es sei denn, Sie verfügen zumindest über grundlegende Erfahrung in Javascript. Außerdem können Sie aufgrund zahlreicher und ständiger Aktualisierungen Schwierigkeiten haben, die React-Dokumentation auf dem neuesten Stand zu halten.

    Eckig

    Die Liste der besten Front-End-Frameworks wäre ohne Angular nicht vollständig. Im Gegensatz zu React ist Angular in seiner zweiseitigen Datenbindungsfunktion einzigartig. Dies bedeutet, dass Sie das Modell und die Ansicht immer in Echtzeit synchronisieren. Mit anderen Worten, jede Änderung des Modells wird sofort in der Ansicht und umgekehrt widergespiegelt. Angular bietet die Möglichkeit, Komponenten wiederzuverwenden und sie einfach mithilfe der Abhängigkeitsinjektion zu verwalten. Das Framework wird mit den am häufigsten verwendeten Funktionen ausgeliefert, sodass Sie weniger Code für Ihr Projekt schreiben können.

    Angular verbessert die Leistung von Webanwendungen, indem Inhalte in kürzester Zeit dynamisch aktualisiert werden, indem eine zweiseitige Datenbindung verwendet wird. Es ist die beste Wahl für Unternehmensanwendungen und dynamische Webanwendungen.