Une brève analyse du chargement CSS et de l'ordre de chargement
Cet article convient très bien aux étudiants et amis de base. Cet article présente principalement l'ordre de chargement et de chargement du CSS et l'analyse des problèmes rencontrés. L'article vous donne également une introduction supplémentaire à l'ordre de chargement du HTML, du CSS et du CSS. js. , les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.
Ordre de chargement CSS habituel
Généralement, notre feuille de style CSS est placée en tête, et afin de réduire les requêtes, nous fusionnons et compressons généralement les CSS. À l'heure actuelle, notre CSS est généralement chargé comme suit :
<head> <link rel="stylesheet" href="/all-of-my-styles.css"> </head> <body> …content… </body>
C'est OK, mais il y a plusieurs problèmes de performances, nous pouvons continuer à optimiser :
Problèmes :
Tous les CSS Tous sont fusionnés et compressés en un seul fichier et chargés en tête de page. Peut-être que nous n'utilisons qu'un peu de CSS sur le premier écran, mais chargeons tous les CSS dans l'en-tête, ce qui entraîne un chargement déraisonnable et un gaspillage de ressources. Si le CSS est très volumineux, cela affectera sérieusement la vitesse de chargement de la page Web et la vitesse d’affichage du premier écran.
Une autre façon de penser
S'il n'y a pas de fusion et une seule référence de compression CSS, la taille du fichier sera plus petite, mais le nombre de requêtes sera plus grand. Après avoir pesé les deux et effectué une comparaison de tests de performances, nous avons constaté que la méthode d'écriture suivante est en effet plus rapide que de placer tous les CSS dans la tête et de tout charger en même temps, et la vitesse d'affichage du premier écran est plus rapide :
<head> </head> <body> <!-- HTTP/2 push this resource, or inline it, whichever's faster --> <link rel="stylesheet" href="/site-header.css"> <header>…</header> <link rel="stylesheet" href="/article.css"> <main>…</main> <link rel="stylesheet" href="/comment.css"> <section class="comments">…</section> <link rel="stylesheet" href="/about-me.css"> <section class="about-me">…</section> <link rel="stylesheet" href="/site-footer.css"> <footer>…</footer> </body>
Mais il y a encore des performances qui peuvent être optimisées !
Par exemple :
Seuls l'en-tête et les articles sont affichés sur le premier écran, et les autres modules ne sont pas affichés sur le premier écran. Ensuite, nous pouvons charger les CSS des autres modules de manière complètement asynchrone. Comment charger de manière asynchrone ?
Veuillez voir ci-dessous
loadCSS et préchargement
Concernant le préchargement, nous ferons la promotion de 2 articles que tout le monde pourra lire :
1. " Précharger le contenu : https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
2. Précharger la documentation w3 : https://www.w3.org/TR /preload /
Pour certains css qui ne sont pas chargés sur le premier écran, on peut l'écrire comme suit :
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">
pour empêcher le navigateur de bannir les js. Par mesure de sécurité, on peut aussi l'écrire ainsi :
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">
Afin d'éviter que certains navigateurs rappellent l'attribut handler rel='stylesheet', nous recommandons généralement la méthode d'écriture suivante :
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
Pour une meilleure compatibilité avec rel=preload, vous pouvez utiliser loadCSS, adresse Github : https://github.com/filamentgroup/loadCSS
Par conséquent, sans tenir compte des problèmes de compatibilité du navigateur (compte tenu des problèmes de compatibilité, vous pouvez utiliser loadCss, plus de démonstration ici), nous utiliserons à nouveau le code ci-dessus Optimize :
<head> <link rel="stylesheet" href="/首屏加载css.css"> <link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> </head> <body> <header>…</header> <main>…</main> <section class="comments">…</section> <section class="about-me">…</section> <footer>…</footer> </body>
PS : Jetons un coup d'œil à l'ordre de chargement du html, css et js
<head lang="en"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/*.css"> <script src="js/*.js></script> </head>
L'ordre de chargement des documents DOM est de haut en bas. Chargement séquentiel
1 Le DOM est chargé dans la balise de lien
Le chargement du fichier CSS est parallèle au chargement du fichier CSS. DOM, c'est-à-dire que le Dom continue de se charger et de se construire lorsque le CSS est chargé, et le style CSS ou img rencontré dans le processus enverra une requête au serveur. Une fois la ressource renvoyée, elle sera ajoutée au serveur. position correspondante dans le dom;
2. Le DOM est chargé dans la balise script
Comme le fichier js ne sera pas chargé en parallèle avec le DOM, vous devez attendre l'intégralité du js. fichier à charger avant de continuer à charger le DOM. Si le fichier de script js est trop volumineux, cela peut entraîner un retard dans l'affichage de la page du navigateur et provoquer un état de « mort suspendue », cet effet est appelé « effet de blocage » ; conduire à une très mauvaise expérience utilisateur ;
Et cette fonctionnalité est aussi la raison pour laquelle $(document).ready(function(){ est nécessaire au début du fichier js }) ou (function(){}) ou window.onload, c'est-à-dire que le fichier js n'est exécuté qu'après le chargement du document DOM, de sorte qu'il n'y aura aucun problème tel que l'impossibilité de trouver le nœud DOM
js bloque d'autres La raison ; pour le chargement des ressources, c'est que pour empêcher js de modifier l'arborescence DOM, le navigateur doit reconstruire l'arborescence DOM
3 Solution
Prémisse, js est un script externe ; >
Ajoutez defer="ture" dans la balise script, ce qui entraînera le chargement de js et DOM en parallèle. Le fichier js sera exécuté après le chargement de la page, il n'y aura donc pas de blocagedans la balise scirpt Ajoutez async="ture". Cet attribut indique au navigateur que le fichier js est chargé et exécuté de manière asynchrone, c'est-à-dire qu'il ne dépend pas des autres js et css. Cela signifie que l'ordre de chargement des fichiers js ne peut pas. être garanti, mais il peut également être chargé en parallèle avec l'effet DOM ;
Lorsque les attributs defer et async sont utilisés en même temps, l'attribut defer sera invalide ; placez la balise scirpt après la balise body, afin qu'il n'y ait pas de conflits de chargement.
Recommandations associées :
Ordre de chargement et exécution des fichiers html, css et js
Problème d'ordre de chargement des pages_html /css_WEB- ITnose
Introduction détaillée aux résultats d'exécution des ordres de chargement des classes en Java
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment vérifier la date de bootstrap
Apr 07, 2025 pm 03:06 PM
Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.
