Was ist ein DOM? Was frisst es?

Das DOM (Document Object Model) ist die Basis für Webseiten und deren Entwicklung. Es handelt sich um eine Programmierschnittstelle für HTML- und XML-Dokumente, die die Struktur eines Dokuments in einem baumartigen Objekt darstellt. Mit Zweigen und Blättern. Jedes Element, Attribut und jeder Textabschnitt im Dokument wird zu einem Knoten in diesem Baum. Es ermöglicht JavaScript, mit HTML-Elementen zu interagieren, diese zu ändern oder neue Elemente hinzuzufügen. Dies ist eine grobe Zusammenfassung dessen, was jeder Mensch im Web erlebt: Interaktion, Veränderlichkeit, dynamische visuelle Hinweise und Elemente. Wenn Sie auf eine Schaltfläche oder ein glänzendes Menü klicken, erwartet Ihr Gehirn, dass etwas passiert. Auf einen Satz zum Ändern, auf das Laden einer neuen Seite oder auf ein Popup mit einem grünen Häkchen, das uns mitteilt, dass unsere Online-Bestellung erfolgreich bezahlt wurde.

Das DOM zu schnell zu manipulieren, jede Sekunde, ist ein großes Tabu für die Benutzerbindung oder sogar für die grundlegende Interaktion des Benutzers. Trotz all des dynamischen Verhaltens, das wir erstellen und das Benutzererlebnis erweitern können, kann die übermäßige Nutzung von DOM-Manipulationen sehr frustrierend sein. Und das letzte Wort kommt immer vom Benutzer. Wenn im Hintergrund Ihrer Seite wichtige Vorgänge wie das Abrufen von Daten ausgeführt werden, die Leistung jedoch nachlässt und von Minute zu Minute nach der Interaktion des Benutzers schlechter wird, kann es sehr schwierig und entmutigend sein, die Engpässe zu lokalisieren.

Ein Beispiel für eine einfache Möglichkeit, die grundlegende Vorgehensweise zu nutzen und sie schneller zu erledigen, ist die Verwendung von textContent aus Vanilla js. Ja, ich weiß. Meistens benötigen wir einen komplexen Lebenszyklus für Komponenten, die so dynamisch und veränderlich sind, dass wir Zustandsverwaltung und dergleichen verwenden müssen. Aber das ist nicht immer der Fall. Wenn Sie nur einmal pro Sitzung Text ändern oder ein Cookie aktualisieren, müssen Sie dann wirklich eine so komplexe Logik und ressourcenhungrige Option verwenden? Die textContent-Funktion ist die schnellste in js zum Bearbeiten von Text im Vergleich zu ähnlichen Funktionsoptionen, zum Beispiel der populäreren innerHtml-Methode. Sehen Sie sich diese zeitgesteuerten Tests als Referenz an.

Warum?

Sie können den Maschinenspeicher des Benutzers für andere, wirkungsvollere Vorgänge reservieren. Manchmal ist es beispielsweise ein Muss, auf wirklich alten Android- oder Apple-Geräten zugänglich und einigermaßen schnell zu sein. Oder vielleicht gibt Ihr API-Aufruf einen JSON-Code zurück, der so groß ist, dass Sie ein paar Sekunden für das Parsen und die ordnungsgemäße Bearbeitung benötigen. Es zählt also jede Sekunde, in der der Benutzer kein Feedback erhält oder beim Betrachten einer CSS-Animation auf dem Bildschirm hängen bleibt.

Ich habe in letzter Zeit viel gelernt, indem ich in JavaScript ohne Abhängigkeiten programmiert habe, als Herausforderung und Lernerfahrung. Zum Beispiel Daten abrufen und eine To-Do-App nur mit HTML, CSS und JavaScript erstellen. Kein NPM, keine Bibliotheken. Und ich habe eine Reihe von Web-API-Methoden und -Objekten entdeckt, von denen ich noch nie zuvor gehört hatte, wie zum Beispiel das DocumentFragment-Objekt. Es erstellt ein leeres „Fragment“ einer DOM-Struktur und ermöglicht es Ihnen, es zu manipulieren und zu füllen, bevor Sie das DOM der Seite tatsächlich ändern. Sie laden also ein Objekt mit Ihrer Menüliste oder den Titeln Ihres superschicken KI-gestützten Tools, und nachdem Sie mit den Anhängevorgängen und dem Verschachteln von Tags fertig sind, patchen Sie es einmal im DOM. Auf diese Weise erfolgt das Parsen nur einmal in einem Durchgang, anstatt eine for-Schleife mit vielen identischen Aufrufen durchzuführen und am Ende jedes Aufrufs ein neues Parsen des Baums zu erfordern.

Angenommen, ich klicke sehr schnell auf eine Schaltfläche, da mein Anwendungsfall ein sehr schnelles Rendern erfordert, mehr als einmal pro Sekunde. Die Verwendung Ihrer bevorzugten Zustandsverwaltungsbibliothek kann in diesem Fall eine Art Barriere darstellen, da nach jedem Klick ein neues Ereignis ausgelöst wurde und es daher standardmäßig ausgelöst werden muss, bevor die zweite Instanz des Ereignisses im Stapel gestartet wird. Abhängig von der Komplexität oder der Notwendigkeit eines asynchronen Vorgangs kann dies mehr als eine Sekunde dauern. In diesem Anwendungsfall handelt es sich um einen Deal Breaker. So kann die Auswahl des richtigen Werkzeugs einfacher, kürzer und noch schneller erfolgen. Heutzutage bieten beliebte Bibliotheken Optionen zur Lösung dieses Problems an, z. B. das Unterbrechen der Ausführung eines erneuten Renderns, wenn kürzlich ein neues identisches Ereignis ausgelöst wurde. Aber es geht mir hier nicht nur darum, eine hübsche und modern aussehende Webanwendung zu entwickeln. Aber um Ihr eigenes Leben einfacher zu machen, indem Sie die Wartung so einfach wie möglich machen, und sich nicht selbst auf den Fuß schießen, indem Sie blind auf Codeblöcke vertrauen, die

geschrieben hat und sagt, das sei die beste Option. Wenn Sie diese Pakete und Bibliotheken bereits installieren, um Ihr Projekt zu starten, warum untersuchen Sie dann nicht, warum Fehler und Ausnahmen unbekannte Funktionsaufrufe oder kryptische Meldungen auf der Konsole ausspucken?

Fazit und etwas zusätzliches Geschwafel

Heutzutage kann es sehr schnell und einfach sein, einen Dienst in der Cloud oder in einem sehr verbreiteten Dienst kostenlos zum Laufen zu bringen. Die Verwendung eines Boiler-Plate-ähnlichen Ausgangspunkts kann sehr hilfreich sein und Ihnen Zeit sparen, da Sie sich nicht um sehr grundlegende und wiederkehrende Aufgaben kümmern müssen. Geben Sie einfach einen einzigen Befehl in Ihr Terminal ein und schon haben Sie es, Basis-Routing und eine Hallo-Welt-Seite, die auf einem lokalen Server läuft.

Niemand, nirgendwo im Internet wird immer wissen, was eine bestimmte Bibliothek oder ein ganzes Framework unter der Haube tut, aber je mehr Sie wissen, wie die Dinge funktionieren, desto häufiger werden Sie in der Lage sein, fundiertere Entscheidungen zu treffen und effizienter zu arbeiten.

Die beliebtesten Frameworks für die Webentwicklung leisten hervorragende Arbeit, um das erneute Rendern tatsächlich zu optimieren und das DOM mithilfe von Ressourcen wie einem virtuellen DOM zu manipulieren oder eine Art Persistenz für sehr anspruchsvolle Vorgänge zum Abrufen von Daten zu implementieren.

Die Webentwickler-Tools Ihres bevorzugten Webbrowsers sind hier Ihr bester Freund. Neuere Versionen dieser Tools können Ihnen Telemetrie liefern und sogar zeigen, welcher Teil Ihres Codes oder welche Aufrufe den möglichen Engpass Ihrer Leistung darstellen.

Wenn Sie wissen, wie die JavaScript-Sprache funktioniert oder wie sie ihre Vorgehensweise umsetzt, können Sie leicht Situationen erkennen, in denen eine gebrauchsfertige Funktion aus Ihrer Lieblingsbibliothek Sie dazu zwingen könnte, eine aufgeblähtere Codebasis zu erstellen und sich nicht auf die Lösung des Problems zu konzentrieren Problem. Es könnte Ihre Aufmerksamkeit auf die Replikation eines Codeabschnitts lenken, den Sie hunderte Male geschrieben haben. Und selbst wenn KI Ihre Produktivität steigert, tappen Sie möglicherweise in die Falle, eine von Ihrem künstlichen Begleiter vorgeschlagene Lösung zu verwenden und die Wartung in Zukunft nur noch schwieriger zu machen.

Keine Sorge, manchmal wissen wir es einfach nicht besser. Wie gesagt, niemand kann immer alles wissen.

Experimente und Fehler in verzeihenderen Momenten zu machen, wird Ihnen sehr helfen und Ihnen die Werkzeuge an die Hand geben, die Sie brauchen, um es besser zu machen. Wenn Sie das nächste Mal auf etwas so Einfaches wie die Bereitstellung eines statischen Dateiservers oder die Programmierung einer wirklich komplexen Logik für einen sehr Nischenanwendungsfall stoßen, werden Sie mit der Kenntnis der Grundlagen wirklich weit kommen und mehr Klarheit bei der Bewältigung neuer Probleme in Ihrer Karriere erhalten.

Ich empfehle dringend, sich die Dokumente der Web-API anzusehen. Schauen Sie sich auch in Online-Blogs, sozialen Medien oder Ressourcen rund um die Webentwicklung um.

Wenn ich einen Fehler gemacht habe, was wahrscheinlich ist, lassen Sie es mich bitte in den Kommentaren wissen. Ich habe ein offenes Ohr für Kritik und neue Ideen, also teilen Sie sie bitte, wenn Sie möchten!