Heim > Artikel > Web-Frontend > Wie viele Möglichkeiten gibt es, Lazy Loading in js zu implementieren? Einführung in sechs Möglichkeiten des verzögerten Ladens in js

Wie viele Möglichkeiten gibt es, Lazy Loading in js zu implementieren? Einführung in sechs Möglichkeiten des verzögerten Ladens in js

不言Original: 2018-08-22 11:37:012544Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, wie viele Möglichkeiten es gibt, Lazy Loading in js zu implementieren. Die Einführung in die sechs Methoden des verzögerten Ladens von js hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

JS Lazy Loading bedeutet, dass man darauf wartet, dass die Seite geladen wird, bevor die JavaScript-Datei geladen wird.
JS Lazy Loading trägt dazu bei, die Seitenladegeschwindigkeit zu verbessern.
Die allgemeinen Methoden lauten wie folgt:

Defer-Attribut
Async-Attribut
Dynamische Erstellung der DOM-Methode
Verwenden Sie die getScript-Methode von jQuery
Verwenden Sie die setTimeout-Verzögerungsmethode
Lassen Sie JS Laden Sie abschließend

1. defer-Attribut
HTML 4.01 definiert das defer-Attribut für das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag.
Zweck: Gibt an, dass das Skript bei seiner Ausführung keinen Einfluss auf die Struktur der Seite hat. Mit anderen Worten: Das Skript wird verzögert, bis die gesamte Seite vor der Ausführung analysiert wurde.

Das Festlegen des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Attributs im defer-Element entspricht der Anweisung an den Browser, den Download sofort durchzuführen, die Ausführung jedoch zu verzögern.

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" defer="defer"></script>
    <script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

Hinweis: Obwohl das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Element innerhalb des 93f0f5c25f18dab9d176bd4f6de5d30e-Elements platziert ist, verzögert das enthaltene Skript die Ausführung, bis der Browser auf das 73a6ac4ed44ffec12cee46588e518a5e-Tag trifft.

Die HTML5-Spezifikation erfordert, dass Skripte in der Reihenfolge ausgeführt werden, in der sie erscheinen. In Wirklichkeit werden verzögerte Skripte nicht unbedingt in der richtigen Reihenfolge ausgeführt.

Das Defer-Attribut gilt nur für externe Skriptdateien. Implementierungen, die HTML5 unterstützen, ignorieren das von eingebetteten Skripten festgelegte Defer-Attribut.

2. Asynchrones Attribut

HTML5 definiert das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Attribut für das async-Tag. Ähnlich wie das Attribut defer werden sie verwendet, um das Verhalten von Verarbeitungsskripten zu ändern. Ebenso funktioniert nur mit externen Skriptdateien.
Zweck: Lassen Sie die Seite nicht darauf warten, dass das Skript heruntergeladen und ausgeführt wird, um andere Inhalte der Seite asynchron zu laden.

Asynchrone Skripte müssen vor dem Seitenladeereignis ausgeführt werden.
Es gibt keine Garantie dafür, dass die Skripte in der richtigen Reihenfolge ausgeführt werden.

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

Async blockiert wie defer nicht das Herunterladen anderer Ressourcen und hat daher keinen Einfluss auf das Laden der Seite.
Nachteile: Die Reihenfolge des Ladens kann nicht gesteuert werden

3. DOM-Methode dynamisch erstellen

//这些代码应被放置在</body>标签前（接近HTML文件的底部）
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }    
    if(window.addEventListener)
        window.addEventListener("load",downloadJSAtOnload,false);    
        else if(window.attachEvent)
        window.attachEvent("onload",downloadJAAtOnload);    
        else
        window.onload = downloadJSAtload;</script>

4 () Methode

$.getScript("outer.js",function(){  
//回调函数，成功获取文件后执行的函数
    console.log("脚本加载完成")
});

5. Verwenden Sie die setTimeout-Verzögerungsmethode

6. Lassen Sie JS zuletzt laden

In Verbindung stehende Artikel

Mehr sehen