Guten Tag, Freunde!In diesem Artikel stellen wir die Intersection Observer API vor, ein leistungsstarkes neues Tool zum langsamen Laden von Bildern und anderen Elementen auf einer Seite, das von allen modernen Browsern unterstützt wird. Mit diesem Tool können wir die Sichtbarkeit von Elementen steuern, indem wir das vorläufige oder verzögerte Laden unserer DOM-Inhalte definieren.Während sich das Web weiterentwickelt, unterstützen Browser immer mehr neue Funktionen und APIs, aber etwas tut Entwicklern immer noch weh - DOM-Rendering. Wenn wir mit der Entwicklung einer neuen Anwendung beginnen, Komponenten erstellen, über die HTML-Struktur nachdenken, Elemente mit CSS formatieren, denken wir auch über den Renderprozess nach, wie unsere Seite im Allgemeinen aussehen wird und über einige andere wichtige Dinge, die sorgfältige Behandlung und Auswirkungen erfordern Anwendungs-Rendering.Dies wirkt sich wiederum darauf aus, wie wir unsere Elemente erstellen, wie unser CSS organisiert wird, welche Bibliotheken und Frameworks im Projekt verwendet werden usw. Aus diesem Grund ist das Rendern für Entwickler so wichtig.Einer der Gründe für die Beliebtheit der React-Bibliothek in der Entwicklergemeinde ist die Tatsache, dass sie ein virtuelles DOM verwendet. Im Wesentlichen handelt es sich hierbei um eine virtuelle Darstellung des realen DOM, die Sie nach Belieben steuern können. Nach allen Aktualisierungen entscheidet das virtuelle DOM, welche Änderungen am ursprünglichen DOM vorgenommen werden müssen, und nimmt diese Änderungen "nahtlos" vor. Es ist nicht erforderlich, die gesamte Seite zu aktualisieren, wenn Sie ein Element ändern. Dies ist einer der wichtigsten Vorteile von React gegenüber anderen Bibliotheken und Frameworks. DOM-Rendering ist eine kostspielige (in Bezug auf die Leistung) Aufgabe, die React problemlos erledigt.Mit einigen Bibliotheken und APIs können wir das Rendern von Elementen unserer Anwendungen verbessern. Wir werden eine davon kennenlernen - die Intersection Observer API. Aber zuerst wollen wir herausfinden, was "faul" das Laden von Bildern ist.Wie funktioniert das verzögerte Laden von Bildern?
Das verzögerte Laden ist eine der Techniken zum Rendern von Seiteninhalten. Das Konzept des "faulen" Ladens besteht darin, dass wir anstelle des vollständigen Ladens der Seite nur die erforderlichen Teile laden und das Laden der verbleibenden Teile verschieben (verzögern), bis sie vom Benutzer benötigt werden.Ein Beispiel für einen "faulen" Download, von dem Sie wahrscheinlich gehört haben oder auf den Sie gestoßen sind, ist das endlose Scrollen der Seite. Dies funktioniert ungefähr so: Der Benutzer besucht die Seite, der ursprüngliche Inhalt wird geladen, und erst nachdem der Benutzer die Seite bis zum Ende gescrollt hat, wird der nächste Teil des Inhalts geladen. In diesem Fall muss nicht der gesamte Inhalt auf einmal heruntergeladen werden, was die Anwendung erheblich erleichtert.Wenn ein "fauler" Download nur zum Herunterladen von "benutzergenerierten" Inhalten dient, wie heißt die entgegengesetzte Technik? Einige haben schon einmal von faulem Laden gehört, aber nicht das Gegenteil. Das Gegenteil von "faulem" Laden ist "energetisches" Laden (andere Optionen sind ungeduldig, schnelllebig) - wenn der gesamte Inhalt sofort gerendert wird.Wissen Sie, dass es HTML-Attribute zum verzögerten Laden von Bildern gibt? Um sie zu verwenden, fügen Sie dem Element "img" oder "iframe" einfach "load =" faul "hinzu.
Mit dieser Technik erhalten wir viele Vorteile: Das Laden nur der erforderlichen Ressourcen reduziert den Speicherverbrauch und letztendlich die Ladezeit der Seite. Es verhindert auch das Rendern von "nicht beanspruchtem" Code, wodurch die Anwendung für Bedingungen mit geringer Netzwerkbandbreite optimiert wird. Es gibt jedoch einige Nachteile: Dies kann das Ranking der Seite durch Suchmaschinen beeinflussen. Darüber hinaus dauert es einige Zeit, die richtige Bibliothek oder API für die Arbeit auszuwählen.Intersection Observer API
JavaScript entwickelt sich so schnell, dass wir fast jedes Jahr eine neue API erhalten. Das Hauptziel der neuen APIs ist es, großartige Anwendungen und Seiten zu erstellen.Intersection Observer ist eine API, mit der Sie die Sichtbarkeit und Position von DOM-Elementen überwachen können. Die Sache ist, dass es asynchron arbeitet und es Ihnen ermöglicht, die Sichtbarkeit von Elementen reibungslos (unmerklich) zu ändern und das vorläufige oder verzögerte Laden des Inhalts unseres DOM zu bestimmen.
Vor einigen Jahren hatten wir keine API oder ein anderes Tool zum Positionieren und Verfolgen eines Elements. Wir mussten verrückte und riesige Funktionen schreiben, teure (in Bezug auf die Leistung) Methoden erstellen, die mehr Probleme verursachten. Mit der Intersection Observer API können wir coole Dinge tun wie:- Endloses Scrollen von Seiten - Erstellen Sie endloses Scrollen von Tabellen, Listen, Rastercontainern usw. Es war noch nie so einfach.
- Bilder - Warum alle Bilder auf einmal hochladen, wenn Sie den "faulen" Download verwenden und nur den Inhalt anzeigen können, den der Benutzer gerade benötigt?
- Elemente überwachen - Sie können die Elemente auf der Seite überwachen. Beispielsweise erhalten Sie möglicherweise Nachrichten über die Schließung von Anzeigen.
Hier fängt alles an:let myFirstObserver = new IntersectionObserver(callback, options)
Wir initialisieren den IntersectionObserver-Konstruktor und übergeben ihm zwei Parameter. Der erste Parameter ist eine Rückruffunktion, die als Reaktion auf den Schnittpunkt unseres Elements mit dem Ansichtsfenster (d. H. Wenn das Element die Grenzen des Ansichtsfensters überschreitet) oder mit einem anderen Element aufgerufen wird. Der Parameter options ist ein Objekt, das die Bedingungen zum Starten der Rückruffunktion steuert. Dieses Objekt hat die folgenden Felder:- root - das übergeordnete Element, das als Ansichtsfenster für das Zielelement dient (für das Element, das wir beobachten)
- rootMargin - der äußere Rand um das Wurzelelement (die Werte dieses Feldes ähneln den Randwerten in CSS). Diese Werte können sich für jede Seite der Wurzel ändern, bevor der Schnittpunkt festgeschrieben wird.
- Schwellenwert - Eine Zahl oder ein Array von Zahlen, die den Prozentsatz der Schnittmenge des Zielelements mit dem Stammelement bestimmt, bei dem die Rückruffunktion gestartet wird
Werfen wir einen Blick auf die Verwendung der Intersection Observer-API:let options = {
root: document.querySelector('.scroll-list'),
rootMargin: '5px',
threshold: 0.5
}
let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log('element', element)) }, options)
Um mit dem „Überwachen“ eines Elements zu beginnen, müssen Sie das Ziel bestimmen und den Beobachter mithilfe der „Beobachten“ -Methode aufrufen und das Ziel als Parameter übergeben:let myDivTarget = document.querySelector('.header')
observer.observe(myDivTarget)
Es ist zu beachten, dass alle vom Beobachter beobachteten Elemente Rechtecke sind. Unregelmäßig geformte Elemente passen in das kleinste Rechteck.Was ist mit der Browserunterstützung? Die Intersection Observer-API wird von allen modernen Browsern wie Chrome, Edge, Firefox und Opera unterstützt.
Wenn Sie mit vielen Daten arbeiten möchten, z. B. mit einer Tabelle, die viele Informationen enthält, ist die Intersection Observer-API für Sie äußerst nützlich.Einer der Vorteile dieser API besteht darin, dass Sie zur Lösung solcher Probleme keine Bibliothek mehr verwenden müssen.Fazit
Wir haben die Intersection Observer-API und ihre Verwendung zum verzögerten Laden, Beobachten der Position von DOM-Elementen usw. untersucht. Browser unterstützen immer mehr APIs, die die Renderzeit von Seiten verkürzen, vor allem für Benutzer mit einer langsamen Verbindung, die Größe des Projekts reduzieren und nur relevante Inhalte anzeigen.Von einem Übersetzer: Der Artikel schien mir nicht ausreichend informativ zu sein, daher hier Links zu zusätzlicher Literatur:Vielen Dank für Ihre Aufmerksamkeit.