Optimisation des performances

Choisissez soigneusement les styles à forte consommation

Les attributs à forte consommation nécessitent que le navigateur effectue de nombreux calculs avant de dessiner :

box-shadows
border-radius
transparence
transformations
Filtres CSS (tueurs de performances)

Éviter la redistribution excessive

Lorsque la redistribution se produit, le navigateur doit recalculer la position et la taille de la mise en page, plus de détails.

Éléments de redistribution courants :

largeur
hauteur
rembourrage
marge
affichage
bordure -largeur
position
haut
gauche
droite
bas
taille de police
float
alignement du texte
font-weight
overflow
font-family
line-height
vertical-align
clear
white-space
min-height

Utiliser correctement l'affichage L'attribut

L'attribut Display affectera le rendu de la page, veuillez l'utiliser de manière rationnelle.

display : width, height, margin, padding et float ne doivent pas être utilisés après l'insertion en ligne ;
display : float ne doivent pas être utilisés après le blocage en ligne ; vertical-align;
display: table-* ne doit pas être utilisé après margin ou float
N'abusez pas de Float
Float a une grande quantité de calcul pendant le rendu, alors utilisez-le le moins possible.

Optimisation des performances d'animation

Le principe de mise en œuvre de l'animation est de profiter du phénomène de « persistance de la vision » de l'œil humain pour lire en continu plusieurs images fixes sur une courte période de temps, ce qui amène l'œil nu à créer une illusion due aux images visuelles résiduelles, et croire à tort que l'image est une image en « mouvement ».

Concept de base de l'animation :

Frame : pendant le processus d'animation, chaque image fixe est une "image"

Frame rate : c'est-à-dire le nombre d'images fixes lues par seconde, l'unité est fps ; (Image par seconde) ;
durée d'image : c'est-à-dire le temps de séjour de chaque image fixe, l'unité est généralement ms (milliseconde)
saut d'image (frame drop/drop frame) : la fréquence d'images ; est corrigé Dans l'animation, la durée d'une certaine image est beaucoup plus élevée que la durée moyenne de l'image, provoquant la compression et la perte des images suivantes.
Le taux de rafraîchissement du rendu des navigateurs généraux est de 60 ips, donc dans les pages Web, les animations avec une fréquence d'images de 50 à 60 ips seront assez fluides et confortables.

Si vous utilisez une animation basée sur javaScript, essayez d'utiliser requestAnimationFrame. Évitez d'utiliser setTimeout, setInterval.

Évitez de changer le style de chaque image via quelque chose comme jQuery animate()-style. Utilisez CSS pour déclarer l'animation. pour une meilleure navigation.
Utilisez la traduction au lieu du positionnement absolu et vous obtiendrez de meilleurs fps et l'animation sera plus fluide.

Utilisez davantage de fonctionnalités matérielles, telles que l'activation de l'accélération GPU via la déformation 3D

Généralement dans Chrome, la transformation 3D ou de perspective (transformation de perspective) Les propriétés CSS et l'animation CSS de l'opacité créeront un nouveau calque et un rendu accéléré par le matériel sous l'optimisation du canal, une fois que le GPU a terminé des opérations telles que la déformation 3D, il effectue des opérations composites sur les couches (Compesite Layers), évitant ainsi de déclencher un redessinage et un réarrangement à grande échelle du navigateur.

Remarque : la déformation 3D consommera plus de mémoire et de consommation d'énergie.

La fluidité de l'animation en utilisant Translate3d pour déplacer 500 pixels vers la droite est nettement meilleure que l'utilisation directe de la gauche :

.ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
  -webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
  transition: left .5s ease; left：0;
}
.ball-2.slidein {
  left：500px;
}

Améliorez les performances du sélecteur CSS

L'impact des sélecteurs CSS sur les performances vient du temps passé par le navigateur à faire correspondre les sélecteurs et le temps des éléments du document, le principe de l'optimisation des sélecteurs est donc d'essayer d'éviter d'utiliser des sélecteurs qui consomment plus de temps de correspondance. Avant cela, nous devons comprendre le mécanisme de correspondance des sélecteurs CSS, tels que les règles de sous-sélecteur :

#header > a {font-weight:blod;}

La plupart d'entre nous lisent de gauche à droite et configurent habituellement le navigateur pour qu'il lise de gauche à droite. On suppose que le coût de cette règle n’est pas élevé.

Nous supposerons que le navigateur fonctionne de cette manière : il recherche l'élément avec l'en-tête id, puis applique les règles de style à l'élément a dans l'élément enfant direct. Nous savons qu'il n'y a qu'un seul élément dans le document avec l'en-tête id, et qu'il n'a que quelques enfants de l'élément a, ce sélecteur CSS devrait donc être assez efficace.

En fait, c'est tout le contraire, les sélecteurs CSS correspondent aux règles de droite à gauche. Après avoir compris ce mécanisme, le sélecteur apparemment efficace de l'exemple a en pratique un coût de correspondance très élevé. Le navigateur doit parcourir tous les éléments de la page et déterminer si l'identifiant de son élément parent est l'en-tête.

Si vous remplacez le sélecteur enfant de l'exemple par un sélecteur descendant, cela coûtera plus cher. Après avoir parcouru tous les éléments de la page, vous devez parcourir leurs supérieurs jusqu'au nœud racine.

#header  a {font-weight:blod;}

Après avoir compris le mécanisme de correspondance des sélecteurs CSS de droite à gauche, je comprends que tant qu'il y a d'autres sélecteurs à gauche du sélecteur actuel, le système de style continuera à se déplacer vers la gauche jusqu'à ce qu'il trouve un sélecteur qui correspond à la règle, ou parce que Exit s'il n'y a pas de correspondance. Nous appelons le sélecteur le plus à droite sélecteur clé. ——Plus de détails

1. Évitez d'utiliser des sélecteurs universels

/* Not recommended */
.content * {color: red;}

Après avoir fait correspondre tous les éléments du document, le navigateur fera correspondre les éléments avec le contenu de la classe jusqu'au nœud racine du document. Par conséquent, la surcharge de correspondance est très importante, vous devez donc éviter d'utiliser le sélecteur à clé comme sélecteur générique.

2. Évitez d'utiliser des balises ou des sélecteurs de classe pour limiter les sélecteurs d'identifiant

/* Not recommended */
button#backButton {…}
/* Recommended */
#newMenuIcon {…}

3. Évitez d'utiliser des balises pour limiter les sélecteurs de classe

/* Not recommended */
treecell.indented {…}
/* Recommended */
.treecell-indented {…}
/* Much to recommended */
.hierarchy-deep {…}

4. Utilisez le remplacement du sélecteur de classe pour réduire la recherche CSS

/* Not recommended */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* Recommended */
.treecell-mailfolder {…}

5. Évitez d'utiliser des sous-sélecteurs

/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}

6. Utilisez l'héritage

/* Not recommended */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* Recommended */
#bookmarkMenuItem { list-style-image: url(blah) }

Optimisation des performances