So laden Sie Frames und Seiten mit Javascript [Zusammenfassung]

Mit der zunehmenden Beliebtheit von Webanwendungen ist JavaScript zu einer der wesentlichen Fähigkeiten für Webentwickler geworden. Das Laden von Frames und Seiten durch JavaScript ist ein wichtiges Entwicklungsszenario, das Webentwicklern hilft, Webanwendungen besser zu verwalten und zu optimieren.

In diesem Artikel wird eine Sammlung von Methoden zum Laden von Frames und Seiten in JavaScript vorgestellt, einschließlich allgemeiner Methoden zum Laden von Frames, allgemeiner Methoden zum Laden von Seiten und der Verwendung asynchroner Anforderungen in diesen Methoden. Mithilfe dieser Techniken können Sie die Leistung Ihrer Webanwendungen verbessern und die Komplexität des Webentwicklungsprozesses besser bewältigen.

1. Gängige Methoden zum Laden von Frameworks

1 Verwendung des Skript-Tags

Das -Element ist derzeit die gebräuchlichste Methode zum Laden von JavaScript-Frameworks und -Bibliotheken. Dieses Element lädt externe Dateien mithilfe von JavaScript-Skripten. Legen Sie einfach das src-Attribut auf die URL fest, die die externe Skriptdatei enthält.

Beispiel:

Diese Methode hat einen klaren Vorteil: Sie ist am unkompliziertesten, am einfachsten zu verwenden und mit allen Browsern kompatibel. Allerdings hat es auch einige Nachteile. Wenn beispielsweise mehrere solcher Tags auf der Seite vorhanden sind (insbesondere beim ersten Laden des Bildschirms), kann dies negative Auswirkungen auf die Seitenleistung haben.

2. Verwenden Sie dynamisch erstellte Skriptelemente

Beim Laden eines externen Frameworks oder einer Bibliothek können Sie auch JavaScript-Code verwenden, der direkt ein erstellt. Mit dieser Methode können Sie die Ladezeit besser kontrollieren, die Ladezeit des ersten Bildschirms verkürzen und die Seitenleistung verbessern.

Beispiel:

var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://cdn.jsdelivr.net/npm/vue@2.6.11'; document.head.appendChild(script); Dieser Ansatz ist im Allgemeinen flexibler als die Verwendung eines statischen -Elements, da Sie so mehr Kontrolle über die Reihenfolge haben, in der Ihr Code geladen und ausgeführt wird. Darüber hinaus bietet es den zusätzlichen Vorteil, dass das Framework oder die Bibliothek geladen werden kann, nachdem die Seite vollständig geladen wurde.

3. AMD (Asynchronous Module Definition) Loader verwenden

AMD (Asynchronous Module Definition) ist ein Standard zum Definieren von Modulen. Im AMD Modular Loader werden modulare Skripte normalerweise als Module geladen, anstatt Skripte direkt in die globale Umgebung einzufügen.

Zum Beispiel:

require(['https://cdn.jsdelivr.net/npm/vue@2.6.11'], function(Vue) { // 加载成功后执行的代码 }); Der AMD-Loader kann Ihnen nicht nur bei der Verwendung von Modulen und Bibliotheken in Webanwendungen helfen, sondern auch dabei, diese komplexen und riesigen Projektdateien besser zu verwalten.

2. Gängige Methoden zum Laden von Seiten

1. Verwenden Sie das XHTMLHttpRequest-Objekt

XMLHttpRequest ist ein sehr wichtiger Teil von JavaScript, der zum Initiieren von HTTP-Anfragen in Webbrowsern und zum Lesen von Serverantworten verwendet wird. Diese API wird normalerweise für asynchrone Anfragen verwendet, kann aber auch für synchrone Anfragen verwendet werden.

Zum Beispiel:

var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data'); xhr.send(null); Diese Methode kann asynchron Daten anfordern und die Seite aktualisieren, wenn die Seite geladen wird, was das Laden der Seite beschleunigen und eine bessere Benutzererfahrung bieten kann.

2. Platzieren Sie JavaScript am Ende der Seite.

Das Platzieren von JavaScript am Ende der Seite kann eine sehr effektive Methode sein, wenn es um den Ladevorgang der Seite geht. Denn wenn ein Webbrowser eine Seite liest, liest er immer HTML- und CSS-Dateien. Sobald der Browser auf eine JavaScript-Datei trifft, stoppt er das Rendern und lädt dann die JavaScript-Datei und führt sie aus. Dadurch wird die Seite langsamer geladen.

Zum Beispiel:

Your Page Title Here Your content here

3. Verwenden Sie das Defer-Attribut.

Wenn Sie oben auf der Seite eine JavaScript-Datei laden müssen, haben wir eine andere Option, nämlich die Verwendung des neuen Defer-Attributs in HTML5. Dieser Ansatz gibt dem Betriebssystem die Möglichkeit, eine JavaScript-Datei asynchron herunterzuladen und auszuführen, nachdem das gesamte Dokument analysiert wurde.

Beispiel:

Your Page Title Here Your content here

Diese Methode funktioniert in allen modernen Browsern, bei der Verwendung älterer Browserversionen kann es jedoch zu Problemen kommen.

3. Verwenden Sie beim Laden von JavaScript asynchrone Anforderungen.

Beim Laden von Frames und Seiten müssen Sie manchmal während des Ladevorgangs einige asynchrone Anforderungen verwenden. In diesem Bereich gibt es viele Tools und Bibliotheken. Nachfolgend sind einige der am häufigsten verwendeten Anforderungsbibliotheken aufgeführt.

1.axios

axios ist eine beliebte Promise-basierte HTTP-Clientbibliothek, die in Browsern und Node.js verwendet werden kann und asynchrone Anfragen unterstützt.

Zum Beispiel:

axios.get('https://api.example.com/data') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); axios bietet viele Vorteile, einschließlich Konfigurierbarkeit, Promise-Schnittstelle, Anforderungsinterceptoren usw.

2.jQuery.ajax()

jQuery.ajax() ist eine weitere beliebte Ajax-Bibliothek, die viele Vorteile wie Benutzerfreundlichkeit, Skalierbarkeit und Kompatibilität bietet.

Zum Beispiel:

$.ajax({ method: "GET", url: "https://api.example.com/data", dataType: "json" }) .done(function(response) { console.log(response); }) .fail(function(error) { console.log(error); }); 3.fetch()

fetch() ist die native API von JavaScript, die zum asynchronen Anfordern von Websites verwendet werden kann und verschiedene Arten von Datenformaten unterstützt.

Zum Beispiel:

fetch('https://api.example.com/data') .then(function(response) { return response.json(); }) .then(function(json) { console.log('Parsed JSON', json); }) .catch(function(ex) { console.log('parsing failed', ex); }); Zusammenfassung

In diesem Artikel werden einige häufig verwendete JavaScript-Frameworks und Methoden zum Laden von Seiten sowie Methoden zur Verwendung asynchroner Anforderungen in diesen Methoden vorgestellt. Wählen Sie bitte basierend auf der tatsächlichen Situation die Methode aus, die für Sie am besten geeignet ist, und denken Sie stets daran, bei der Verwendung dieser Technologien in Webanwendungen Vorsicht und Vorsicht walten zu lassen. Von LLY