Le chargement CSS affectera-t-il la vitesse de chargement des pages ?-tutoriel CSS-php.cn

Le chargement CSS affectera-t-il la vitesse de chargement des pages ?

王林

Libérer： 2024-02-18 21:52:06

original

1083 Les gens l'ont consulté

Le chargement CSS affectera-t-il la vitesse de chargement des pages ?

La question de savoir si le chargement CSS bloquera le rendu des pages est une question courante. Cet article explorera en détail l'impact du chargement CSS sur le rendu des pages et fournira des exemples de code spécifiques à des fins de démonstration.

Tout d’abord, nous devons savoir comment le chargement CSS affecte le rendu des pages. Lorsque le navigateur analyse le HTML, s'il rencontre un fichier CSS externe, le navigateur suspend l'analyse du HTML, puis commence à télécharger le fichier CSS. Ce n'est qu'une fois le fichier CSS téléchargé et analysé par le navigateur que celui-ci continuera à analyser le HTML. Cela signifie que le chargement CSS bloquera le rendu de la page.

Pour démontrer cela, nous pouvons créer un simple fichier HTML contenant un fichier CSS externe et un élément d'espace réservé. Nous définirons une couleur d'arrière-plan dans le fichier CSS et appliquerons ce style sur l'élément placeholder dans le HTML. Nous utiliserons ensuite les outils de développement pour visualiser le processus de rendu de la page.

Le code HTML est le suivant :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="placeholder"></div>
  <script>
    console.log("This is a placeholder element.");
  </script>
</body>
</html>

Copier après la connexion

Le code CSS (enregistré sous styles.css) est le suivant :

.placeholder {
  width: 200px;
  height: 200px;
  background-color: red;
}

Copier après la connexion

Si nous ouvrons le fichier HTML et visualisons la sortie de la console, nous remarquerons que Ceci est un élément d'espace réservé.</ code> ne sera affiché qu'après le chargement du fichier CSS. Cela montre que le chargement CSS bloque le rendu de la page. <code>This is a placeholder element.会在CSS文件加载完成后才输出。这表明CSS加载确实会阻塞页面的渲染。

然而，有一种情况下CSS加载不会阻塞页面渲染。如果我们将CSS文件放在HTML的<body>标签中，并且使用<link>标签的rel属性值设置为preload，CSS文件将会以异步方式进行加载，而不会阻塞页面的渲染。以下是修改后的HTML代码示例：

<!DOCTYPE html>
<html>
<body>
  <div class="placeholder"></div>
  <link rel="preload" href="styles.css" as="style">
  <link rel="stylesheet" href="styles.css">
  <script>
    console.log("This is a placeholder element.");
  </script>
</body>
</html>

Copier après la connexion

在这个示例中，我们将CSS文件的链接放在了标签中，并使用了<link>标签的rel属性来异步加载CSS文件。如果我们再次打开这个HTML文件并查看控制台输出，我们会注意到This is a placeholder element.会在CSS文件加载之前输出。这意味着页面的渲染不会被CSS文件的加载阻塞。

总结起来，CSS加载会阻塞页面的渲染，除非我们使用异步加载的方法。异步加载CSS文件可以通过将<link>标签放在标签中，并使用rel属性的preload

Cependant, il existe une situation dans laquelle le chargement CSS ne bloque pas le rendu des pages. Si nous plaçons le fichier CSS dans la balise du HTML et utilisons la valeur de l'attribut rel de la balise <link> pour être preload, le fichier CSS sera chargé de manière asynchrone sans bloquer le rendu de la page. Voici un exemple du code HTML modifié :

rrreee

Dans cet exemple, nous avons mis le lien vers le fichier CSS dans la balise et utilisé

<link> code> attribut rel de la balise pour charger de manière asynchrone les fichiers CSS. Si nous ouvrons à nouveau le fichier HTML et regardons la sortie de la console, nous remarquerons que This is a placeholder element. est affiché avant le chargement du fichier CSS. Cela signifie que le rendu de la page ne sera pas bloqué par le chargement des fichiers CSS. 🎜🎜Pour résumer, le chargement CSS bloquera le rendu de la page sauf si nous utilisons la méthode de chargement asynchrone. Le chargement asynchrone des fichiers CSS peut être effectué en plaçant la balise <link> dans la balise  et en utilisant l'attribut rel de la valeur de  préchargement à atteindre. 🎜🎜 Par conséquent, lors de l'optimisation des performances des pages Web, nous pouvons envisager d'intégrer le code CSS clé dans HTML, ce qui peut éviter que le chargement CSS ne bloque le rendu de la page. Les CSS non critiques peuvent ensuite être chargés de manière asynchrone pour améliorer la vitesse de rendu des pages. 🎜

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!