Utilisez CSS pour activer un exemple de code d'accélération matérielle sur ordinateur et mobile

Saviez-vous que nous pouvons utiliser CSS pour activer l'accélération matérielle dans le navigateur afin de permettre au GPU (Graphics Processing Unit) de fonctionner, améliorant ainsi les performances ?

La plupart des cartes graphiques d'ordinateur prennent désormais en charge l'accélération matérielle. Compte tenu de cela, nous pouvons utiliser la puissance du GPU pour rendre notre site Web ou notre application plus fluide.

Activer l'accélération matérielle avec CSS sur ordinateur et mobile

Les animations, transformations et transitions CSS n'activent pas automatiquement l'accélération GPU, mais sont effectuées par le lent moteur de rendu logiciel du navigateur. Alors comment passer en mode GPU ? De nombreux navigateurs proposent certaines règles CSS déclenchées.

Désormais, Chrome, FireFox, Safari, IE9+ et la dernière version d'Opera prennent tous en charge l'accélération matérielle, qui sera activée lorsqu'ils détecteront que certaines règles CSS sont appliquées à un élément DOM de la page, notamment Transformation 3D de l'élément caractéristique.

Par exemple :

.cube
 {
   -webkit-transform:
 translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5,0.5,0.5);
}

Mais dans certains cas, nous n'avons pas besoin d'appliquer des effets de transformation 3D aux éléments, alors que devons-nous faire ? À ce stade, nous pouvons utiliser une petite astuce pour « tromper » le navigateur afin d'activer l'accélération matérielle.

Même si nous ne souhaitons pas appliquer de transformations 3D aux éléments, nous pouvons toujours activer le moteur 3D. Par exemple, nous pouvons utiliser transform: translateZ(0); pour activer l'accélération matérielle.

.cube
 {
   -webkit-transform:
 translateZ(0);
   -moz-transform:
 translateZ(0);
   -ms-transform:
 translateZ(0);
   -o-transform:
 translateZ(0);
   transform:
 translateZ(0);
   /*
 Other transform properties here */

}

Dans Chrome et Safari, lorsque nous utilisons des transformations ou des animations CSS, la page peut scintiller. Le code suivant peut résoudre cette situation :

.cube
 {
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   -ms-backface-visibility:hidden;
   backface-visibility:hidden;
 
   -webkit-perspective:1000;
   -moz-perspective:1000;
   -ms-perspective:1000;
   perspective:1000;
   /*
 Other transform properties here */
}

.cube
 {
   -webkit-transform:
 translate3d(0,0,0);
   -moz-transform:
 translate3d(0,0,0);
   -ms-transform:
 translate3d(0,0,0);
   transform:
 translate3d(0,0,0);
  /*
 Other transform properties here */
}

Tutoriel vidéo CSS De nombreux didacticiels vidéo CSS en ligne peuvent. à regarder gratuitement !  

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!