Comment différer le chargement de gros fichiers CSS : devriez-vous utiliser le chargement dynamique de JavaScript ?

Comment différer le chargement de gros fichiers CSS

Dans le cadre de l'optimisation de la livraison CSS, vous souhaiterez peut-être différer le chargement d'un gros fichier CSS jusqu'à ce que la page soit chargée. Ceci peut être réalisé en utilisant l'approche suivante :

Utiliser JavaScript pour charger dynamiquement le fichier CSS

Une option consiste à utiliser JavaScript pour charger dynamiquement le fichier CSS après la page. a chargé. Par exemple, en utilisant jQuery, vous pouvez utiliser le code suivant :

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

Vous pouvez ensuite appeler cette fonction une fois la page chargée.

Désactivez JavaScript pour vérifier

Pour vérifier que cette approche fonctionne, désactivez JavaScript dans votre navigateur et rechargez la page. Vous devriez voir que le fichier CSS n'est chargé qu'après le chargement de la page.

Remarque pour les approches non JavaScript

Si vous préférez une approche purement JavaScript ou d'autres frameworks JavaScript, veuillez commenter ci-dessous et nous pouvons vous proposer des solutions supplémentaires.

N'oubliez pas qu'il est toujours recommandé d'expérimenter différentes approches et de les tester dans votre propre environnement pour trouver la solution optimale pour votre cas d'utilisation spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!