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.
Eine zu schnelle Manipulation des DOM, 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 schlechter wird, nachdem der Benutzer damit interagiert, 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 benötigen. 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.
Nehmen wir an, 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 Codeblöcken vertrauen, die jemand 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?
結論ととりとめのない余談
クラウドまたは非常に一般的なサービスでサービスを無料で立ち上げて実行することは、今日では非常に迅速かつ簡単に行うことができます。出発点のようなボイラー プレートを使用すると、非常に役立ち、非常に基本的な繰り返しのタスクを心配する必要がなく、時間を節約できます。ターミナルに 1 つのコマンドを入力するだけで、ベース ルーティングと hello world ページがローカル サーバー上で実行されます。
決定されたライブラリやフレームワーク全体が内部で何をしているのかを常に知ることは、インターネット上のどこにもありませんが、物事がどのように機能するかを知れば知るほど、より多くの情報に基づいて決定を下し、効率的に作業できるようになります。
Web 開発用の最も一般的なフレームワークは、実際に再レンダリングを最適化したり、仮想 DOM などのリソースを使用して DOM を操作したり、データを取得する非常に要求の厳しい操作のためにある種の永続性を実装したりするという非常に優れた機能を果たします。
ここでは、選択した Web ブラウザーの Web 開発者ツールがあなたの親友です。これらのツールの新しいバージョンでは、テレメトリが提供され、コードのどの部分またはどの呼び出しがパフォーマンスの妨げになる可能性があるかを示すこともできます。
JavaScript 言語がどのように機能するか、またはその動作方法がどのように実装されているかを知ることで、お気に入りのライブラリからすぐに使用できる関数を使用することで、より肥大化したコード ベースの作成を余儀なくされ、問題の解決に集中できなくなる可能性がある状況を簡単に特定できます。問題。自分が何百回も書いたコードを複製することに注意が奪われてしまうかもしれません。また、生産性を向上させるために AI を使用したとしても、人工の仲間が提案したソリューションを使用するという罠に陥る可能性があり、実際には将来の保守が困難になるだけです。
心配しないでください。私たちにはよくわからないこともあります。先ほども言いましたが、誰も常にすべてを知ることはできません。
より寛容な瞬間に実験して間違いを犯すことは、あなたにとって大きな助けとなり、より良い仕事をするために必要なツールを与えてくれます。次回、静的ファイル サーバーをデプロイしたり、非常に特殊なユースケースに非常に複雑なロジックをコーディングしたりするなど、単純なことを行うことに遭遇したとき、基本を知っていれば、かなり遠くまで到達し、キャリアの中で新しい問題に直面するときにより明確になります。
Web API のドキュメントを確認することを強くお勧めします。同様に、オンライン ブログ、ソーシャル メディア、または Web 開発に焦点を当てたリソースを見て回ってください。
もし私が間違いを犯した場合は、おそらくそれをコメントで知らせてください。批判や新しいアイデアは大歓迎ですので、よろしければシェアしてください!
Das obige ist der detaillierte Inhalt vonMachen Sie Ihre Webseite schneller. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
