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

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

不言

Freigeben： 2018-08-22 11:37:01

Original

2529 Leute haben es durchsucht

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 <script>-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 <script>-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>

Nach dem Login kopieren

Hinweis: Obwohl das <script>-Element innerhalb des <head>-Elements platziert ist, verzögert das enthaltene Skript die Ausführung, bis der Browser auf das </html>-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 <script>-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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

4 () Methode

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

Nach dem Login kopieren

5. Verwenden Sie die setTimeout-Verzögerungsmethode

6. Lassen Sie JS zuletzt laden

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

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