La propriété d'optimisation du rendu des pages CSS va changer

Mots précédents

 Lorsque nous déclenchons la page pour dessiner une grande zone via certains comportements (cliquer, déplacer ou faire défiler), le navigateur n'est souvent pas préparé et ne peut utiliser que passivement le CPU pour calculer et redessiner la page. Dessin, comme il n'y avait pas de préparation à l'avance, il était difficile de gérer le rendu, donc le cadre tombait et restait bloqué. L'attribut CSS will-change fournit aux développeurs Web un moyen d'indiquer au navigateur les modifications qui se produiront sur l'élément, afin que le navigateur puisse effectuer les préparations d'optimisation correspondantes à l'avance avant que les attributs de l'élément ne changent réellement. Cette optimisation permet de préparer à l'avance une partie du travail de calcul complexe, rendant la page plus réactive et réactive. Cet article présentera la propriété CSS will-change

Connaissances préparatoires

  Le GPU est un processeur graphique spécialisé dans le traitement et le dessin de matériel lié aux graphiques. Le GPU est spécialement conçu pour effectuer des calculs mathématiques et géométriques complexes, libérant le CPU des tâches de traitement graphique et capable d'effectuer d'autres tâches plus système

  La soi-disant accélération matérielle signifie calculer dans l'ordinateur une très grande quantité de le travail est alloué à du matériel spécialisé pour réduire la charge de travail du processeur

  Les animations CSS, les transformations et les dégradés ne déclenchent pas automatiquement l'accélération GPU, mais utilisent le moteur de rendu logiciel légèrement plus lent du navigateur. Dans les mondes de transition, transform et animation, les processus doivent être déchargés sur le GPU pour accélérer les choses. Seule la déformation 3D aura son propre calque, tandis que la déformation 2D ne le sera pas.

【Hack】

Utilisez la méthode translateZ() ou translate3d() pour ajouter une déformation 3D inchangée à l'élément à tromper navigation Le processeur déclenche une accélération matérielle. Cependant, le coût est que cette situation occupe de l'espace de stockage RAM et GPU en superposant des éléments sur sa propre couche, et le temps de libération de l'espace ne peut pas être déterminé

Syntaxe

will-change

 Fonction : Notifier le navigateur à l'avance de l'animation que l'élément fera, permettant au navigateur de préparer à l'avance les paramètres d'optimisation appropriés

 Valeur : auto | <animateable-feature>

Valeur initiale : auto

Applicable à : tous les éléments

Héritage : Aucun

Compatibilité : IE13, chrome49, safari9.1 , IOS9.3 , Android52

  auto signifie qu'il n'y a pas de spécification spécifique quant aux attributs qui changeront. Le navigateur doit deviner par lui-même, puis optimiser à l'aide de certaines méthodes conventionnelles couramment utilisées par les navigateurs

<.> 

peut être les valeurs suivantes : <animateable-feature>

  

Indique que le développeur espère changer la position de la barre de défilement ou l'animer dans un avenir proche scroll-position

   

Indique que le développeur espère changer quelque chose dans le contenu de l'élément dans un avenir proche, ou les animer contents

ˆ

indique que le développeur espère changer le nom de la propriété spécifié ou l'animer dans un avenir proche. Si le nom de l'attribut est une abréviation, il représente toutes les abréviations correspondantes ou les attributs complets <custom-ident>

Utilisez

【Utilisez le survol】

Ne pas être comme Écrivez ce qui suit directement dans l'état par défaut, car will-change sera toujours suspendu :

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

Vous pouvez déclarer will-change lorsque l'élément parent survole, afin qu'il soit automatiquement supprimé lorsqu'il est déplacée. La plage déclenchée est essentiellement la plage d'éléments valide

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

[Utiliser le script javascript]

.sidebar {
  will-change: transform;
}

 L'exemple ci-dessus ajoute l'attribut will-change directement au style. feuille, ce qui amènera le navigateur à conserver le travail d'optimisation correspondant en mémoire est en fait inutile. Ce qui suit montre comment utiliser un script pour appliquer correctement l'attribut

will-change

var el = document.getElementById('element');
// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
  // 填写在CSS动画中发生改变的CSS属性名
  this.style.willChange = 'transform, opacity';
}
function removeHint() {
  this.style.willChange = 'auto';
}

[Utiliser directement]

 Cependant, si une application tourne les pages lorsque vous appuyez sur le clavier, par exemple comme album photo ou pour les diapositives, la page est très volumineuse et complexe. À ce stade, il convient d'écrire le changement dans la feuille de style. Cela permettra au navigateur de préparer l'animation de transition à l'avance, et vous pourrez voir l'animation flexible et légère lorsque vous appuyez sur le clavier

.slide {
  will-change: transform;
}

Notes

  1 . N'appliquez pas will-change à trop d'éléments : le navigateur a déjà fait de son mieux pour optimiser tout ce qui peut l'être. Il existe des optimisations plus puissantes qui, si elles sont combinées avec Will-Change, peuvent consommer beaucoup de ressources machine. Si elles sont utilisées de manière excessive, la page peut répondre lentement ou consommer beaucoup de ressources

  2. Là. sont à utiliser avec parcimonie : généralement, les navigateurs abandonnent le travail d’optimisation lorsqu’un élément est restauré à son état d’origine. Cependant, si l'attribut will-change est explicitement déclaré directement dans la feuille de style, cela signifie que l'élément cible peut changer fréquemment et que le navigateur enregistrera le travail d'optimisation plus longtemps qu'auparavant. La meilleure pratique consiste donc à changer la valeur de will-change via un script avant et après les changements d'élément

  3. N'appliquez pas l'optimisation will-change prématurément : si la page ne présente aucun problème de performances, n'ajoutez pas l'attribut will-change pour gagner un peu de vitesse. L'intention initiale de la conception du changement de volonté est une méthode d'optimisation de dernier recours pour tenter de résoudre les problèmes de performances existants. Il ne doit pas être utilisé pour éviter des problèmes de performances. Une utilisation excessive de will-change peut entraîner une utilisation importante de la mémoire et un processus de rendu plus complexe lorsque le navigateur tente de se préparer à d'éventuels changements. Cela entraînera des problèmes de performances plus graves

  4. Donnez-lui suffisamment de temps de travail : Cet attribut est utilisé pour permettre aux développeurs de pages d'informer le navigateur quels attributs peuvent changer. Le navigateur peut alors choisir d’effectuer un travail d’optimisation à l’avance avant que le changement ne se produise. Il est donc très important de laisser au navigateur le temps de procéder à ces optimisations. Lorsque vous l'utilisez, vous devez essayer de trouver des moyens de connaître les modifications possibles de l'élément à un certain moment à l'avance, puis y ajouter l'attribut will-change

Pour plus d'attribut d'optimisation du rendu des pages CSS va changer, veuillez faire attention au site Web PHP chinois pour les articles connexes !