Optimierung der CSS-Bereitstellung: Die Technik des verzögerten CSS-Ladens verstehen

Um die Website-Leistung zu verbessern, optimieren Entwickler häufig die CSS-Bereitstellung. Eine in der Google Developers-Dokumentation erwähnte Strategie besteht darin, kritisches CSS im Abschnitt

Dies lässt uns jedoch mit der Frage zurück: Wie können wir eine große CSS-Datei laden, nachdem die Seite geladen wurde?

Lösung: Das Laden großer CSS-Dateien verzögern

Um das Laden einer großen CSS-Datei zu verzögern, können wir ein einfaches jQuery-Code-Snippet verwenden:

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='" src " />"));
    }
};

Durch den Aufruf dieser Funktion innerhalb der Funktion $(document).ready() oder window.onload können wir die CSS-Datei dynamisch laden, nachdem die Seite vollständig geladen wurde.

Methodenüberprüfung

Um zu überprüfen, ob diese Methode funktioniert, deaktivieren Sie JavaScript in Ihrem Browser und laden Sie dann die Seite neu. Wenn die Seite mit den angewendeten Stylesheets immer noch korrekt geladen wird, zeigt dies die erfolgreiche Verzögerung des CSS-Ladens an.

Alternative Methoden

Es gibt alternative Methoden, um das Laden von CSS zu verzögern, z als Verwendung des