Spezifische Verwendung von Lazy Loading und Preloading in js

Verzögertes Laden (Lazy Loading) und Vorladen sind häufig eingesetzte Mittel zur Weboptimierung. .

1. Verzögertes Laden (Lazy Loading)

Prinzip: Das Laden der Daten erfolgt nur dann, wenn diese wirklich benötigt werden.
Zweck: Der verzögerte Lademechanismus wird vorgeschlagen, um unnötigen Leistungsmehraufwand zu vermeiden

Mehrere Möglichkeiten zum Implementieren von Lazy Loading

1. Lassen Sie js zuletzt laden

Verwendung: Platzieren Sie die externen JS-Dateien unten auf der Seite. Zweck: Lassen Sie JS zuletzt einführen, um das Laden der Seite zu beschleunigen. Beschreibung:
Der Grund, warum der Browser den synchronen Modus verwendet, besteht darin, dass er normalerweise js-Dateien lädt oder <script>-Tags am Ende der Struktur einfügt, da dies nachfolgende Vorgänge des Browsers blockiert. Daher wird es am Ende platziert. Wenn die Seitenstruktur und der Stil vollständig gerendert sind, wird js ausgeführt, um die Benutzererfahrung zu verbessern.

2. Das Defer-Attribut

Verwendung: Definieren Sie das Defer-Attribut für das <script>-Tag.
Zweck: Ermöglicht die Ausführung von Skripten, ohne den Aufbau der Seite zu beeinträchtigen. Das heißt, das Skript wird verzögert, bis die gesamte Seite analysiert ist.

<!DOCTYPE html>
<html>
<Kopf>
  <script src="test1.js" defer="defer"></script>
  <script src="test2.js" defer="defer"></script>
</Kopf>
<Text>
<!-- Fügen Sie hier Ihren Inhalt ein -->
</body>
</html>

veranschaulichen:

Obwohl das <script>-Element im <head>-Element platziert ist, wird das eingefügte Skript verzögert, bis der Browser vor der Ausführung auf das Tag </html> stößt.
Wenn der Browser ein Skript mit Defer-Attribut analysiert, lädt er das Skript mit Defer-Attribut parallel herunter, ohne die nachfolgende Verarbeitung der Seite zu blockieren.
Es wird garantiert, dass alle Defer-Skripte der Reihe nach ausgeführt werden. (In der Praxis werden verzögerte Skripte jedoch nicht unbedingt in der richtigen Reihenfolge ausgeführt. Daher ist es am besten, nur ein verzögertes Skript einzuschließen.)
Das Defer-Attribut gilt nur für externe Skriptdateien.

3. Asynchrones Attribut

Verwendung: Definieren Sie das asynchrone Attribut für das <script>-Tag.
Zweck: Lassen Sie die Seite nicht darauf warten, dass Skripte heruntergeladen und ausgeführt werden, um andere Inhalte der Seite asynchron zu laden.

<!DOCTYPE html>
<html>
<Kopf>
  <script src="test1.js" async></script>
  <script src="test2.js" async></script>
</Kopf>
<Text>
<!-- Fügen Sie hier Ihren Inhalt ein -->
</body>
</html>

Der Browser lädt das Skript sofort herunter, verhindert jedoch nicht andere Vorgänge auf der Seite, z. B. das Herunterladen anderer Ressourcen oder das Warten auf das Laden anderer Skripte. Das Laden und Rendern nachfolgender Dokumentelemente erfolgt parallel zum Laden und Ausführen von main.js. Dabei handelt es sich um einen asynchronen Prozess. Sie werden vor dem Onload-Ereignis abgeschlossen.

veranschaulichen:

Der Browser lädt das Skript sofort herunter, es beeinträchtigt jedoch nicht andere Vorgänge auf der Seite. Das Laden und Rendern nachfolgender Dokumentelemente erfolgt parallel zum Laden und Ausführen des Skripts.
Dieser Vorgang ist asynchron und wird vor dem Onload-Ereignis abgeschlossen.
Nicht alle Defer-Skripte können die Ladereihenfolge steuern. .
Das asyncr-Attribut gilt nur für externe Skriptdateien.

4. DOM dynamisch erstellen

//Diese Codes sollten vor dem Tag </body> platziert werden (nahe dem Ende der HTML-Datei)
<Skripttyp="text/javascript">
  Funktion downloadJSAtOnload() {
    varelement = document.createElement("Skript");
    element.src = "defer.js";
    Dokument.Body.AnhängenUntergeordnetesElement(Element);
  }
  wenn (window.addEventListener)
   window.addEventListener("laden",downloadJSAtOnload, false);
  sonst wenn (window.attachEvent)
   window.attachEvent("beim Laden",downloadJSAtOnload);
  anders
   window.onload = downloadJSAtOnload;
</Skript>

5. Verwenden Sie die getScript-Methode von jQuery

Anwendung:

Query.getScript(URL,Erfolg(Antwort,Status))

url (erforderlich): die anzufordernde URL-Zeichenfolge
Erfolg (Antwort, Status) (optional): Gibt die Rückruffunktion an, die nach erfolgreicher Anforderung ausgeführt werden soll.

Die Parameter
Antwort - enthält die Ergebnisdaten der Anfrage
status - enthält den Status der Anfrage ("success", "notmodified", "error", "timeout" oder "parsererror")

Zweck: Laden und Ausführen von JavaScript-Dateien per HTTP-GET-Anfrage.

//Test.js laden und ausführen:
$.getScript("test.js");
// test.js laden und ausführen und nach Erfolg Informationen anzeigen $.getScript("test.js", function(){
 alert("Skript geladen und ausgeführt.");
});

6. Verwenden Sie setTimeout, um die Ladezeit der Methode zu verzögern

Zweck: Verzögertes Laden des JS-Codes, um Zeit zum Laden der Webseite zu haben

<Skripttyp="text/javascript">
 Funktion A(){
  $.post("/lord/login",{name:Benutzername,pwd:Passwort},function(){
   alert("Hallo Welt!");
  })
 }
 $(Funktion (){
  setTimeout("A()",1000); //Verzögerung 1 Sekunde})
</Skript>

Häufige Beispiele – Lazy Loading von Bildern

Prinzip: Ein Bild ist ein <img>-Tag. Ob der Browser eine Anfrage für das Bild initiiert, hängt vom src-Attribut von <img> ab. Der Schlüssel zur Implementierung von Lazy Loading besteht daher darin, dem src von <img> keinen Wert zuzuweisen, bevor das Bild in den sichtbaren Bereich gelangt. Auf diese Weise sendet der Browser keine Anfrage und wartet, bis das Bild in den sichtbaren Bereich gelangt, bevor er dem src einen Wert zuweist.

<img class="lazy" src="img/loading.gif" lazy-src="img/pic1.jpg" >
<img class="lazy" src="img/loading.gif" lazy-src="img/pic2.jpg" >

Funktion lazyload(){
 var sichtbar;
 $('img').jedes(Funktion () {
 if( typeof($(this).attr("lazy-src"))!="undefined" ){ // Bestimmen Sie, ob das Bild verzögert geladen werden muss visible = $(this).offset().top - $(window).scrollTop(); // Der Abstand zwischen dem Bild und dem oberen Rand if ((visible > 0) && (visible < $(window).height())) {// Bestimmen Sie, ob das Bild im sichtbaren Bereich ist visible = true;// Das Bild ist im sichtbaren Bereich } else {
    sichtbar = falsch; // Das Bild befindet sich nicht im sichtbaren Bereich}
  wenn (sichtbar) {
    $(diese).attr('src', $(diese).attr('lazy-src'));
  }
 }
 });
}
 //Öffnen Sie die Seite, um die Funktion lazyload() auszulösen.
 // Funktion beim Scrollen auslösen window.onscroll = function(){
 lazyload(Bilder);
 }

2. Vorladen

Prinzip: Bilder im Voraus laden und direkt aus dem lokalen Cache rendern, wenn Benutzer sie anzeigen müssen. Zweck: Front-End-Leistung zugunsten der Benutzererfahrung opfern, damit Benutzervorgänge so schnell wie möglich wiedergegeben werden.

Mehrere Möglichkeiten zum Implementieren des Vorladens

1. CSS-Implementierung

Prinzip: Bilder können mithilfe der CSS-Hintergrundeigenschaft auf einen Off-Screen-Hintergrund vorgeladen werden. Solange die Pfade zu diesen Bildern gleich bleiben, verwendet der Browser die vorinstallierten (zwischengespeicherten) Bilder während des Rendervorgangs, wenn sie an anderer Stelle auf der Webseite aufgerufen werden. Einfach, effizient und kein JavaScript erforderlich.

#preload-01 { Hintergrund: URL (upload/2022/web/image-01.png) keine Wiederholung -9999px -9999px; }

#preload-02 { Hintergrund: URL (upload/2022/web/image-02.png) keine Wiederholung -9999px -9999px; }

#preload-03 { Hintergrund: URL (upload/2022/web/image-03.png) no-repeat -9999px -9999px; }

2. js Bilder vorladen

Prinzip: Vorladen durch Schreiben von Funktionen. Binden Sie das Skript in eine Funktion ein und verwenden Sie addLoadEvent(), um das Vorladen zu verzögern, bis die Seite geladen ist.

Funktion Vorlader() {
  wenn (Dokument.Bilder) {
    var img1 = neues Bild();
    var img2 = neues Bild();
    var img3 = neues Bild();
    img1.src = "upload/2022/web/bild-001.gif";
    img2.src = "upload/2022/web/bild-002.gif";
    img3.src = "upload/2022/web/image-003.gif";
  }
}
Funktion addLoadEvent(Funktion) {
  var oldonload = fenster.onload;
  wenn (Typ von Fenster.beim Laden != 'Funktion') {
    Fenster.onload = Funktion;
  } anders {
    fenster.onload = funktion() {
      if (altgeladen) {
        altonload();
      }
      Funktion();
    }
  }
}
addLoadEvent(Vorlader);

3. Verwenden Sie Ajax, um das Vorladen zu implementieren

Prinzip: Verwenden Sie Ajax, um die Methode zum Vorladen von Bildern zu implementieren. Verwenden Sie DOM, um nicht nur Bilder vorzuladen, sondern auch CSS, JavaScript und andere verwandte Dinge.

fenster.onload = funktion() {
  setzeTimeout(Funktion() {
    // XHR um ein JS und ein CSS anzufordern
    var xhr = neue XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.js');
    xhr.send('');
    xhr = neue XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.css');
    xhr.send('');
    // Bild vorladen
    neues Bild ().src = "upload/2022/web/preload.png";
  }, 1000);
};

Der obige Code lädt „preload.js“, „preload.css“ und „preload.png“ vor. Das Timeout von 1000 Millisekunden soll verhindern, dass das Skript hängen bleibt und Funktionsprobleme bei normalen Seiten verursacht.

3. Vergleich zwischen Lazy Loading und Preloading

1. Konzept

Das verzögerte Laden wird auch Lazy Loading genannt: Das Laden der Daten erfolgt nur dann, wenn diese wirklich benötigt werden.
Vorladen: Laden Sie im Voraus und rendern Sie direkt aus dem lokalen Cache, wenn der Benutzer es anzeigen muss

2. Unterschied

Das Wesentliche beider Technologien: Das Verhalten der beiden ist entgegengesetzt, die eine lädt im Voraus, die andere lädt langsam oder sogar überhaupt nicht.
Durch Lazy Loading wird der Druck am Vorderende etwas verringert, während durch Preloading der Druck am Vorderende erhöht wird.

3. Bedeutung

Der Hauptzweck des Lazy Loading besteht darin, die Front-End-Leistung zu optimieren und die Anzahl der Anfragen zu reduzieren bzw. zu verzögern.
Durch das Vorladen wird die Front-End-Leistung zugunsten der Benutzererfahrung geopfert, sodass Benutzervorgänge so schnell wie möglich wiedergegeben werden.

IV. Referenzen

【1】https://www.jb51.net/article/154930.htm
【2】https://www.jb51.net/article/57579.htm

Dies ist das Ende dieses Artikels über die spezifische Verwendung von Lazy Loading und Preloading in js. Weitere relevante Inhalte zu Lazy Loading und Preloading in js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Vue + Webpack implementiert eine Lazy-Loading-Prozessanalyse
Webpack4 SCSS-Extraktion und Lazy Loading-Beispiel
Detaillierte Erklärung, wie Webpack + React + React-Router Lazy Loading implementieren
JavaScript zum Implementieren des Vorladens und verzögerten Ladens von Bildern
Detaillierte Erläuterung des JS-Bildvorlade-Plugins
Detaillierte Erläuterung des Lazy Loading und Preloading von Webpack

<<: Schreiben und Verstehen von Pfeilfunktionen und diesem in JS

>>: Beispielcode des Spread-Operators und seiner Anwendung in JavaScript