Geschwindigkeitsoptimierung: Optimieren Sie Renderblockierungsskripte mit Async

Question

Auf https://bm-translations.de(vollständig selbstcodiert, keine cms usw.) Ich versuche, die Renderblockierung von zu beseitigen <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. Defer funktioniert nicht, da ich am Ende der Seite ein anderes Skript habe <script src="globaljs.js"></script>, das Bootstrap und JQuery Lazyloading usw. sowie Inline-Javascript danach enthält. Ich dachte, ich könnte asyncallen etwas geben . Zuerst dachte ich, es funktioniert, aber von Zeit zu Zeit (wie zufällig) zeigt es Folgendes:

Ich habe mich gefragt, ob es eine andere Option oder einen Weg gibt, um sicherzustellen, dass die Renderblockierungs-Abfrage vor den Skripten am Ende der Seite geladen wird, jedoch ohne Renderblockierung.

Answer 1

Sie können den folgenden Ansatz verwenden, um das Skript nacheinander mit Versprechungen zu laden.

Laden Sie auf DOMContentLoaded`` die Skriptsequenzen und um die Skripte asynchron zu laden, können Sie die ES6-Versprechen verwenden.

Beispielcode:

document.addEventListener('DOMContentLoaded', async function(event) {
    await loadScript("https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js");
    await loadScript("globaljs.js");
});

function loadScript(src) {
    return new Promise((resolve, reject) => {
        let file = document.createElement('script');
        file.src = src;
        document.body.appendChild(file);
        file.onload = file.onreadystatechange = function() {
            resolve(true);
        };
    });
}

Answer 2

bm-translations.deKeine Optimierung des JQuery-Ladevorgangs, persönliche Meinung. Das jQuery-Skript blockiert das Rendern nicht, es befindet sich bereits unten

Soweit ich am Ende der Seite verstanden habe, gibt es 2 Skripte. Das erste ist jquery und das zweite ist dynamisch und wird von der Serverseite für jede Seite separat generiert, wodurch das dynamische Verhalten mit dem HTML-Code verbunden wird

Übrigens - Mögliche Alternativen zum Platzieren von JS vor dem </body>End-Tag:

• Erstellen Sie Ihre Skripte
  • Verketten Sie einfach Ihre Skripte per Skript (für alte Projekte könnte dies gut funktionieren)
  • Verwendung browserify, webpackusw.
• Verwenden Sie RequireJSdiese Option, um asynchrone Skripte zu laden und Abhängigkeiten zu laden
• Schreiben Sie ein benutzerdefiniertes JS, das die Ladereihenfolge garantiert

Aber all diese Ansätze scheinen nicht anwendbar zu sein bm-translations.de