Maison > Article > interface Web > Une brève analyse du chargement CSS et de l'ordre de chargement

Une brève analyse du chargement CSS et de l'ordre de chargement

小云云original: 2017-12-26 09:20:032298parcourir

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&#39;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=&#39;stylesheet&#39;">

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=&#39;stylesheet&#39;">

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=&#39;stylesheet&#39;">
<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=&#39;stylesheet&#39;">
</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 blocage

dans 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée du modèle de boîte étrange CSS et des exemples de modèles de boîte standardArticle suivant：Explication détaillée du modèle de boîte étrange CSS et des exemples de modèles de boîte standard

Articles Liés

Voir plus