Débogage du CSS pour la réactivité de l'interface utilisateur

Cet article est extrait du livre "The Master of CSS" écrit par Tiffany Brown. Le livre est disponible dans les grandes librairies du monde entier, et vous pouvez également acheter la version E-Book ici.

CSS Certaines propriétés et valeurs déclenchent une reflux, qui est coûteuse et peut réduire la vitesse de réponse de l'interface utilisateur - le rendu de la page, la maîtrise de l'animation et les performances de défilement seront affectés, en particulier sur les téléphones mobiles et les tablettes sur des appareils de faible puissance tels que TVS.

Qu'est-ce que le réarrangement? {.title}

Le réarrangement fait référence à toute opération qui modifie une partie ou la totalité de la disposition de la page. Par exemple, modifiez la taille d'un élément ou mettez à jour sa position gauche. Ils amènent le navigateur à recalculer la hauteur, la largeur et la position d'autres éléments dans le document.

Repaindre (repeindre) est similaire à la repection et oblige le navigateur à renvoyer une partie du document. Par exemple, le changement de la couleur de la souris lors du survole sur un bouton est une opération de révolution. Le redémarrage a moins d'impact sur le réarrangement car il n'affecte pas la taille ou la position du nœud;

Le réarrangement et le redémarrage sont généralement déclenchés par les opérations DOM, comme l'ajout ou le retrait des éléments. Mais ils peuvent également être causés par des changements dans les attributs qui affectent la taille, la visibilité ou la position des éléments. Cela est vrai si les modifications sont causées par des animations JavaScript ou basées sur CSS.

Remarque: chargement de la page {.Title}

Lorsque la page se charge, le navigateur analyse le HTML, CSS et JavaScript initiaux initiaux, ce qui déclenche toujours la réorganisation et le redémarrage.

Il est difficile d'éviter complètement de redessiner et de réarrangement dans les projets. Cependant, nous pouvons utiliser des outils de chronologie pour les identifier et réduire leur impact.

outil de chronologie {.Title}

L'outil de chronologie peut être un peu déroutant au début. Ils mesurent les performances de l'avant et enregistrent le temps nécessaire pour que diverses tâches se terminent. En enregistrant l'activité lors de l'interaction avec la page, nous pouvons savoir quel code CSS peut provoquer des goulots d'étranglement de performances.

Pour utiliser la chronologie, cliquez sur l'onglet Timeline dans l'interface des outils du développeur. Dans Chrome, Opera et Firefox, il est bien nommé "Timeline". Safari l'a nommé la «chronologie» du formulaire pluriel. Internet Explorer 11 utilise le nom plus descriptif "Réactivité de l'interface utilisateur". ^[9]

Dans n'importe quel navigateur, appuyez sur le bouton "Enregistrer" pour démarrer le processus d'enregistrement. Interagissez avec la partie de la page qui a des problèmes et, une fois terminé, cliquez sur le bouton correspondant pour arrêter l'enregistrement.

Selon le navigateur que vous utilisez, vous pouvez voir les données immédiatement ou après l'arrêt de l'enregistrement. Safari et Firefox affichent des données en temps réel, tandis que Chrome, l'opéra et les explorateurs Internet rendent les graphiques de performances après l'arrêt de l'enregistrement.

Le chargement des documents, les appels de fonction, les événements DOM, le recalcul de style et les opérations de dessin sont tous enregistrés dans chaque navigateur, ce qui nous permet de décrire les goulots d'étranglement des performances. Quant aux performances CSS, nous devons nous concentrer sur au moins deux aspects connexes:

• Beaucoup d'opérations de recalcul et de dessin de style
• Fonctionnement long de longue date, les blocs plus grands dans la chronologie représentent

Pour comprendre la situation réelle, nous comparerons deux documents de base, exemple A et exemple B. Dans les deux cas, nous déplaçons une série d'éléments div {.Literal} de la position x 0 à x position 1000. Les deux exemples utilisent la conversion CSS. Cependant, dans l'exemple A, nous animerons l'attribut left. Dans l'exemple B, nous utiliserons la transformation de transformation et animerons l'attribut transform.

Les marques des deux exemples sont les mêmes (les résultats sont illustrés à la figure 3.16):

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Performance example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <button type="button" id="move">Move</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <🎜>
  </body>
</html>

Figure 3.16. Cliquez sur le bouton "Déplacer" changera

Classe sur chaque élément div: moved

var move = document.getElementById('move');
move.addEventListener('click', function(e) {
    var objs = document.body.querySelectorAll('div');
    Array.prototype.forEach.call(objs, function(o){
        o.classList.toggle('moved');
    });
});

Notre code CSS est une partie différente des deux. Le CSS utilisé dans l'exemple A est le suivant:

Après

div {
  background: #36f;
  margin-bottom: 1em;
  width: 30px;
  height: 30px;
  position: relative;
  left: 0;
  transition: left 2s ease-in;
}

.moved {
    left: 1000px;
}

, cette animation générera un grand nombre de calculs de style et redessinera les indicateurs dans notre chronologie. L'image suivante montre la sortie de la chronologie de cette conversion dans Safari (figure 3.17), Chrome (figure 3.18), Internet Explorer (figure 3.19) et Firefox (figure 3.20).

Figure 3.17. Sortie de la chronologie de la conversion de position de gauche dans Internet Explorer 11 BROWNER

Figure 3.20.

.

Les attributs déclenchent la réorganisation lorsqu'ils sont modifiés, même si les modifications sont causées par l'animation ou la transformation.

Maintenant, jetons un coup d'œil au CSS de l'exemple B:

Ici, nous utilisons la conversion et le converti entre

et left. left

Dans la plupart des navigateurs, les conversions ne déclenchent pas la réorganisation et notre calendrier contiendra moins d'opérations de repection. Cela est évident dans Safari (figure 3.21), Chrome (figure 3.22) et Internet Explorer (figure 3.23). Firefox est l'exception; comparer les figures 3.20 et la figure 3.24. Les délais de la conversion gauche et la transformation de la conversion sont très similaires.

Figure 3.21. Navigateur -webkit-transform

Figure 3.23. de code à supprimer {.Title}

transform Malheureusement, il n'y a pas de liste claire des propriétés provoqueront du réarrangement et de redémarrer. Les déclencheurs CSS de Paul Lewis sont les plus proches, mais il est spécifique au chrome. Cependant, les navigateurs se comportent de la même manière pour bon nombre de ces propriétés, donc cette ressource vous donne au moins une idée des propriétés peuvent causer des problèmes.

Une fois que vous savez quelles propriétés

peut être problématique, l'étape suivante consiste à tester l'hypothèse. Utilisez un commentaire ou ajoutez un préfixe temporaire

pour désactiver la propriété et réexécuter le test de la chronologie.

N'oubliez pas que les performances sont relatives, pas absolues ou parfaites. L'objectif est de s'améliorer: le faire mieux qu'avant. Si les performances de l'attribut ou de l'effet sont trop lentes à accepter, elle est complètement supprimée. transform

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!