Qu'est-ce que le chemin critique de rendu et comment l'optimiser-tutoriel CSS-php.cn

Qu'est-ce que le chemin critique de rendu et comment l'optimiser

Mary-Kate Olsen

Libérer： 2024-12-04 19:04:12

original

338 Les gens l'ont consulté

Qué es el Critical Rendering Path y cómo optimizarlo

Qu’est-ce que le chemin critique du rendu ?

Le chemin de rendu critique est la séquence de phases que traverse le navigateur pour convertir HTML, CSS et JavaScript en pixels à l'écran :

Analyse le HTML dans le DOM (Document Object Model).
Analyser le CSS dans le CSSOM (CSS Object Model).
Exécuter des scripts.
Calcule la taille et la position des éléments sur l'écran.
Rendre la page.

Ces étapes affectent directement les performances de notre site Web, il y aura donc des choses que nous devrons prendre en compte si nous voulons optimiser ce processus.

Construire le DOM

Le navigateur reçoit le HTML via un appel HTTP. Dès qu'il le reçoit, il commence à construire le DOM avec ces données.

Ce DOM est construit sur la base de nœuds, chaque balise HTML serait équivalente à un nœud, et les éléments enfants du HTML seraient également des nœuds enfants dans l'arborescence DOM.

Plus le nombre de nœuds est élevé, plus le processus de rendu de page prendra du temps.

Modèle d'objet CSS

Alors que le DOM contient toutes les informations sur le contenu de la page, le CSSOM contient toutes les informations sur la façon dont ce contenu va être visualisé.

Le traitement CSS bloque le rendu. Autrement dit, jusqu'à ce qu'il soit complètement traité, vous ne pouvez pas passer aux étapes suivantes pour enfin afficher le contenu à l'écran. En effet, il se peut que dans un fichier CSS, les styles appliqués quelques lignes ci-dessus soient écrasés.

Arbre de rendu

Une fois que le DOM et le CSSOM sont prêts, ceux-ci sont combinés pour donner naissance à "l'arbre de rendu", qui contiendra toutes les informations nécessaires sur les éléments qui apparaîtront à l'écran. Dans cet arbre, les éléments tels que tout ce qui a affichent : aucun ; et leurs descendants ou tout ce qui se trouve dans la balise

Mise en page

Dans la phase "Mise en page", la taille des éléments de l'arbre de rendu et leur relation avec les autres éléments sont définis. Ce processus dépend de l'écran sur lequel la page Web est visitée.

S'ils ne sont pas spécifiés, les éléments auront par défaut 100 % de la largeur du parent, ce qui dans certains navigateurs est une largeur fixe. C'est pourquoi il est nécessaire d'inclure cet élément dans le fichier extrait de notre document :

<head>
    <meta name="viewport" content="width=device-width" />
</head>

Copier après la connexion

Chaque fois qu'un utilisateur fait pivoter son appareil mobile, le processus de mise en page est réexécuté, car les éléments et leur disposition sur l'écran peuvent potentiellement changer.

La mise en page peut affecter les performances d'un site Web, car plus le nombre de nœuds est élevé, plus ce processus prendra du temps. Un processus de mise en page lent peut entraîner une mauvaise apparence de certaines animations, en plus de ralentir le chargement de la première page.

La peinture de la page

Peindre les pixels sur l'écran est la dernière étape du processus de rendu. C'est une étape rapide, car après le premier chargement (onload), seules les zones de la page qui ont subi des modifications seront repeintes ; les navigateurs sont déjà optimisés pour éviter d'effectuer ce processus inutilement.

Optimisation CRP

Ce processus peut être optimisé de différentes manières, mais chaque cas est unique et au final l'important est que vous appliquiez à votre projet les mesures qui lui conviennent le mieux.

Chargez les ressources critiques dès que possible

L'idée est que le navigateur télécharge le plus rapidement possible les ressources telles que les images, les styles, les scripts, etc. qui sont cruciales pour la page, il serait donc conseillé de mettre ces éléments le plus haut possible dans le

Même s'il s'agit de scripts ou de styles plus petits, ils peuvent être placés dans des balises en ligne.

<head>
    <meta name="viewport" content="width=device-width" />
</head>

Copier après la connexion

D'un autre côté, si ce que vous chargez est un script qui modifie un élément du DOM, l'idée serait de le charger une fois l'arborescence construite avec tous ses nœuds. C'est dans ces cas-là qu'il faudrait charger ce script à la fin dans la balise body.

<head>
    <style>
        .foo {
            color: red;
        }
    </style>
</head>

Copier après la connexion

Reporter le chargement du script

Retarder le chargement des scripts qui ne modifient pas le DOM est une très bonne pratique pour réduire le temps de chargement du site. Cela peut être fait via les attributs "async" et "defer".

Mettre un script comme asynchrone entraînera le téléchargement et l'exécution de ce script indépendamment, de sorte qu'il ne bloquera pas le processus de rendu et que le temps d'exécution est arbitraire.

Un script avec l'attribut defer sera téléchargé de manière asynchrone, mais respectera l'ordre dans lequel il se trouve dans le document. C'est également un bon moyen de contrôler si un petit script s'exécute après un script plus volumineux.

<html>
    <body>
        <!-- My content -->
        <script src="./path/to/my/script.js"></script>
    </body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, les trois scripts seront téléchargés de manière asynchrone. Nous supposons que le dernier script sera téléchargé en premier, car il est plus petit. Le premier script sera téléchargé et exécuté de manière totalement indépendante, sans attendre que les autres éléments soient prêts ni bloquer le processus de rendu. Dans tous les cas, le dernier script sera exécuté après le second, puisque l'attribut defer respecte l'ordre.

Séparation des styles avec les requêtes multimédias

L'idée serait de charger uniquement les styles qui seront nécessaires à l'écran, donc une technique qui pourrait aider à optimiser les performances serait de séparer les styles de page en différents fichiers selon qu'ils vont être appliqués ou non aux téléphones mobiles. , tablettes, ordinateurs de bureau, etc. Dans le HTML, ces fichiers seraient chargés avec des requêtes multimédias, évitant ainsi le chargement inutile de styles.

<head>
    <meta name="viewport" content="width=device-width" />
</head>

Copier après la connexion

Réduire les ressources

Bien que cela puisse paraître idiot, la réduction des fichiers peut considérablement contribuer à améliorer les performances d'une page, car l'élimination des espaces blancs, des commentaires, etc. peut réduire le travail que le navigateur doit effectuer pour construire l'arbre de rendu.

Conclusions

Ce ne sont là que quelques éléments à garder à l’esprit pour optimiser ce processus. Dans cet esprit, il est plus viable de pouvoir écrire du code de qualité déjà conçu pour optimiser le chemin de rendu critique.

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!