Wie können Sie eine große CSS-Datei laden, nachdem die Seite geladen wurde?

CSS-Bereitstellung optimieren: 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 in den Abschnitt, während das Laden der ursprünglichen CSS-Datei verschoben wird, bis die Seite geladen wurde. Dieser Ansatz optimiert das Rendering, indem zunächst die Anzeige wesentlicher Stile priorisiert wird.

Dadurch stellt sich jedoch die Frage: 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+" />"));
    }
};

Indem Sie dies aufrufen Mit 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, versuchen Sie, JavaScript in Ihrem Browser zu deaktivieren und dann die Seite neu zu laden. 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 zum Verzögern des CSS-Ladens, z wie die Verwendung von

Das obige ist der detaillierte Inhalt vonWie können Sie eine große CSS-Datei laden, nachdem die Seite geladen wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!